Merge remote-tracking branch 'origin/main' into claude/partial-file-transforms-7NcMb

Author: claude

scripts/verify-storybook-rendering.mts

@@ -58,6 +58,7 @@ const FLAKINESS_EXPECTED = new Set<string>([
   "keyframes-interpolatedDurationWithDelay",
   "keyframes-multiAnimationInterpolatedDuration",
   "keyframes-unionComplexity",
+  "cssVariable-animationShorthand",
 ]);
 
 // Case-specific pixelmatch threshold overrides for known anti-aliasing noise.

src/__tests__/transform.test.ts

@@ -2659,9 +2659,9 @@ export const App = () => <Box>Hello</Box>;
 });
 
 describe("conditional value handling", () => {
-  it("should bail when a boolean literal is used as a CSS value in conditional expression", () => {
+  it("emits a positive-only variant when alternate is `false` (omit-declaration sentinel)", () => {
     // In styled-components, falsy interpolations like `false` mean "omit this declaration".
-    // We should bail rather than producing invalid CSS like `cursor: "false"`.
+    // We model this as a single positive variant bucket — equivalent to `$disabled && "not-allowed"`.
     const source = `
 import styled from "styled-components";
 
@@ -2678,7 +2678,38 @@ export const App = () => <Button $disabled>Click</Button>;
       { adapter: fixtureAdapter },
     );
 
-    expect(result.code).toBeNull();
+    expect(result.code).not.toBeNull();
+    expect(result.code).toContain('cursor: "not-allowed"');
+    expect(result.code).not.toContain('cursor: "false"');
+    expect(result.code).not.toContain("cursor: false");
+  });
+
+  it("does not unconditionally apply the alternate when consequent is `undefined`", () => {
+    // `prop ? undefined : value` must NOT be lowered to a single `!prop`
+    // variant via splitVariantsResolved* — that path treats `!`-prefixed
+    // `when` strings as the unconditional default and would silently drop
+    // the gate. Falling back to a dynamic style function is the safe choice.
+    const source = `
+import styled from "styled-components";
+
+const Button = styled.button<{ $disabled?: boolean }>\`
+  cursor: \${(p) => (p.$disabled ? undefined : "pointer")};
+\`;
+
+export const App = () => <Button>Click</Button>;
+`;
+
+    const result = transformWithWarnings(
+      { source, path: "negative-only-variant.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: fixtureAdapter },
+    );
+
+    expect(result.code).not.toBeNull();
+    // Guard against the regression where the value bleeds into an unconditional
+    // base style rule (which would set cursor: "pointer" for ALL <Button> uses,
+    // including when $disabled is true).
+    expect(result.code).not.toMatch(/cursor:\s*"pointer"\s*[,}]/);
   });
 
   it("should bail when true is used as a CSS value in conditional expression", () => {
@@ -6187,3 +6218,101 @@ export const App = () => (
     expect(result.code).toContain("stylex.when.descendant");
   });
 });
+
+describe("var() rewriter — adapter contract", () => {
+  it("should not pass placeholder sentinels to adapter when var() default contains a dynamic interpolation", () => {
+    const source = `
+import styled from "styled-components";
+
+const Box = styled.div<{ $tone: string }>\`
+  width: \${(props) => \`var(--known-var, \${props.$tone})\`};
+\`;
+
+export const App = () => <Box $tone="red">x</Box>;
+`;
+
+    const fallbacksSeen: Array<string | undefined> = [];
+    const recordingAdapter = {
+      ...fixtureAdapter,
+      resolveValue(ctx: ResolveValueContext) {
+        if (ctx.kind === "cssVariable" && ctx.name === "--known-var") {
+          fallbacksSeen.push(ctx.fallback);
+          return {
+            expr: "vars.knownVar",
+            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: recordingAdapter },
+    );
+
+    expect(result.code).not.toBeNull();
+    expect(fallbacksSeen.length).toBeGreaterThan(0);
+    for (const fallback of fallbacksSeen) {
+      // Adapter must never receive synthetic interpolation markers as fallback text;
+      // it would mis-parse them as part of the user's CSS fallback content.
+      expect(fallback ?? "").not.toMatch(/__SC_TPL_EXPR_/);
+      expect(fallback ?? "").not.toContain("\u0000");
+    }
+  });
+
+  it("should drop --name definition from variant buckets when adapter returns dropDefinition: true", () => {
+    const source = `
+import styled from "styled-components";
+
+const Box = styled.div<{ $active?: boolean }>\`
+  color: var(--variant-color);
+  \${(props) => (props.$active ? "--variant-color: red;" : "")}
+\`;
+
+export const App = () => (
+  <div>
+    <Box>off</Box>
+    <Box $active>on</Box>
+  </div>
+);
+`;
+
+    const droppingAdapter = {
+      ...fixtureAdapter,
+      resolveValue(ctx: ResolveValueContext) {
+        if (ctx.kind === "cssVariable" && ctx.name === "--variant-color") {
+          return {
+            expr: "vars.variantColor",
+            imports: [
+              {
+                from: { kind: "specifier" as const, value: "./vars.stylex" },
+                names: [{ imported: "vars" }],
+              },
+            ],
+            dropDefinition: true,
+          };
+        }
+        return fixtureAdapter.resolveValue(ctx);
+      },
+    } satisfies Adapter;
+
+    const result = transformWithWarnings(
+      { source, path: "test.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: droppingAdapter },
+    );
+
+    expect(result.code).not.toBeNull();
+    // The original `--variant-color: red` definition lived inside the active-variant
+    // bucket. With dropDefinition: true the codemod must remove it from every bucket
+    // that holds the local definition, not just the base styleObj.
+    expect(result.code).not.toContain("--variant-color");
+  });
+});

src/internal/builtin-handlers/conditionals.ts

@@ -452,6 +452,37 @@ export function tryResolveConditionalValue(
     return branchToExpr(value);
   };
 
+  // Convert `prop ? value : undefined/null/false/""` into a positive-only
+  // `splitVariantsResolved*` result (one variant bucket gated on `prop`).
+  // Returns null when both branches resolve, or when the alternate isn't an
+  // empty CSS sentinel — the caller continues with two-side handling or falls
+  // back to a dynamic style function.
+  //
+  // We intentionally do NOT handle the inverse `prop ? undefined : value`
+  // here: `splitVariantsResolved*` treats variants whose `when` starts with
+  // `!` as the unconditional default (applied directly to `styleObj`), so
+  // emitting a single negated variant would silently drop the `!prop` gate
+  // and apply the value unconditionally. Inverse forms continue to be lowered
+  // by the dynamic style-function fallback, which is correct (just less
+  // optimal).
+  const buildOneSidedVariantResult = (args: {
+    cons: Branch;
+    alt: Branch;
+    alternate: unknown;
+    truthyWhen: string;
+  }): HandlerResult | null => {
+    const { cons, alt, alternate, truthyWhen } = args;
+    if (!cons || alt || !isEmptyCssBranch(alternate)) {
+      return null;
+    }
+    const variants = [
+      { nameHint: "truthy" as const, when: truthyWhen, expr: cons.expr, imports: cons.imports },
+    ];
+    return cons.usage === "props"
+      ? { type: "splitVariantsResolvedStyles", variants }
+      : { type: "splitVariantsResolvedValue", variants };
+  };
+
   // Helper: resolve a 4-branch compound ternary once both the outer prop and inner prop
   // have been identified. Returns null if leaf branches can't all be resolved as "create".
   const tryBuildDualBranchResult = (outerProp: string, innerProp: string): HandlerResult | null => {
@@ -739,6 +770,21 @@ export function tryResolveConditionalValue(
       }
     }
 
+    // Positive-only variant for `prop ? value : undefined/null/false/""` —
+    // styled-components treats falsy interpolations as "omit this declaration",
+    // so model it as a single-side variant bucket rather than emitting a
+    // dynamic style function (which would clash with pseudo overrides on the
+    // same property elsewhere in the rule).
+    const oneSided = buildOneSidedVariantResult({
+      cons,
+      alt,
+      alternate,
+      truthyWhen: outerProp,
+    });
+    if (oneSided) {
+      return oneSided;
+    }
+
     if (!cons || !alt) {
       return buildRuntimeCallResult();
     }
@@ -792,6 +838,15 @@ export function tryResolveConditionalValue(
           : { type: "splitVariantsResolvedValue", variants };
       }
     }
+    const oneSided = buildOneSidedVariantResult({
+      cons,
+      alt,
+      alternate,
+      truthyWhen: destructuredProp,
+    });
+    if (oneSided) {
+      return oneSided;
+    }
     if (!cons || !alt) {
       return buildRuntimeCallResult();
     }
@@ -841,6 +896,15 @@ export function tryResolveConditionalValue(
         }
       }
 
+      const oneSided = buildOneSidedVariantResult({
+        cons,
+        alt,
+        alternate,
+        truthyWhen: resolvedProp,
+      });
+      if (oneSided) {
+        return oneSided;
+      }
       if (!cons || !alt) {
         return buildRuntimeCallResult();
       }

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/keyframes.ts

@@ -488,9 +488,13 @@ export function expandStaticAnimationShorthand(
   const jsName = nameMap?.get(cssName) ?? cssKeyframeNameToIdentifier(cssName);
   const remaining = tokens.filter((_, i) => i !== nameIdx);
 
+  const classified = classifyAnimationTokens(remaining);
+  if (!classified) {
+    return false;
+  }
+
   styleObj.animationName = j.identifier(jsName);
 
-  const classified = classifyAnimationTokens(remaining);
   if (classified.duration) {
     styleObj.animationDuration = classified.duration;
   }

src/internal/logger.ts

@@ -111,7 +111,8 @@ export type WarningType =
   | "styled(ImportedComponent) wraps a component whose file contains internal styled-components — convert the base component's file first to avoid CSS cascade conflicts"
   | "Partial transform would have a StyleX leaf wrap a styled-components base — the extending component was transformed but its base was not, so the leaf's StyleX overrides cannot reliably beat the base's styled-components styles"
   | "Transient $-prefixed props renamed on exported component — update consumer call sites to use the new prop names"
-  | "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens";
+  | "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens"
+  | "animation shorthand contains a var() with no classifiable fallback — its longhand position cannot be determined statically; bind the variable to a specific longhand (e.g. animation-duration: var(--x)) instead";
 
 export interface WarningLog {
   severity: Severity;