Resolve CSS variable fallbacks via adapter

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

Author: cursoragent

src/__tests__/transform.test.ts

@@ -5778,6 +5778,52 @@ export const App = () => (
 });
 
 describe("var() rewriter — adapter contract", () => {
+  it("should retry adapter resolution without fallback and drop the CSS var default when resolved", () => {
+    const source = `
+import styled from "styled-components";
+
+const Container = styled.div\`
+  border-radius: var(--control-border-radius, 4px);
+\`;
+
+export const App = () => <Container>content</Container>;
+`;
+
+    const seenFallbacks: Array<string | undefined> = [];
+    const noFallbackAdapter = {
+      ...fixtureAdapter,
+      resolveValue(ctx: ResolveValueContext) {
+        if (ctx.kind === "cssVariable" && ctx.name === "--control-border-radius") {
+          seenFallbacks.push(ctx.fallback);
+          if (ctx.fallback) {
+            return undefined;
+          }
+          return {
+            expr: "vars.controlBorderRadius",
+            imports: [
+              {
+                from: { kind: "specifier" as const, value: "./vars.stylex" },
+                names: [{ imported: "vars" }],
+              },
+            ],
+          };
+        }
+        return fixtureAdapter.resolveValue(ctx);
+      },
+    } satisfies Adapter;
+
+    const result = transformWithWarnings(
+      { source, path: "test.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: noFallbackAdapter },
+    );
+
+    expect(result.code).not.toBeNull();
+    expect(seenFallbacks).toEqual(["4px", undefined]);
+    expect(result.code).toContain("borderRadius: vars.controlBorderRadius");
+    expect(result.code).not.toContain("var(--control-border-radius, 4px)");
+  });
+
   it("should not pass placeholder sentinels to adapter when var() default contains a dynamic interpolation", () => {
     const source = `
 import styled from "styled-components";

src/internal/css-vars.ts

@@ -5,6 +5,13 @@
 import type { JSCodeshift } from "jscodeshift";
 import type { ImportSpec, ResolveValueContext, ResolveValueResult } from "../adapter.js";
 
+export type CssVarCall = {
+  start: number;
+  end: number;
+  name: string;
+  fallback?: string;
+};
+
 export function rewriteCssVarsInString(args: {
   raw: string;
   filePath: string;
@@ -22,14 +29,32 @@ export function findCssVarCallsInString(raw: string): CssVarCall[] {
   return findCssVarCalls(raw);
 }
 
-type ExpressionKind = Parameters<JSCodeshift["expressionStatement"]>[0];
+export function resolveCssVarCall(args: {
+  call: CssVarCall;
+  definedValue?: string;
+  filePath: string;
+  resolveValue: (ctx: ResolveValueContext) => ResolveValueResult | undefined;
+}): ResolveValueResult | undefined {
+  const { call, definedValue, filePath, resolveValue } = args;
+  const baseContext = {
+    kind: "cssVariable" as const,
+    name: call.name,
+    filePath,
+    ...(definedValue ? { definedValue } : {}),
+  };
+  const result = resolveValue({
+    ...baseContext,
+    ...(call.fallback ? { fallback: call.fallback } : {}),
+  });
+  // Adapter-backed variables supersede CSS defaults. Some adapters only recognize the
+  // canonical variable name, so retry without the fallback before preserving raw var().
+  if (result || !call.fallback) {
+    return result;
+  }
+  return resolveValue(baseContext);
+}
 
-type CssVarCall = {
-  start: number;
-  end: number;
-  name: string;
-  fallback?: string;
-};
+type ExpressionKind = Parameters<JSCodeshift["expressionStatement"]>[0];
 
 function findCssVarCalls(raw: string): CssVarCall[] {
   const out: CssVarCall[] = [];
@@ -122,13 +147,11 @@ function rewriteCssVarsInStringImpl(args: {
     if (c.start > last) {
       segments.push({ kind: "text", value: raw.slice(last, c.start) });
     }
-    const definedValue = definedVars.get(c.name);
-    const res = resolveValue({
-      kind: "cssVariable",
-      name: c.name,
+    const res = resolveCssVarCall({
+      call: c,
+      definedValue: definedVars.get(c.name),
       filePath,
-      ...(c.fallback ? { fallback: c.fallback } : {}),
-      ...(definedValue ? { definedValue } : {}),
+      resolveValue,
     });
     if (!res) {
       segments.push({ kind: "text", value: raw.slice(c.start, c.end) });

src/internal/transform-css-vars.ts

@@ -4,7 +4,7 @@
  */
 import type { JSCodeshift } from "jscodeshift";
 import type { ImportSpec, ResolveValueContext, ResolveValueResult } from "../adapter.js";
-import { findCssVarCallsInString, rewriteCssVarsInString } from "./css-vars.js";
+import { findCssVarCallsInString, resolveCssVarCall, rewriteCssVarsInString } from "./css-vars.js";
 import { isAstNode } from "./utilities/jscodeshift-utils.js";
 
 export function rewriteCssVarsInStyleObject(
@@ -204,20 +204,23 @@ function rewriteCssVarsInTemplateLiteral(
   const replacements: Replacement[] = [];
 
   for (const call of calls) {
-    const definedValue = ctx.definedVars.get(call.name);
     // Strip placeholder sentinels from the fallback before forwarding to the adapter so
     // adapter logic that inspects `ctx.fallback` (validation, parsing, expression generation)
     // never sees synthetic interpolation markers. When the fallback consists entirely of
     // placeholders/whitespace, omit it altogether.
     const cleanedFallback = call.fallback
       ? call.fallback.replace(placeholderPattern, "").trim().replace(/,\s*$/, "")
       : undefined;
-    const res = ctx.resolveValue({
-      kind: "cssVariable",
-      name: call.name,
+    const res = resolveCssVarCall({
+      call: {
+        start: call.start,
+        end: call.end,
+        name: call.name,
+        ...(cleanedFallback ? { fallback: cleanedFallback } : {}),
+      },
+      definedValue: ctx.definedVars.get(call.name),
       filePath: ctx.filePath,
-      ...(cleanedFallback ? { fallback: cleanedFallback } : {}),
-      ...(definedValue ? { definedValue } : {}),
+      resolveValue: ctx.resolveValue,
     });
     if (!res) {
       continue;