Support prop-based inline style theme access via useTheme() rewriting

cursoragent · skovhus · cursoragent · commit 9b0049bc1a09 · 2026-03-13T20:08:58.000Z
When an interpolation accesses props.theme in a conditional expression
that the adapter cannot resolve statically, the codemod now rewrites
props.theme to theme (from useTheme() hook) and emits it as an inline
style, instead of bailing with 'Unsupported prop-based inline style
props.theme access is not supported'.

This supports patterns like:
  border-left: ${props =&gt;
    props.$isHighlighted ? `2px solid ${props.theme.color.x}` : '2px solid transparent'};

The fix applies to arrow functions with a simple Identifier parameter
(e.g., (props) =&gt; ...). Destructured ObjectPattern parameters
(e.g., ({ theme }) =&gt; ...) retain the existing bail behavior to avoid
closure variable confusion.

Changes:
- inline-style-props.ts: Rewrite props.theme to theme and mark
  needsUseThemeHook instead of bailing (both pseudo/media and base paths)
- rule-interpolated-declaration.ts: Redirect emitStyleFunctionFromPropsObject
  with theme access to inline styles; handle shouldForwardProp path similarly
- Filter 'theme' from collected props to avoid marking it as a forwarded prop

Co-authored-by: Kenneth Skovhus &lt;skovhus@users.noreply.github.com&gt;
diff --git a/src/__tests__/transform.test.ts b/src/__tests__/transform.test.ts
@@ -3573,8 +3573,7 @@ export const App = () => <Box>Hello</Box>;
     `);
   });
 
-  it("should bail on complex conditions combining theme boolean with other expressions", () => {
-    // This tests that we bail when the condition is more complex than just theme.prop
+  it("should handle complex conditions combining theme boolean with prop access as inline style", () => {
     const source = `
 import styled from "styled-components";
 
@@ -3591,24 +3590,11 @@ export const App = () => <Box isActive>Hello</Box>;
       { adapter: fixtureAdapter },
     );
 
