fix: avoid pseudo-selector duplicate for conditional borderColor + :focus override (#391)

* fix: avoid pseudo-selector duplicate when conditional and pseudo overrides target the same property

Two related bugs caused 'the same pseudo selector or at-rule cannot be used more than once'
for components like:

  styled.textarea`
    border: ${themedBorder('bgBorder')};
    border-color: ${(p) => p.$hasError ? p.theme.color.redBase : undefined};
    &:focus {
      border-color: ${(p) => p.$hasError ? p.theme.color.redBase : p.theme.color.controlPrimary};
    }
  `;

1. `(p) => p.$x ? value : undefined` (or `null`/`false`/`""`) now resolves to a
   single positive variant bucket via `splitVariantsResolved*` instead of falling
   through to a dynamic style function, matching the semantics of `p.$x && value`
   and avoiding pseudo-map collisions.
2. When seeding `default` of a new pseudo map from an inherited base value, the
   inherited value's own `default` is now unwrapped instead of being nested,
   preventing malformed shapes like `{ default: { default: A, ":focus": B }, ":focus": C }`.

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

* fix: drop unsafe negative-only variant lowering for `prop ? undefined : value`

The negative-only branch added in the previous commit emitted a single
`splitVariantsResolvedValue` variant with a `!prop` `when` key, but
`handleSplitVariantsResolvedValue` treats negated entries as the
unconditional default and applies them directly to the base `styleObj`.
That silently dropped the `!prop` gate and produced always-on styles.

Restrict `buildOneSidedVariantResult` to the positive-only direction
(`prop ? value : undefined/null/false/""`) — which was the originally
reported pattern — and let the inverse fall through to the dynamic
style-function fallback. Add a regression test that fails if the
unconditional-leak ever reappears.

Addresses Codex review on PR #391.

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

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: skovhus

src/__tests__/transform.test.ts

@@ -2233,9 +2233,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";
 
@@ -2252,7 +2252,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", () => {

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/lower-rules/interpolated-variant-resolvers.ts

@@ -267,6 +267,9 @@ export function handleSplitVariantsResolvedValue(ctx: SplitVariantsContext): boo
     registerImports(parsed.imports, resolverImports);
 
     // Get or create a condition map (pseudo/media) for a property, preserving the default value.
+    // When the inherited base value is itself a pseudo/media map (e.g., styleObj already has
+    // `{ default: A, ":focus": B }` from an earlier rule), flatten its `default` so we don't
+    // produce a malformed nested map like `{ default: { default: A, ":focus": B } }`.
     const getOrCreateConditionMap = (prop: string): Record<string, unknown> => {
       const existing = target[prop];
       const map =
@@ -275,7 +278,7 @@ export function handleSplitVariantsResolvedValue(ctx: SplitVariantsContext): boo
           : ({} as Record<string, unknown>);
       if (!("default" in map)) {
         const baseValue = existing ?? styleObj[prop];
-        map.default = baseValue ?? null;
+        map.default = unwrapConditionMapDefault(baseValue);
       }
       target[prop] = map;
       return map;
@@ -539,9 +542,10 @@ export function handleSplitMultiPropVariantsResolvedValue(ctx: SplitVariantsCont
           : ({} as Record<string, unknown>);
       // Set default from target first, then fall back to base styleObj.
       // Only use null if neither has a value (for properties like outlineStyle that need explicit null).
+      // unwrapConditionMapDefault prevents nesting an inherited pseudo map under `default`.
       if (!("default" in map)) {
         const baseValue = existing ?? styleObj[stylexPropMulti];
-        map.default = baseValue ?? null;
+        map.default = unwrapConditionMapDefault(baseValue);
       }
       for (const ps of pseudos) {
         map[ps] = parsed.exprAst as any;
@@ -744,3 +748,30 @@ export function handleDualBranchCompoundVariantsResolvedValue(ctx: SplitVariants
   decl.needsWrapperComponent = true;
   return true;
 }
+
+// --- Non-exported helpers ---
+
+/**
+ * When seeding `default` of a new pseudo/media map from an inherited base value,
+ * collapse a base value that is itself a pseudo/media map down to its `default`
+ * entry. Without this, layering a new pseudo override (e.g. variant bucket)
+ * would produce a malformed nested map like
+ * `{ default: { default: A, ":focus": B }, ":focus": C }`, which StyleX rejects
+ * with "the same pseudo selector or at-rule cannot be used more than once".
+ *
+ * Returns `null` (the StyleX "no override" sentinel) when no usable default is
+ * present.
+ */
+function unwrapConditionMapDefault(value: unknown): unknown {
+  if (!value || typeof value !== "object" || Array.isArray(value) || isAstNode(value)) {
+    return value ?? null;
+  }
+  const map = value as Record<string, unknown>;
+  if ("default" in map) {
+    return map.default ?? null;
+  }
+  // Object without a `default` key — treat as no inherited base value.
+  // (Bare pseudo-only maps like { ":focus": X } never appear here in practice
+  // because callers always seed `default` first.)
+  return null;
+}

test-cases/conditional-pseudoBorderColor.input.tsx

@@ -0,0 +1,23 @@
+// Repro: Same pseudo selector or at-rule cannot be used more than once
+// Pattern: dynamic borderColor override at default scope (ternary), then borderColor again under :focus
+import styled from "styled-components";
+import { themedBorder } from "./lib/helpers";
+
+const JsonTextarea = styled.textarea<{ $hasError?: boolean }>`
+  border: ${themedBorder("bgBorderFaint")};
+  border-color: ${(props) => (props.$hasError ? props.theme.color.greenBase : undefined)};
+  border-radius: 6px;
+
+  &:focus {
+    outline: none;
+    border-color: ${(props) =>
+      props.$hasError ? props.theme.color.greenBase : props.theme.color.controlPrimary};
+  }
+`;
+
+export const App = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: 16 }}>
+    <JsonTextarea defaultValue="default" />
+    <JsonTextarea $hasError defaultValue="error" />
+  </div>
+);

test-cases/conditional-pseudoBorderColor.output.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as stylex from "@stylexjs/stylex";
+import { pixelVars, $colors } from "./tokens.stylex";
+
+type JsonTextareaProps = { hasError?: boolean } & React.ComponentProps<"textarea">;
+
+function JsonTextarea(props: JsonTextareaProps) {
+  const { children, hasError, ...rest } = props;
+  return (
+    <textarea
+      {...rest}
+      sx={[styles.jsonTextarea, styles.jsonTextareaBorder, hasError && styles.jsonTextareaHasError]}
+    >
+      {children}
+    </textarea>
+  );
+}
+
+export const App = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 8, padding: 16 }}>
+    <JsonTextarea defaultValue="default" />
+    <JsonTextarea hasError defaultValue="error" />
+  </div>
+);
+
+const styles = stylex.create({
+  jsonTextarea: {
+    borderRadius: 6,
+    borderColor: {
+      default: null,
+      ":focus": $colors.controlPrimary,
+    },
+    outline: {
+      default: null,
+      ":focus": "none",
+    },
+  },
+  jsonTextareaBorder: {
+    borderWidth: pixelVars.thin,
+    borderStyle: "solid",
+    borderColor: $colors.bgBorderFaint,
+  },
+  jsonTextareaHasError: {
+    borderColor: {
+      default: $colors.greenBase,
+      ":focus": $colors.greenBase,
+    },
+  },
+});