feat: reorder style fns, merge static+dynamic, and use named params (#330)

* feat: reorder style fns, merge static+dynamic, and use named params

- Style function entries in stylex.create() now appear immediately after
  their corresponding static style key for better readability
- When a static base style is never used without its dynamic counterpart,
  they are merged into a single style function
- Style functions with a single parameter now use a named props object
  pattern: `(props: {size: number}) => ({...})` instead of positional args
- Extract shared wrapCallArgForPropsObject helper to eliminate duplication
  across three emitter call sites

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

* fix: skip non-computed MemberExpression properties in identifier rewrite

replaceIdentifierInAst now skips the `property` key of non-computed
MemberExpressions, preventing incorrect rewrites like `Math.min` →
`Math.props.min` when the param name matches a member property name.

Addresses review comment on #330.

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

* fix: bail on base/fn merge when properties overlap

When mergeBaseIntoSingleStyleFn encounters static properties that also
exist in the dynamic function body, it now bails instead of silently
dropping the static values. This avoids any semantic ambiguity about
override priority between static and dynamic values for the same CSS
property.

Addresses review comment on #330.

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

* 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>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: skovhus

src/__tests__/fixture-adapters.ts

@@ -56,6 +56,7 @@ export const fixtureAdapter = defineAdapter({
         "htmlProp-input",
         "transientProp-notForwarded",
         "inlineBase-booleanVariantKey",
+        "inlineBase-singletonBooleanWithTemplateExpr",
         "inlineBase-stringVariantExported",
       ].some((filePath) => ctx.filePath.includes(filePath))
     ) {

src/__tests__/transform.test.ts

@@ -4359,9 +4359,14 @@ export const Header = styled(Flex)<{ isCompact?: boolean }>\`
 
 export function App() {
   return (
-    <Header justify="center" gap={12} isCompact>
-      Header
-    </Header>
+    <>
+      <Header justify="center" gap={12} isCompact>
+        Header
+      </Header>
+      <Header justify="flex-start" gap={8}>
+        Header 2
+      </Header>
+    </>
   );
 }
 `;
@@ -4397,9 +4402,14 @@ export const Header = styled(Flex).withConfig({
 
 export function App() {
   return (
-    <Header justify="center" gap={12} isCompact>
-      Header
-    </Header>
+    <>
+      <Header justify="center" gap={12} isCompact>
+        Header
+      </Header>
+      <Header justify="flex-start" gap={8}>
+        Header 2
+      </Header>
+    </>
   );
 }
 `;
@@ -4535,7 +4545,9 @@ export function App() {
 
     expect(result.code).not.toBeNull();
     const code = result.code ?? "";
-    expect(code).toContain("containerGapVariants");
+    // Single-key consumed prop emits as conditional style, not a variant object
+    expect(code).toContain("styles.containerGap8");
+    // Template expression also produces a conditional style for gap
     expect(code).toContain("styles.containerGap");
   });
 

src/internal/emit-wrappers/emit-intrinsic-should-forward-prop.ts

@@ -25,7 +25,12 @@ import {
   appendThemeBooleanStyleArgs,
   buildUseThemeDeclaration,
 } from "./emit-intrinsic-simple.js";
-import { mergeOrderedEntries, styleRef, type OrderedStyleEntry } from "./style-expr-builders.js";
+import {
+  mergeOrderedEntries,
+  styleRef,
+  wrapCallArgForPropsObject,
+  type OrderedStyleEntry,
+} from "./style-expr-builders.js";
 import type { JSCodeshift, Identifier } from "jscodeshift";
 
 /**
@@ -514,7 +519,8 @@ export function emitShouldForwardPropWrappers(ctx: EmitIntrinsicContext): void {
         : p.jsxProp === "__props"
           ? j.identifier("props")
           : j.identifier(p.jsxProp);
-      const callArg = p.callArg ?? propExpr;
+      const rawCallArg = p.callArg ?? propExpr;
+      const callArg = wrapCallArgForPropsObject(j, rawCallArg, p.propsObjectKey);
       const call = j.callExpression(styleRef(j, stylesIdentifier, p.fnKey), [callArg]);
       let expr: ExpressionKind;
       if (p.conditionWhen) {

src/internal/emit-wrappers/style-expr-builders.ts

@@ -61,6 +61,24 @@ export function styleRef(j: JSCodeshift, stylesIdentifier: string, key: string):
   return j.memberExpression(j.identifier(stylesIdentifier), j.identifier(key)) as ExpressionKind;
 }
 
+/**
+ * When a style function uses a `props` object parameter, wraps the raw call
+ * argument in `{ [propsObjectKey]: rawArg }`. Returns `rawArg` unchanged when
+ * `propsObjectKey` is not set.
+ */
+export function wrapCallArgForPropsObject(
+  j: JSCodeshift,
+  rawArg: ExpressionKind,
+  propsObjectKey: string | undefined,
+): ExpressionKind {
+  if (!propsObjectKey) {
+    return rawArg;
+  }
+  return j.objectExpression([
+    j.property("init", j.identifier(propsObjectKey), rawArg),
+  ]) as unknown as ExpressionKind;
+}
+
 // ---------------------------------------------------------------------------
 // Extra style key splitting
 // ---------------------------------------------------------------------------
@@ -541,7 +559,8 @@ export function buildStyleFnExpressions(
 
   for (const p of styleFnPairs) {
     const propExpr = p.jsxProp === "__props" ? propsId : propExprBuilder(p.jsxProp);
-    const callArg = p.callArg ?? propExpr;
+    const rawCallArg = p.callArg ?? propExpr;
+    const callArg = wrapCallArgForPropsObject(j, rawCallArg, p.propsObjectKey);
     const call = j.callExpression(styleRef(j, stylesIdentifier, p.fnKey), [callArg]);
 
     // Track call arg identifier for destructuring if needed

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

@@ -22,4 +22,9 @@ export type StyleFnFromPropsEntry = {
   callArg?: ExpressionKind;
   /** Source order index for CSS cascade ordering against variant entries. */
   sourceOrder?: number;
+  /**
+   * When set, the style function uses a `props` object parameter and the call
+   * site must wrap the argument in `{ [propsObjectKey]: callArg }`.
+   */
+  propsObjectKey?: string;
 };