-    // Should bail out - complex conditions are not supported
-    expect(result.code).toBeNull();
-    expect(result.warnings).toMatchInlineSnapshot(`
-      [
-        {
-          "context": {
-            "localName": "Box",
-            "propLabel": "color",
-          },
-          "loc": {
-            "column": 11,
-            "line": 5,
-          },
-          "severity": "warning",
-          "type": "Unsupported prop-based inline style props.theme access is not supported",
-        },
-      ]
-    `);
+    // Now handled via inline style with useTheme() hook
+    expect(result.code).not.toBeNull();
+    expect(result.warnings).toEqual([]);
+    expect(result.code).toContain("useTheme");
+    expect(result.code).toContain("theme.isDark");
   });
 
   it("should not treat closure variables as destructured props in theme conditionals", () => {
diff --git a/src/internal/lower-rules/inline-style-props.ts b/src/internal/lower-rules/inline-style-props.ts
@@ -14,6 +14,7 @@ import {
   hasThemeAccessInArrowFn,
   hasUnsupportedConditionalTest,
   inlineArrowFunctionBody,
+  rewritePropsThemeToThemeVar,
   unwrapArrowFunctionToPropsExpr,
 } from "./inline-styles.js";
 import { buildPseudoMediaPropValue } from "./variant-utils.js";
@@ -111,7 +112,8 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
         );
       }
       const valueExprRaw = (() => {
-        if (hasThemeAccessInArrowFn(e)) {
+        const hasThemeAccess = hasThemeAccessInArrowFn(e);
+        if (hasThemeAccess && !hasSimpleIdentifierParam(e)) {
           warnPropInlineStyle(
             decl,
             "Unsupported prop-based inline style props.theme access is not supported",
@@ -132,7 +134,10 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
           setBail();
           return null;
         }
-        const baseExpr = inlineExpr;
+        const baseExpr = hasThemeAccess ? rewritePropsThemeToThemeVar(inlineExpr) : inlineExpr;
+        if (hasThemeAccess) {
+          markDeclNeedsUseThemeHook(decl);
+        }
         const { prefix, suffix } = extractStaticPartsForDecl(d);
         return prefix || suffix
           ? buildTemplateWithStaticParts(j, baseExpr, prefix, suffix)
@@ -185,11 +190,8 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
       });
       return bailNow();
     }
-    const propsUsed = collectPropsFromArrowFn(e);
-    for (const propName of propsUsed) {
-      ensureShouldForwardPropDrop(decl, propName);
-    }
-    if (hasThemeAccessInArrowFn(e)) {
+    const hasThemeAccess = hasThemeAccessInArrowFn(e);
+    if (hasThemeAccess && !hasSimpleIdentifierParam(e)) {
       warnPropInlineStyle(
         decl,
         "Unsupported prop-based inline style props.theme access is not supported",
@@ -198,7 +200,14 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
       );
       return bailNow();
     }
-    const unwrapped = unwrapArrowFunctionToPropsExpr(j, e);
+    const propsUsed = collectPropsFromArrowFn(e);
+    for (const propName of propsUsed) {
+      if (hasThemeAccess && propName === "theme") {
+        continue;
+      }
+      ensureShouldForwardPropDrop(decl, propName);
+    }
+    const unwrapped = hasThemeAccess ? null : unwrapArrowFunctionToPropsExpr(j, e);
     const inlineExpr = unwrapped?.expr ?? inlineArrowFunctionBody(j, e);
     if (!inlineExpr) {
       warnPropInlineStyle(
@@ -210,7 +219,10 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
       return bailNow();
     }
     decl.needsWrapperComponent = true;
-    const baseExpr = inlineExpr;
+    const baseExpr = hasThemeAccess ? rewritePropsThemeToThemeVar(inlineExpr) : inlineExpr;
+    if (hasThemeAccess) {
+      markDeclNeedsUseThemeHook(decl);
+    }
     // Build template literal when there's static prefix/suffix (e.g., `${...}ms`)
     const { prefix, suffix } = extractStaticPartsForDecl(d);
     const valueExpr =
@@ -348,3 +360,23 @@ export function handleInlineStyleValueFromProps(ctx: InlineStyleFromPropsContext
 
   return true;
 }
+
+// --- Non-exported helpers ---
+
+function hasSimpleIdentifierParam(expr: { params?: Array<{ type?: string }> }): boolean {
+  return expr.params?.length === 1 && expr.params[0]?.type === "Identifier";
+}
+
+function markDeclNeedsUseThemeHook(decl: StyledDecl): void {
+  if (!decl.needsUseThemeHook) {
+    decl.needsUseThemeHook = [];
+  }
+  if (!decl.needsUseThemeHook.some((entry) => entry.themeProp === "__runtimeCall")) {
+    decl.needsUseThemeHook.push({
+      themeProp: "__runtimeCall",
+      trueStyleKey: null,
+      falseStyleKey: null,
+    });
+  }
+  decl.needsWrapperComponent = true;
+}
diff --git a/src/internal/lower-rules/rule-interpolated-declaration.ts b/src/internal/lower-rules/rule-interpolated-declaration.ts
@@ -1583,14 +1583,39 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
           break;
         }
         if (hasThemeAccessInArrowFn(e)) {
-          warnPropInlineStyle(
-            decl,
-            "Unsupported prop-based inline style props.theme access is not supported",
-            d.property,
-            loc,
-          );
-          bail = true;
-          break;
+          // StyleX style functions can't use runtime theme values.
+          // Redirect to inline styles with useTheme() hook instead.
+          const inlinedExpr = inlineArrowFunctionBody(j, e);
+          if (!inlinedExpr) {
+            warnPropInlineStyle(
+              decl,
+              "Unsupported prop-based inline style expression cannot be safely inlined",
+              d.property,
+              loc,
+            );
+            bail = true;
+            break;
+          }
+          const themeRewritten = rewritePropsThemeToThemeVar(inlinedExpr as ExpressionKind);
+          const { prefix, suffix } = extractStaticPartsForDecl(d);
+          const valueExpr =
+            prefix || suffix
+              ? buildTemplateWithStaticParts(j, themeRewritten, prefix, suffix)
+              : themeRewritten;
+          markDeclNeedsUseThemeHook(decl);
+          for (const propName of res.props ?? []) {
+            if (propName === "theme") {
+              continue;
+            }
+            ensureShouldForwardPropDrop(decl, propName);
+          }
+          for (const out of cssDeclarationToStylexDeclarations(d)) {
+            if (!out.prop) {
+              continue;
+            }
+            inlineStyleProps.push({ prop: out.prop, expr: valueExpr });
+          }
+          continue;
         }
         const bodyExpr = getFunctionBodyExpr(e);
         if (!bodyExpr) {
@@ -1944,7 +1969,8 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
             bail = true;
             break;
           }
-          if (hasThemeAccessInArrowFn(e)) {
+          const hasThemeAccess = hasThemeAccessInArrowFn(e);
+          if (hasThemeAccess && e.params?.[0]?.type !== "Identifier") {
             warnPropInlineStyle(
               decl,
               "Unsupported prop-based inline style props.theme access is not supported",
@@ -1956,12 +1982,16 @@ 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.
-          const unwrapped = unwrapArrowFunctionToPropsExpr(j, e);
+          // Skip unwrapping when theme is accessed — theme refs need full inlining + rewriting.
+          const unwrapped = hasThemeAccess ? null : unwrapArrowFunctionToPropsExpr(j, e);
           if (unwrapped && unwrapped.propsUsed.size === 1) {
             const singleProp = [...unwrapped.propsUsed][0]!;
             propsParam = j.identifier(singleProp);
@@ -1982,7 +2012,12 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
               bail = true;
               break;
             }
-            baseExpr = inlineExpr;
+            baseExpr = hasThemeAccess
+              ? rewritePropsThemeToThemeVar(inlineExpr as ExpressionKind)
+              : inlineExpr;
+            if (hasThemeAccess) {
+              markDeclNeedsUseThemeHook(decl);
+            }
           }
         }
         // Build template literal when there's static prefix/suffix (e.g., `${...}ms`)
@@ -2769,6 +2804,20 @@ function tryHandleMultiSlotTernary(ctx: DeclProcessingState, d: CssDeclarationIR
   return true;
 }
 
+function markDeclNeedsUseThemeHook(decl: StyledDecl): void {
+  if (!decl.needsUseThemeHook) {
+    decl.needsUseThemeHook = [];
+  }
+  if (!decl.needsUseThemeHook.some((entry) => entry.themeProp === "__runtimeCall")) {
+    decl.needsUseThemeHook.push({
+      themeProp: "__runtimeCall",
+      trueStyleKey: null,
+      falseStyleKey: null,
+    });
+  }
+  decl.needsWrapperComponent = true;
+}
+
 /** CSS shorthand properties that cannot be represented as a single var() custom property. */
 const UNSUPPORTED_CUSTOM_PROP_SHORTHANDS = new Set([
   "border",
