feat(css-vars): resolve var() with default value via adapter inside AST nodes

The var() rewriter only walked plain string values in style objects, so var()
calls embedded inside a TemplateLiteral AST node (e.g. inside a styleFn body
like `flexShrink: \`var(--x, ${expr})\``) were never passed to
adapter.resolveValue. When the adapter resolves a var, the default value is now
dropped — the resolved StyleX token supersedes the runtime fallback.

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

Author: cursoragent

src/internal/css-vars.ts

@@ -18,15 +18,21 @@ export function rewriteCssVarsInString(args: {
   return rewriteCssVarsInStringImpl(args);
 }
 
-type VarCall = {
+export function findCssVarCallsInString(raw: string): CssVarCall[] {
+  return findCssVarCalls(raw);
+}
+
+type ExpressionKind = Parameters<JSCodeshift["expressionStatement"]>[0];
+
+type CssVarCall = {
   start: number;
   end: number;
   name: string;
   fallback?: string;
 };
 
-function findCssVarCalls(raw: string): VarCall[] {
-  const out: VarCall[] = [];
+function findCssVarCalls(raw: string): CssVarCall[] {
+  const out: CssVarCall[] = [];
   let i = 0;
   while (i < raw.length) {
     const idx = raw.indexOf("var(", i);
@@ -184,5 +190,3 @@ function rewriteCssVarsInStringImpl(args: {
   quasis.push(j.templateElement({ raw: q, cooked: q }, true));
   return j.templateLiteral(quasis, exprs);
 }
-
-type ExpressionKind = Parameters<JSCodeshift["expressionStatement"]>[0];

src/internal/lower-rules/finalize-decl.ts

@@ -53,6 +53,7 @@ export function finalizeDeclProcessing(ctx: DeclProcessingState): void {
   } = ctx;
   const {
     rewriteCssVarsInStyleObject,
+    rewriteCssVarsInAstNode,
     relationOverridePseudoBuckets,
     relationOverrides,
     ancestorSelectorParents,
@@ -106,6 +107,20 @@ export function finalizeDeclProcessing(ctx: DeclProcessingState): void {
 
   const varsToDrop = new Set<string>();
   rewriteCssVarsInStyleObject(styleObj, localVarValues, varsToDrop);
+  for (const extraObj of extraStyleObjects.values()) {
+    rewriteCssVarsInStyleObject(extraObj, localVarValues, varsToDrop);
+  }
+  for (const variantObj of variantBuckets.values()) {
+    rewriteCssVarsInStyleObject(variantObj, localVarValues, varsToDrop);
+  }
+  // styleFnDecls hold AST nodes (ArrowFunctionExpression bodies). Walking their
+  // template-literal quasis lets us resolve var() calls embedded inside dynamic
+  // style functions (e.g. `flexShrink: \`var(--x, ${expr})\``).
+  for (const fnAst of styleFnDecls.values()) {
+    if (fnAst && typeof fnAst === "object" && isAstNode(fnAst)) {
+      rewriteCssVarsInAstNode(fnAst, localVarValues, varsToDrop);
+    }
+  }
   for (const name of varsToDrop) {
     delete (styleObj as any)[name];
   }

src/internal/lower-rules/state.ts

@@ -45,6 +45,7 @@ export function createLowerRulesState(ctx: TransformContext) {
     keyframesNames,
     parseExpr,
     rewriteCssVarsInStyleObject,
+    rewriteCssVarsInAstNode,
   } = ctx;
   const filePath = file.path;
   const resolveValue = ctx.resolveValueSafe;
@@ -262,6 +263,7 @@ export function createLowerRulesState(ctx: TransformContext) {
     keyframesNames,
     parseExpr,
     rewriteCssVarsInStyleObject,
+    rewriteCssVarsInAstNode,
     resolveValue,
     resolveValueOptional,
     resolveValueDirectional,

src/internal/transform-context.ts

@@ -17,7 +17,10 @@ import { assertValidAdapter } from "./public-api-validation.js";
 import type { WarningLog } from "./logger.js";
 import { parseExpr as parseExprImpl } from "./transform-parse-expr.js";
 import { createResolveAdapterSafe } from "./transform-resolve-value.js";
-import { rewriteCssVarsInStyleObject as rewriteCssVarsInStyleObjectImpl } from "./transform-css-vars.js";
+import {
+  rewriteCssVarsInAstNodeRoot as rewriteCssVarsInAstNodeRootImpl,
+  rewriteCssVarsInStyleObject as rewriteCssVarsInStyleObjectImpl,
+} from "./transform-css-vars.js";
 import {
   getStaticPropertiesFromImport as getStaticPropertiesFromImportImpl,
   patternProp as patternPropImpl,
@@ -53,6 +56,11 @@ export class TransformContext {
     definedVars: Map<string, string>,
     varsToDrop: Set<string>,
   ) => void;
+  rewriteCssVarsInAstNode: (
+    node: { type: string },
+    definedVars: Map<string, string>,
+    varsToDrop: Set<string>,
+  ) => void;
 
   preserveReactImport = false;
   styledImports?: any;
@@ -143,20 +151,37 @@ export class TransformContext {
 
     const parseExpr = (exprSource: string): any => parseExprImpl(api, exprSource);
 
+    const buildCssVarRewriteContext = (
+      definedVars: Map<string, string>,
+      varsToDrop: Set<string>,
+    ) => ({
+      filePath: file.path,
+      definedVars,
+      varsToDrop,
+      resolveValue: resolveValueSafe,
+      addImport: (imp: ImportSpec) => resolverImports.set(JSON.stringify(imp), imp),
+      parseExpr,
+      j,
+    });
+
     const rewriteCssVarsInStyleObject = (
       obj: Record<string, unknown>,
       definedVars: Map<string, string>,
       varsToDrop: Set<string>,
     ): void =>
       rewriteCssVarsInStyleObjectImpl({
         obj,
-        filePath: file.path,
-        definedVars,
-        varsToDrop,
-        resolveValue: resolveValueSafe,
-        addImport: (imp: ImportSpec) => resolverImports.set(JSON.stringify(imp), imp),
-        parseExpr,
-        j,
+        ...buildCssVarRewriteContext(definedVars, varsToDrop),
+      });
+
+    const rewriteCssVarsInAstNode = (
+      node: { type: string },
+      definedVars: Map<string, string>,
+      varsToDrop: Set<string>,
+    ): void =>
+      rewriteCssVarsInAstNodeRootImpl({
+        node,
+        ...buildCssVarRewriteContext(definedVars, varsToDrop),
       });
 
     const patternProp = (keyName: string, valueId?: any) => patternPropImpl(j, keyName, valueId);
@@ -182,6 +207,7 @@ export class TransformContext {
     this.getStaticPropertiesFromImport = getStaticPropertiesFromImport;
     this.parseExpr = parseExpr;
     this.rewriteCssVarsInStyleObject = rewriteCssVarsInStyleObject;
+    this.rewriteCssVarsInAstNode = rewriteCssVarsInAstNode;
     this.styledLocalNames = new Set<string>();
     this.isStyledTag = () => false;
     this.keyframesNames = new Set<string>();