fix: only use named params for merged-base style functions

Derived style function keys like `boxBoxShadow` already encode the
parameter name, so positional args are clearer: `styles.boxBoxShadow(shadow)`.
Named params are now only applied when the function key IS the base
style key (merged base), where the key alone doesn't communicate
what the parameter means: `styles.box({ size: 16 })`.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: skovhus

src/internal/lower-rules/finalize-decl.ts

@@ -519,8 +519,10 @@ export function finalizeDeclProcessing(ctx: DeclProcessingState): void {
   });
 
   // Convert single-positional-param style functions to use a named `props`
-  // object parameter: `(color: string) => ({color})` → `(props: {color: string}) => ({color: props.color})`.
-  convertStyleFnsToPropsPattern(state.j, styleFnDecls, styleFnFromProps);
+  // object parameter, but only when the function key IS the base style key
+  // (i.e., merged base). Separate derived keys like `boxBoxShadow` already
+  // encode the parameter name, so positional args are clearer there.
+  convertStyleFnsToPropsPattern(state.j, styleFnDecls, styleFnFromProps, decl.styleKey);
 
   insertStyleFnDeclsAfterComponent(resolvedStyleObjects, styleFnDecls, {
     styleKey: decl.styleKey,
@@ -780,6 +782,7 @@ function convertStyleFnsToPropsPattern(
   j: Parameters<typeof literalToAst>[0],
   styleFnDecls: Map<string, unknown>,
   styleFnFromProps: NonNullable<StyledDecl["styleFnFromProps"]>,
+  baseStyleKey: string,
 ): void {
   // Build a set of fnKeys that have matching styleFnFromProps entries.
   // Only convert functions whose call sites are managed via styleFnFromProps;
@@ -788,6 +791,12 @@ function convertStyleFnsToPropsPattern(
   const managedFnKeys = new Set(styleFnFromProps.map((p) => p.fnKey));
 
   for (const [fnKey, fnAst] of styleFnDecls.entries()) {
+    // Only convert merged-base functions (fnKey === baseStyleKey). Separate
+    // derived keys like `boxBoxShadow` already encode the parameter name,
+    // so positional args are clearer: `styles.boxBoxShadow(shadow)`.
+    if (fnKey !== baseStyleKey) {
+      continue;
+    }
     if (!managedFnKeys.has(fnKey)) {
       continue;
     }

test-cases/attrs-tabIndex.output.tsx

@@ -20,10 +20,7 @@ export function ScrollableFlex(props: Props) {
         [
           styles.scrollableFlex,
           applyBackground ? styles.scrollableFlexApplyBackground : undefined,
-          props.gutter != null &&
-            styles.scrollableFlexScrollbarGutter({
-              scrollbarGutter: props.gutter,
-            }),
+          props.gutter != null && styles.scrollableFlexScrollbarGutter(props.gutter),
           sx,
         ],
         className,
@@ -48,10 +45,7 @@ export function ScrollableDiv(
         [
           styles.scrollableDiv,
           applyBackground ? styles.scrollableDivApplyBackground : undefined,
-          gutter != null &&
-            styles.scrollableDivScrollbarGutter({
-              scrollbarGutter: gutter,
-            }),
+          gutter != null && styles.scrollableDivScrollbarGutter(gutter),
           sx,
         ],
         className,
@@ -93,8 +87,8 @@ const styles = stylex.create({
   scrollableFlexApplyBackground: {
     backgroundColor: $colors.bgBase,
   },
-  scrollableFlexScrollbarGutter: (props: { scrollbarGutter: string }) => ({
-    scrollbarGutter: props.scrollbarGutter,
+  scrollableFlexScrollbarGutter: (scrollbarGutter: string) => ({
+    scrollbarGutter,
   }),
   scrollableDiv: {
     overflowY: "auto",
@@ -109,7 +103,7 @@ const styles = stylex.create({
   scrollableDivApplyBackground: {
     backgroundColor: $colors.bgBase,
   },
-  scrollableDivScrollbarGutter: (props: { scrollbarGutter: string }) => ({
-    scrollbarGutter: props.scrollbarGutter,
+  scrollableDivScrollbarGutter: (scrollbarGutter: string) => ({
+    scrollbarGutter,
   }),
 });

test-cases/attrs.output.tsx

@@ -23,13 +23,7 @@ function Input(props: InputProps) {
       size={small ? 5 : undefined}
       type="text"
       {...rest}
-      sx={[
-        styles.input,
-        padding != null &&
-          styles.inputPadding({
-            padding: padding,
-          }),
-      ]}
+      sx={[styles.input, padding != null && styles.inputPadding(padding)]}
     />
   );
 }
@@ -176,11 +170,7 @@ function DynamicHeightBox(props: DynamicHeightBoxProps) {
     <div
       sx={[
         styles.dynamicHeightBox,
-        height
-          ? styles.dynamicHeightBoxHeight({
-              height: `${height}px`,
-            })
-          : undefined,
+        height ? styles.dynamicHeightBoxHeight(`${height}px`) : undefined,
       ]}
     >
       {children}
@@ -220,8 +210,8 @@ const styles = stylex.create({
       color: "#bf4f74",
     },
   },
-  inputPadding: (props: { padding: string }) => ({
-    padding: props.padding,
+  inputPadding: (padding: string) => ({
+    padding,
   }),
   textInput: {
     height: 32,
@@ -265,7 +255,7 @@ const styles = stylex.create({
     display: "flex",
     alignItems: "center",
   },
-  dynamicHeightBoxHeight: (props: { height: string }) => ({
-    height: props.height,
+  dynamicHeightBoxHeight: (height: string) => ({
+    height,
   }),
 });

test-cases/basic-functionCssTemplate.output.tsx

@@ -26,15 +26,7 @@ function ColoredBox(props: ColoredBoxProps) {
   const { children, color } = props;
 
   return (
-    <div
-      sx={[
-        styles.coloredBox,
-        color != null &&
-          styles.coloredBoxBackgroundColor({
-            backgroundColor: color,
-          }),
-      ]}
-    >
+    <div sx={[styles.coloredBox, color != null && styles.coloredBoxBackgroundColor(color)]}>
       {children}
     </div>
   );
@@ -49,36 +41,11 @@ export const App = () => (
     <FlexContainer align="right">
       <ColoredBox>Right aligned</ColoredBox>
     </FlexContainer>
-    <div
-      sx={[
-        styles.borderBox,
-        styles.borderBoxBorderColor({
-          borderColor: "red",
-        }),
-      ]}
-    >
-      Red border
-    </div>
-    <div
-      sx={[
-        styles.shadowBox,
-        styles.shadowBoxBoxShadow({
-          boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-        }),
-      ]}
-    >
+    <div sx={[styles.borderBox, styles.borderBoxBorderColor("red")]}>Red border</div>
+    <div sx={[styles.shadowBox, styles.shadowBoxBoxShadow("0 2px 4px rgba(0,0,0,0.2)")]}>
       With shadow
     </div>
-    <div
-      sx={[
-        styles.blockBox,
-        styles.blockBoxWidth({
-          width: "50%",
-        }),
-      ]}
-    >
-      Half width
-    </div>
+    <div sx={[styles.blockBox, styles.blockBoxWidth("50%")]}>Half width</div>
   </div>
 );
 
@@ -99,8 +66,8 @@ const styles = stylex.create({
     backgroundColor: "lightgray",
     borderRadius: 4,
   },
-  coloredBoxBackgroundColor: (props: { backgroundColor: string }) => ({
-    backgroundColor: props.backgroundColor,
+  coloredBoxBackgroundColor: (backgroundColor: string) => ({
+    backgroundColor,
   }),
   // Non-destructured props pattern: (props) => css`...${props.color}...`
   borderBox: {
@@ -110,23 +77,23 @@ const styles = stylex.create({
     borderColor: "black",
     margin: 4,
   },
-  borderBoxBorderColor: (props: { borderColor: string }) => ({
-    borderColor: props.borderColor,
+  borderBoxBorderColor: (borderColor: string) => ({
+    borderColor,
   }),
   // Non-destructured props with different param name: (p) => css`...${p.color}...`
   shadowBox: {
     padding: 12,
     boxShadow: "none",
   },
-  shadowBoxBoxShadow: (props: { boxShadow: string }) => ({
-    boxShadow: props.boxShadow,
+  shadowBoxBoxShadow: (boxShadow: string) => ({
+    boxShadow,
   }),
   // Block body with return statement: (props) => { return css`...`; }
   blockBox: {
     display: "block",
     width: "100%",
   },
-  blockBoxWidth: (props: { width: string }) => ({
-    width: props.width,
+  blockBoxWidth: (width: string) => ({
+    width,
   }),
 });

test-cases/basic-sharedBase.output.tsx

@@ -39,26 +39,10 @@ function PositionBase<C extends React.ElementType = "div">(
       {...rest}
       {...mergedSx(
         [
-          top
-            ? styles.positionBaseTop({
-                top: top,
-              })
-            : undefined,
-          right
-            ? styles.positionBaseRight({
-                right: right,
-              })
-            : undefined,
-          bottom
-            ? styles.positionBaseBottom({
-                bottom: bottom,
-              })
-            : undefined,
-          left
-            ? styles.positionBaseLeft({
-                left: left,
-              })
-            : undefined,
+          top ? styles.positionBaseTop(top) : undefined,
+          right ? styles.positionBaseRight(right) : undefined,
+          bottom ? styles.positionBaseBottom(bottom) : undefined,
+          left ? styles.positionBaseLeft(left) : undefined,
           sx,
         ],
         className,
@@ -98,17 +82,17 @@ export function App() {
 }
 
 const styles = stylex.create({
-  positionBaseTop: (props: { top: string }) => ({
-    top: props.top,
+  positionBaseTop: (top: string) => ({
+    top,
   }),
-  positionBaseRight: (props: { right: string }) => ({
-    right: props.right,
+  positionBaseRight: (right: string) => ({
+    right,
   }),
-  positionBaseBottom: (props: { bottom: string }) => ({
-    bottom: props.bottom,
+  positionBaseBottom: (bottom: string) => ({
+    bottom,
   }),
-  positionBaseLeft: (props: { left: string }) => ({
-    left: props.left,
+  positionBaseLeft: (left: string) => ({
+    left,
   }),
   relative: {
     position: "relative",

test-cases/conditional-helperCall.output.tsx

@@ -38,11 +38,7 @@ function Title(props: TitleProps) {
       sx={[
         styles.title,
         truncateTitle ? helpers.truncate : undefined,
-        maxWidth
-          ? styles.titleMaxWidth({
-              maxWidth: maxWidth,
-            })
-          : undefined,
+        maxWidth ? styles.titleMaxWidth(maxWidth) : undefined,
       ]}
     >
       {children}
@@ -74,7 +70,7 @@ const styles = stylex.create({
   title: {
     fontSize: 50,
   },
-  titleMaxWidth: (props: { maxWidth: number }) => ({
-    maxWidth: props.maxWidth,
+  titleMaxWidth: (maxWidth: number) => ({
+    maxWidth,
   }),
 });

test-cases/conditional-logicalAnd.output.tsx

@@ -10,15 +10,7 @@ function LayeredBox(props: LayeredBoxProps) {
   const { children, zIndex } = props;
 
   return (
-    <div
-      sx={[
-        styles.layeredBox,
-        zIndex !== undefined &&
-          styles.layeredBoxZIndex({
-            zIndex: zIndex,
-          }),
-      ]}
-    >
+    <div sx={[styles.layeredBox, zIndex !== undefined && styles.layeredBoxZIndex(zIndex)]}>
       {children}
     </div>
   );
@@ -84,8 +76,8 @@ const styles = stylex.create({
   layeredBox: {
     position: "absolute",
   },
-  layeredBoxZIndex: (props: { zIndex: number }) => ({
-    zIndex: props.zIndex,
+  layeredBoxZIndex: (zIndex: number) => ({
+    zIndex,
   }),
   grayscaleImage: {
     width: 100,

test-cases/conditional-nestedConditionRoot.output.tsx

@@ -8,16 +8,7 @@ function Layer(props: LayerProps) {
   const { children, $zIndex, $layer } = props;
 
   return (
-    <div
-      sx={[
-        styles.layer,
-        $layer.isTop
-          ? styles.layerZIndex({
-              zIndex: $zIndex,
-            })
-          : undefined,
-      ]}
-    >
+    <div sx={[styles.layer, $layer.isTop ? styles.layerZIndex($zIndex) : undefined]}>
       {children}
     </div>
   );
@@ -42,7 +33,7 @@ const styles = stylex.create({
     backgroundColor: "#ddd",
     color: "#222",
   },
-  layerZIndex: (props: { zIndex: string }) => ({
-    zIndex: props.zIndex,
+  layerZIndex: (zIndex: string) => ({
+    zIndex,
   }),
 });

test-cases/conditional-nullishCoalescing.output.tsx

@@ -9,17 +9,7 @@ type DividerProps = {
 function Divider(props: DividerProps) {
   const { color } = props;
 
-  return (
-    <hr
-      sx={[
-        styles.divider,
-        color != null &&
-          styles.dividerBackgroundColor({
-            backgroundColor: color,
-          }),
-      ]}
-    />
-  );
+  return <hr sx={[styles.divider, color != null && styles.dividerBackgroundColor(color)]} />;
 }
 
 export const App = () => (
@@ -39,7 +29,7 @@ const styles = stylex.create({
     marginBlock: 16,
     marginInline: 0,
   },
-  dividerBackgroundColor: (props: { backgroundColor: string }) => ({
-    backgroundColor: props.backgroundColor,
+  dividerBackgroundColor: (backgroundColor: string) => ({
+    backgroundColor,
   }),
 });