fix: merge extraClassNames into stylex.props spread for useSxProp: false

When useSxProp is false, the inline path emits {...stylex.props(...)}.
Previously, extraClassNames were added as a separate className= attribute
after the spread, which overrides the spread's className and loses the
StyleX classes entirely.

Now, for the non-sx path, extraClassNames are folded into classNameAttr
so buildInlineMergeCall merges them properly. For the sx path (sx and
className are independent), the separate className attribute is preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: skovhus

src/__tests__/transform.test.ts

@@ -5256,3 +5256,74 @@ export const App = () => <Box $spacing="sm">Content</Box>;
     }
   });
 });
+
+describe("extraClassNames with useSxProp: false", () => {
+  it("should merge CSS module className into stylex.props spread instead of adding duplicate className", () => {
+    const source = `
+import styled from "styled-components";
+import { draggableRegion } from "./lib/helpers";
+
+const DraggableBar = styled.div\`
+  pointer-events: all;
+  \${draggableRegion(true)};
+\`;
+
+export function App() {
+  return <DraggableBar>Draggable</DraggableBar>;
+}
+`;
+
+    const adapterWithNoSxProp = {
+      externalInterface() {
+        return { styles: false, as: false, ref: false };
+      },
+      resolveValue() {
+        return undefined;
+      },
+      resolveCall(ctx: Parameters<NonNullable<Adapter["resolveCall"]>>[0]) {
+        if (ctx.calleeImportedName === "draggableRegion") {
+          return {
+            extraClassNames: [
+              {
+                expr: "electronStyles.draggableRegionDisableChildren",
+                imports: [
+                  {
+                    from: { kind: "specifier" as const, value: "./lib/electronMixins.module.css" },
+                    names: [{ imported: "default", local: "electronStyles" }],
+                  },
+                ],
+              },
+            ],
+          };
+        }
+        return undefined;
+      },
+      resolveSelector() {
+        return undefined;
+      },
+      styleMerger: null,
+      useSxProp: false,
+    } satisfies Adapter;
+
+    const result = transformWithWarnings(
+      {
+        source,
+        path: join(testCasesDir, "mixin-extraClassNames.input.tsx"),
+      },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: adapterWithNoSxProp },
+    );
+
+    expect(result.code).not.toBeNull();
+    // With useSxProp: false, the output uses {...stylex.props(...)}.
+    // The CSS module className must be folded into the merge, not added as a
+    // separate className attribute that would override the spread's className.
+    // A duplicate className= after {...stylex.props(...)} causes the element to
+    // lose its StyleX classes entirely.
+    expect(result.code).toContain("stylex.props");
+    expect(result.code).toContain("electronStyles");
+    // The className from CSS module should NOT be a standalone JSX attribute
+    // following the spread — it must be merged.
+    expect(result.code).not.toMatch(/\{\.\.\.stylex\.props\([^)]+\)\}\s*className=/);
+  });
+});

src/internal/transform-steps/rewrite-jsx.ts

@@ -737,11 +737,32 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
           styleAttr = null;
         }
 
+        // Build extra className expression from CSS module classes (if any).
+        const extraClassNameExpr =
+          decl.extraClassNames && decl.extraClassNames.length > 0
+            ? buildExtraClassNameExpr(j, decl.extraClassNames)
+            : undefined;
+
         // Build final rest with stylex.props inserted after last spread.
         // For inlined components with className/style, use adapter-configured
         // merger behavior (or verbose fallback when no merger is configured).
-        const needsMerge = classNameAttr !== null || styleAttr !== null;
         const isIntrinsicTag = /^[a-z]/.test(finalTag) && !finalTag.includes(".");
+
+        // When NOT using sx prop, CSS module classNames must be merged into
+        // the stylex.props spread (via classNameAttr) to avoid a duplicate
+        // className attribute that would override the spread's className.
+        // When using sx prop, sx and className are independent attributes.
+        let effectiveClassNameAttr = classNameAttr;
+        if (extraClassNameExpr && !ctx.adapter.useSxProp) {
+          // Synthesize a JSX className attribute so buildInlineMergeCall
+          // folds the CSS module class into the spread merge.
+          effectiveClassNameAttr = j.jsxAttribute(
+            j.jsxIdentifier("className"),
+            j.jsxExpressionContainer(extraClassNameExpr),
+          );
+        }
+
+        const needsMerge = effectiveClassNameAttr !== null || styleAttr !== null;
         const useSxProp = ctx.adapter.useSxProp && !needsMerge && isIntrinsicTag;
         const stylexAttr = useSxProp
           ? (() => {
@@ -756,7 +777,7 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
                 ? buildInlineMergeCall(
                     j,
                     styleArgs,
-                    classNameAttr,
+                    effectiveClassNameAttr,
                     styleAttr,
                     ctx.adapter.styleMerger?.functionName,
                   )
@@ -765,25 +786,16 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
                     [...styleArgs],
                   ),
             );
-        // Emit extraClassNames as a className attribute (CSS module classes)
+
+        // For sx prop mode, emit extraClassNames as a separate className attribute
+        // (sx and className are independent and don't conflict).
         const extraClassNameAttrs: typeof keptRestAfterVariants = [];
-        if (decl.extraClassNames && decl.extraClassNames.length > 0) {
-          const classNameExprs = decl.extraClassNames.map((cn) => cn.expr);
-          const classNameExpr =
-            classNameExprs.length === 1 && classNameExprs[0]
-              ? classNameExprs[0]
-              : (() => {
-                  // Multiple: join with template literal `${a} ${b}`
-                  const qs: ReturnType<typeof j.templateElement>[] = [];
-                  for (let i = 0; i <= classNameExprs.length; i++) {
-                    const isLast = i === classNameExprs.length;
-                    const raw = i === 0 || isLast ? "" : " ";
-                    qs.push(j.templateElement({ raw, cooked: raw }, isLast));
-                  }
-                  return j.templateLiteral(qs, classNameExprs);
-                })();
+        if (extraClassNameExpr && useSxProp) {
           extraClassNameAttrs.push(
-            j.jsxAttribute(j.jsxIdentifier("className"), j.jsxExpressionContainer(classNameExpr)),
+            j.jsxAttribute(
+              j.jsxIdentifier("className"),
+              j.jsxExpressionContainer(extraClassNameExpr),
+            ),
           );
         }
 
@@ -935,6 +947,28 @@ function extractJsxAttrValueExpr(
   return undefined;
 }
 
+/**
+ * Builds a single expression from extra className entries (CSS module classes).
+ * Single entry: returns the expression directly.
+ * Multiple entries: joins with a template literal `${a} ${b}`.
+ */
+function buildExtraClassNameExpr(
+  j: TransformContext["j"]["jscodeshift"],
+  extraClassNames: NonNullable<StyledDecl["extraClassNames"]>,
+): ExpressionKind {
+  const exprs = extraClassNames.map((cn) => cn.expr);
+  if (exprs.length === 1 && exprs[0]) {
+    return exprs[0];
+  }
+  const qs: ReturnType<typeof j.templateElement>[] = [];
+  for (let i = 0; i <= exprs.length; i++) {
+    const isLast = i === exprs.length;
+    const raw = i === 0 || isLast ? "" : " ";
+    qs.push(j.templateElement({ raw, cooked: raw }, isLast));
+  }
+  return j.templateLiteral(qs, exprs);
+}
+
 /**
  * Finds the combined style key matching the consumed props at a JSX call site.
  * Returns the style key if a matching combination exists, or undefined otherwise.