fix: keep theme bail in module-scoped style function paths

Address review comments: theme-rewritten expressions (theme.X from
useTheme()) cannot be placed in module-scoped stylex.create() style
functions since the theme variable is only available in the wrapper
component body.

- Restore bail in pseudo/media path of inline-style-props.ts where
  the value expression goes into styleFnDecls (module scope)
- Restore bail in shouldForwardProp path of rule-interpolated-declaration.ts
  where the expression also goes into module-scoped style functions
- Add regression tests for both scenarios
- The non-pseudo/non-media path remains fixed: theme expressions go into
  callArg (component scope) where useTheme() is available

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>

Author: cursoragent

src/__tests__/transform.test.ts

@@ -3597,6 +3597,54 @@ export const App = () => <Box isActive>Hello</Box>;
     expect(result.code).toContain("theme.isDark");
   });
 
+  it("should bail on theme access inside pseudo/media context (module-scoped style fn)", () => {
+    // Theme-rewritten expressions can't be placed in module-scoped stylex.create functions.
+    // The `theme` variable from useTheme() is only available in the wrapper component body.
+    const source = `
+import styled from "styled-components";
+
+const Box = styled.div\`
+  &:hover {
+    color: \${(props) => props.theme.isDark && props.$isActive ? "red" : "blue"};
+  }
+\`;
+
+export const App = () => <Box $isActive>Hello</Box>;
+`;
+
+    const result = transformWithWarnings(
+      { source, path: "theme-pseudo-scope.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: fixtureAdapter },
+    );
+
+    // Should bail because theme access in pseudo/media context would put
+    // the expression in a module-scoped stylex.create() style function
+    expect(result.code).toBeNull();
+  });
+
+  it("should bail on theme access in shouldForwardProp context (module-scoped style fn)", () => {
+    const source = `
+import styled from "styled-components";
+
+const Box = styled.div\`
+  width: \${(props) => props.theme.size * 2}px;
+\`.withConfig({ shouldForwardProp: (p) => p !== "size" });
+
+export const App = () => <Box>Hello</Box>;
+`;
+
+    const result = transformWithWarnings(
+      { source, path: "theme-sfp-scope.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: fixtureAdapter },
+    );
+
+    // Should bail because theme access in shouldForwardProp context would put
+    // the expression in a module-scoped stylex.create() style function
+    expect(result.code).toBeNull();
+  });
+
   it("should not treat closure variables as destructured props in theme conditionals", () => {
     // When the arrow param is ({ theme }) and the test is `closureVar`,
     // closureVar is NOT a destructured prop — it comes from outer scope.

src/internal/lower-rules/inline-style-props.ts

@@ -112,8 +112,9 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
         );
       }
       const valueExprRaw = (() => {
-        const hasThemeAccess = hasThemeAccessInArrowFn(e);
-        if (hasThemeAccess && !hasSimpleIdentifierParam(e)) {
+        // Pseudo/media style functions are module-scoped in stylex.create(),
+        // so runtime theme values from useTheme() are not available there.
+        if (hasThemeAccessInArrowFn(e)) {
           warnPropInlineStyle(
             decl,
             "Unsupported prop-based inline style props.theme access is not supported",
@@ -134,14 +135,10 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
           setBail();
           return null;
         }
-        const baseExpr = hasThemeAccess ? rewritePropsThemeToThemeVar(inlineExpr) : inlineExpr;
-        if (hasThemeAccess) {
-          markDeclNeedsUseThemeHook(decl);
-        }
         const { prefix, suffix } = extractStaticPartsForDecl(d);
         return prefix || suffix
-          ? buildTemplateWithStaticParts(j, baseExpr, prefix, suffix)
-          : baseExpr;
+          ? buildTemplateWithStaticParts(j, inlineExpr, prefix, suffix)
+          : inlineExpr;
       })();
       if (!valueExprRaw) {
         return true;

src/internal/lower-rules/rule-interpolated-declaration.ts

@@ -1964,8 +1964,9 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
             bail = true;
             break;
           }
-          const hasThemeAccess = hasThemeAccessInArrowFn(e);
-          if (hasThemeAccess && e.params?.[0]?.type !== "Identifier") {
+          // shouldForwardProp style functions are module-scoped in stylex.create(),
+          // so runtime theme values from useTheme() are not available there.
+          if (hasThemeAccessInArrowFn(e)) {
             warnPropInlineStyle(
               decl,
               "Unsupported prop-based inline style props.theme access is not supported",
@@ -1977,16 +1978,12 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
           }
           const propsUsed = collectPropsFromArrowFn(e);
           for (const propName of propsUsed) {
-            if (hasThemeAccess && propName === "theme") {
-              continue;
-            }
             ensureShouldForwardPropDrop(decl, propName);
           }
           // Try to unwrap props access (props.$x → $x) for cleaner style functions.
           // When only one transient prop is used, emit a single-param function
           // (e.g., ($size) => ...) instead of (props) => ..., enabling consolidation.
-          // Skip unwrapping when theme is accessed — theme refs need full inlining + rewriting.
-          const unwrapped = hasThemeAccess ? null : unwrapArrowFunctionToPropsExpr(j, e);
+          const unwrapped = unwrapArrowFunctionToPropsExpr(j, e);
           if (unwrapped && unwrapped.propsUsed.size === 1) {
             const singleProp = [...unwrapped.propsUsed][0]!;
             propsParam = j.identifier(singleProp);
@@ -2007,12 +2004,7 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
               bail = true;
               break;
             }
-            baseExpr = hasThemeAccess
-              ? rewritePropsThemeToThemeVar(inlineExpr as ExpressionKind)
-              : inlineExpr;
-            if (hasThemeAccess) {
-              markDeclNeedsUseThemeHook(decl);
-            }
+            baseExpr = inlineExpr;
           }
         }
         // Build template literal when there's static prefix/suffix (e.g., `${...}ms`)