fix: fall back to stylex.props() when sx has no local style refs

The StyleX compiler can only transform the sx prop when it contains
at least one reference to a local stylex.create() result. When all
styles come from external mixin maps (e.g. $colorMixins.backgroundColor[x]),
emit {...stylex.props(...)} instead of sx={...} to ensure styles render.

Fixes visual mismatch in theme-indexedLookup, theme-indexedPropClash,
and import-react storybook rendering.

https://claude.ai/code/session_01EhFJ4W5QixJn7ZLPzMbxPL

Author: claude

src/internal/emit-wrappers/style-merger.ts

@@ -174,8 +174,12 @@ export function emitStyleMerging(args: {
     !staticClassNameExpr
   ) {
     // When useSxProp is enabled, emit sx={expr} instead of {...stylex.props(expr)}
-    // Only valid on intrinsic elements (the StyleX babel plugin only processes lowercase tags)
-    if (emitter.useSxProp && isIntrinsicElement) {
+    // Only valid on intrinsic elements (the StyleX babel plugin only processes lowercase tags).
+    // sx requires at least one local styles.* reference for the compiler to recognize;
+    // fall back to stylex.props() when all styles are external (e.g. mixin map lookups).
+    const sid = emitter.stylesIdentifier;
+    const hasLocalRef = styleArgs.some((a) => j([a]).find(j.Identifier, { name: sid }).size() > 0);
+    if (emitter.useSxProp && isIntrinsicElement && hasLocalRef) {
       const sxExpr =
         styleArgs.length === 1 && styleArgs[0] ? styleArgs[0] : j.arrayExpression(styleArgs);
       return {

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

@@ -783,7 +783,15 @@ export function rewriteJsxStep(ctx: TransformContext): StepResult {
         }
 
         const needsMerge = effectiveClassNameAttr !== null || styleAttr !== null;
-        const useSxProp = ctx.adapter.useSxProp && !needsMerge && isIntrinsicTag;
+        // sx prop requires at least one local stylex.create() reference so the
+        // StyleX compiler can verify and transform it. When all styles are external
+        // (e.g. only extraStylexPropsArgs mixin lookups), fall back to stylex.props().
+        const stylesId = ctx.stylesIdentifier ?? "styles";
+        const hasLocalStyleRef = styleArgs.some(
+          (arg) => j([arg]).find(j.Identifier, { name: stylesId }).size() > 0,
+        );
+        const useSxProp =
+          ctx.adapter.useSxProp && !needsMerge && isIntrinsicTag && hasLocalStyleRef;
         const stylexAttr = useSxProp
           ? (() => {
               const sxExpr =

test-cases/import-react.output.tsx

@@ -34,7 +34,7 @@ export function ThemeSpan(
 ) {
   const { children, variant, ...rest } = props;
   return (
-    <span {...rest} sx={$colorMixins.color[variant]}>
+    <span {...rest} {...stylex.props($colorMixins.color[variant])}>
       {children}
     </span>
   );

test-cases/theme-indexedLookup.output.tsx

@@ -46,7 +46,7 @@ export function TextColor(
 ) {
   const { children, color, ...rest } = props;
   return (
-    <span {...rest} sx={$colorMixins.color[color]}>
+    <span {...rest} {...stylex.props($colorMixins.color[color])}>
       {children}
     </span>
   );

test-cases/theme-indexedPropClash.output.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as stylex from "@stylexjs/stylex";
 import { $colorMixins } from "./lib/colorMixins.stylex";
 
 type Colors = "labelBase" | "labelMuted";
@@ -9,7 +10,7 @@ type DotProps = React.PropsWithChildren<{
 
 function Dot(props: DotProps) {
   const { children, colors } = props;
-  return <div sx={$colorMixins.backgroundColor[colors]}>{children}</div>;
+  return <div {...stylex.props($colorMixins.backgroundColor[colors])}>{children}</div>;
 }
 
 export const App = () => <Dot colors="labelBase">Hello</Dot>;