Support theme member expressions in inline style fallback

The tryBuildThemeBooleanInlineStyleFallback guard required the unresolvable
branch to contain a call expression. This rejected theme member expressions
like theme.baseTheme?.color.X where the adapter can't resolve the path to
a static token. Replace the hasCallExpression check with isFullyTransformedThemeExpr,
which validates that replaceThemeRefsWithHookVar successfully replaced all
param/theme binding references — accepting both call and member expressions.

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

Author: cursoragent

src/__tests__/fixture-adapters.ts

@@ -180,6 +180,12 @@ export const fixtureAdapter = defineAdapter({
         } satisfies ResolveValueDirectionalResult;
       }
 
+      // Nested theme objects (e.g. theme.baseTheme?.color.X) are not resolvable
+      // to static tokens — return undefined so the codemod falls back to runtime.
+      if (ctx.path.startsWith("baseTheme.")) {
+        return undefined;
+      }
+
       // Test fixtures use a small ThemeProvider theme shape:
       //   props.theme.color.labelBase  -> $colors.labelBase
       //   props.theme.color[bg]        -> $colors[bg]

src/internal/builtin-handlers/conditionals.ts

@@ -7,6 +7,7 @@ import {
   type ArrowFnParamBindings,
   type CallExpressionNode,
   cloneAstNode,
+  collectIdentifiers,
   getArrowFnParamBindings,
   getArrowFnSingleParamName,
   getFunctionBodyExpr,
@@ -1646,17 +1647,18 @@ function tryBuildThemeBooleanInlineStyleFallback(args: {
   const resolvedBranchIsTrue = trueValue !== null;
   const unresolvableBranch = resolvedBranchIsTrue ? falseBranch : trueBranch;
 
-  // The unresolvable branch must contain a call expression (theme helper call)
-  if (!hasCallExpression(unresolvableBranch)) {
-    return null;
-  }
-
   // Transform the unresolvable branch: replace props.theme.* / <param>.theme.* with theme.*
   const transformed = replaceThemeRefsWithHookVar(unresolvableBranch, paramName, info);
   if (!transformed) {
     return null;
   }
 
+  // Verify the transformation replaced all param/theme binding references.
+  // Dangling references (e.g. non-theme prop accesses) would produce undefined variables at runtime.
+  if (!isFullyTransformedThemeExpr(transformed, paramName, info)) {
+    return null;
+  }
+
   return {
     type: "splitThemeBooleanWithInlineStyleFallback",
     cssProp,
@@ -1669,25 +1671,28 @@ function tryBuildThemeBooleanInlineStyleFallback(args: {
   };
 }
 
-/** Check if an expression tree contains any call expressions. */
-function hasCallExpression(node: unknown): boolean {
-  if (!node || typeof node !== "object") {
+/**
+ * Validates that a transformed expression has no dangling references to
+ * the original arrow function parameter or theme binding name.
+ * After `replaceThemeRefsWithHookVar`, all `<paramName>.theme.*` should
+ * have been rewritten to `theme.*`. If the param name still appears,
+ * the expression accesses non-theme props and can't be safely used
+ * with `useTheme()` alone.
+ */
+function isFullyTransformedThemeExpr(
+  transformed: unknown,
+  paramName: string | null,
+  info: ThemeParamInfo | null,
+): boolean {
+  const ids = new Set<string>();
+  collectIdentifiers(transformed, ids);
+  if (paramName && ids.has(paramName)) {
     return false;
   }
-  const n = node as { type?: string };
-  if (n.type === "CallExpression") {
-    return true;
-  }
-  for (const key of Object.keys(n)) {
-    if (key === "loc" || key === "comments") {
-      continue;
-    }
-    const child = (n as Record<string, unknown>)[key];
-    if (child && typeof child === "object" && hasCallExpression(child)) {
-      return true;
-    }
+  if (info?.kind === "themeBinding" && info.themeName !== "theme" && ids.has(info.themeName)) {
+    return false;
   }
-  return false;
+  return true;
 }
 
 /**

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

@@ -1049,7 +1049,7 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
       continue;
     }
 
-    // Handle theme boolean conditional with one unresolvable call expression branch.
+    // Handle theme boolean conditional with one unresolvable branch (call or member expression).
     // The resolved branch becomes the base StyleX style; the unresolvable branch
     // is emitted as a conditional inline style using the useTheme() hook.
     if (res && res.type === "splitThemeBooleanWithInlineStyleFallback") {

test-cases/theme-conditionalInlineStyle.input.tsx

@@ -9,8 +9,17 @@ export const Chip = styled.div`
       : props.theme.color.bgFocus};
 `;
 
+// CSS custom property with one unresolvable theme member expression branch
+const DayPicker = styled.div`
+  --highlighted-color: ${(p) =>
+    p.theme.isDark ? p.theme.baseTheme?.color.bgBorderSolid : p.theme.color.bgBorderFaint};
+  background-color: var(--highlighted-color);
+  padding: 16px;
+`;
+
 export const App = () => (
   <div style={{ display: "flex", gap: 16, padding: 16 }}>
     <Chip>Default</Chip>
+    <DayPicker>DayPicker</DayPicker>
   </div>
 );

test-cases/theme-conditionalInlineStyle.output.tsx

@@ -22,9 +22,30 @@ export function Chip(props: Pick<React.ComponentProps<"div">, "ref" | "children"
   );
 }
 
+// CSS custom property with one unresolvable theme member expression branch
+function DayPicker(props: React.PropsWithChildren<{}>) {
+  const theme = useTheme();
+  const sx = stylex.props(styles.dayPicker);
+
+  return (
+    <div
+      {...sx}
+      style={
+        {
+          ...sx.style,
+          "--highlighted-color": theme.isDark ? theme.baseTheme?.color.bgBorderSolid : undefined,
+        } as React.CSSProperties
+      }
+    >
+      {props.children}
+    </div>
+  );
+}
+
 export const App = () => (
   <div style={{ display: "flex", gap: 16, padding: 16 }}>
     <Chip>Default</Chip>
+    <DayPicker>DayPicker</DayPicker>
   </div>
 );
 
@@ -34,4 +55,9 @@ const styles = stylex.create({
     paddingInline: 16,
     backgroundColor: $colors.bgFocus,
   },
+  dayPicker: {
+    "--highlighted-color": $colors.bgBorderFaint,
+    backgroundColor: "var(--highlighted-color)",
+    padding: 16,
+  },
 });

test-cases/tokens.stylex.ts

@@ -54,6 +54,11 @@ export const testCaseTheme = {
     textSecondary: "#6B7280",
     primaryColor: "#BF4F74",
   },
+  baseTheme: {
+    color: {
+      bgBorderSolid: "#94A3B8",
+    },
+  },
   highlightVariant,
   primary: "#BF4F74",
   secondary: "#4F74BF",