refactor: reduce test case duplication by merging 12 near-duplicate tests (#347)

* refactor: reduce test case duplication by merging 12 near-duplicate tests

Consolidate test cases that test the same patterns into existing cases,
preserving all unique patterns as additional components/variations:

- conditional-basic ← conditional-ternaryCssBlock (empty string ternary)
- conditional-nullishCoalescing ← conditional-nullishCoalescingWithUnit (numeric+unit)
- conditional-logicalAnd ← conditional-logicalAndTemplateLiteral (theme templates)
- conditional-runtimeCallBranch ← conditional-runtimeCallThemeBool (plain fn call)
- interpolation-arrowFunction ← interpolation-arrowBlockBody (block body syntax)
- attrs-labelAs ← attrs-asRefType (variant prop + ref typing)
- attrs-tabIndex ← attrs-tabIndexInStyle (tabIndex used in CSS)
- selector-pseudoExpand ← selector-pseudoExpandInline (single-use inlining)
- selector-sibling ← selector-adjacentSiblingDestructure + selector-siblingInterpolated
- selector-dynamicPseudoElement ← selector-dynamicPlaceholder (::placeholder)
- transientProp-notForwarded ← transientProp-toDom (DOM element filtering)

https://claude.ai/code/session_014eC8v66Xj9xpyaZbYpFT7G

* fix: use per-component defineMarker() for scoped sibling selectors

siblingBefore(":is(*)") with file-global defaultMarker() caused sibling
styles to leak across component boundaries when multiple sibling-using
components appeared as siblings in the same render tree. The first Row
was incorrectly getting margin-top:16px because ThingThemed (a different
component) preceded it and shared the same default marker.

Fix: generate a defineMarker() per component in a .stylex sidecar file
and pass it as the second argument to siblingBefore(":is(*)", Marker).
This scopes sibling matching to only same-component siblings.

https://claude.ai/code/session_014eC8v66Xj9xpyaZbYpFT7G

* refactor: collect markers before pushing to avoid mutation during iteration

https://claude.ai/code/session_014eC8v66Xj9xpyaZbYpFT7G

* chore: regenerate all test case outputs after rebase with main

https://claude.ai/code/session_014eC8v66Xj9xpyaZbYpFT7G

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: skovhus

eslint.config.js

@@ -53,10 +53,9 @@ export default [
     // Dynamic style function parameters: the rule cannot validate runtime
     // values passed as arrow-function params in stylex.create().
     files: [
-      "test-cases/conditional-nullishCoalescingWithUnit.output.tsx",
+      "test-cases/conditional-nullishCoalescing.output.tsx",
       "test-cases/conditional-runtimeCallBranch.output.tsx",
       "test-cases/conditional-runtimeCallLocal.output.tsx",
-      "test-cases/conditional-runtimeCallThemeBool.output.tsx",
       "test-cases/helper-callPropArg.output.tsx",
       "test-cases/helper-memberCalleeMultiArg.output.tsx",
       "test-cases/interpolation-destructuredDefaults.output.tsx",

src/internal/emit-wrappers.ts

@@ -24,6 +24,8 @@ export function emitWrappers(args: {
   themeHook?: ThemeHookConfig;
   emptyStyleKeys?: Set<string>;
   ancestorSelectorParents?: Set<string>;
+  crossFileMarkers?: Map<string, string>;
+  siblingMarkerKeys?: Set<string>;
   useSxProp: boolean;
 }): void {
   const {
@@ -39,6 +41,8 @@ export function emitWrappers(args: {
     themeHook,
     emptyStyleKeys,
     ancestorSelectorParents,
+    crossFileMarkers,
+    siblingMarkerKeys,
     useSxProp,
   } = args;
 
@@ -60,6 +64,8 @@ export function emitWrappers(args: {
     themeHook: themeHook ?? DEFAULT_THEME_HOOK,
     emptyStyleKeys,
     ancestorSelectorParents,
+    crossFileMarkers,
+    siblingMarkerKeys,
     useSxProp,
   });
 

src/internal/emit-wrappers/style-merger.ts

@@ -71,6 +71,8 @@ export function emitStyleMerging(args: {
     | "stylesIdentifier"
     | "emptyStyleKeys"
     | "ancestorSelectorParents"
+    | "crossFileMarkers"
+    | "siblingMarkerKeys"
     | "emitTypes"
     | "useSxProp"
   >;
@@ -100,8 +102,15 @@ export function emitStyleMerging(args: {
     isIntrinsicElement = true,
   } = args;
 
-  const { styleMerger, emptyStyleKeys, stylesIdentifier, ancestorSelectorParents, emitTypes } =
-    emitter;
+  const {
+    styleMerger,
+    emptyStyleKeys,
+    stylesIdentifier,
+    ancestorSelectorParents,
+    crossFileMarkers,
+    siblingMarkerKeys,
+    emitTypes,
+  } = emitter;
 
   const styleArgs = filterEmptyStyleArgs({
     styleArgs: rawStyleArgs,
@@ -110,13 +119,29 @@ export function emitStyleMerging(args: {
     ancestorSelectorParents,
   });
 
-  // Add stylex.defaultMarker() when any style arg references an ancestor selector parent.
-  // This is needed for merger/verbose paths that bypass the postProcessTransformedAst traversal.
+  // Add a marker when any style arg references an ancestor selector parent.
+  // Sibling markers (from crossFileMarkers) REPLACE defaultMarker() — they scope sibling
+  // matching to the component. Cross-file markers coexist with defaultMarker().
   if (ancestorSelectorParents && ancestorSelectorParents.size > 0) {
-    const needsMarker = styleArgs.some((arg) =>
-      hasStyleArgKey(arg, stylesIdentifier, ancestorSelectorParents),
-    );
-    if (needsMarker) {
+    let needsDefaultMarker = false;
+    const pendingMarkers: ExpressionKind[] = [];
+    for (const arg of styleArgs) {
+      const key = getStyleArgKey(arg, stylesIdentifier);
+      if (!key || !ancestorSelectorParents.has(key)) {
+        continue;
+      }
+      const markerVarName = crossFileMarkers.get(key);
+      if (markerVarName) {
+        pendingMarkers.push(j.identifier(markerVarName));
+      }
+      // Need defaultMarker() when there's no scoped marker, or when a cross-file
+      // marker coexists with an ancestor selector (defaultMarker serves the ancestor).
+      if (!markerVarName || !siblingMarkerKeys.has(key)) {
+        needsDefaultMarker = true;
+      }
+    }
+    styleArgs.push(...pendingMarkers);
+    if (needsDefaultMarker) {
       styleArgs.push(
         j.callExpression(
           j.memberExpression(j.identifier("stylex"), j.identifier("defaultMarker")),
@@ -554,15 +579,3 @@ function getStyleArgKey(node: ExpressionKind, stylesIdentifier: string): string
   }
   return null;
 }
-
-/**
- * Returns `true` when `node` is `<stylesIdentifier>.<key>` and the key is in the given set.
- */
-function hasStyleArgKey(
-  node: ExpressionKind,
-  stylesIdentifier: string,
-  keys: Set<string>,
-): boolean {
-  const key = getStyleArgKey(node, stylesIdentifier);
-  return !!(key && keys.has(key));
-}

src/internal/emit-wrappers/wrapper-emitter.ts

@@ -46,6 +46,10 @@ type WrapperEmitterArgs = {
   themeHook: ThemeHookConfig;
   emptyStyleKeys?: Set<string>;
   ancestorSelectorParents?: Set<string>;
+  /** Maps styleKey → marker variable name for scoped markers (sibling + cross-file) */
+  crossFileMarkers?: Map<string, string>;
+  /** Style keys that use sibling markers (scoped marker replaces defaultMarker) */
+  siblingMarkerKeys?: Set<string>;
   useSxProp: boolean;
 };
 
@@ -62,6 +66,8 @@ export class WrapperEmitter {
   readonly themeHook: ThemeHookConfig;
   readonly emptyStyleKeys: Set<string>;
   readonly ancestorSelectorParents: Set<string>;
+  readonly crossFileMarkers: Map<string, string>;
+  readonly siblingMarkerKeys: Set<string>;
   readonly useSxProp: boolean;
 
   // For plain JS/JSX and Flow transforms, skip emitting TS syntax entirely for now.
@@ -87,6 +93,8 @@ export class WrapperEmitter {
     this.themeHook = args.themeHook;
     this.emptyStyleKeys = args.emptyStyleKeys ?? new Set<string>();
     this.ancestorSelectorParents = args.ancestorSelectorParents ?? new Set<string>();
+    this.crossFileMarkers = args.crossFileMarkers ?? new Map<string, string>();
+    this.siblingMarkerKeys = args.siblingMarkerKeys ?? new Set<string>();
     this.useSxProp = args.useSxProp;
     this.emitTypes = this.filePath.endsWith(".ts") || this.filePath.endsWith(".tsx");
   }

src/internal/lower-rules.ts

@@ -22,6 +22,7 @@ export function lowerRules(ctx: TransformContext): {
   ancestorSelectorParents: Set<string>;
   usedCssHelperFunctions: Set<string>;
   crossFileMarkers: Map<string, string>;
+  siblingMarkerKeys: Set<string>;
   bail: boolean;
 } {
   const state = createLowerRulesState(ctx);
@@ -113,14 +114,18 @@ export function lowerRules(ctx: TransformContext): {
     }
   }
 
-  // Derive cross-file markers from relation overrides (single source of truth).
-  // Only include markers for parents that actually need them.
+  // Derive markers from relation overrides and sibling selectors.
+  // Cross-file overrides use markers for parents that need them;
+  // sibling selectors use per-component markers for scoped matching.
   const crossFileMarkers = new Map<string, string>();
   for (const o of state.relationOverrides) {
     if (o.crossFile && o.markerVarName && parentsNeedingMarker.has(o.parentStyleKey)) {
       crossFileMarkers.set(o.parentStyleKey, o.markerVarName);
     }
   }
+  for (const [styleKey, markerName] of state.siblingMarkerNames) {
+    crossFileMarkers.set(styleKey, markerName);
+  }
 
   // Filter ancestorSelectorParents to only parents needing markers.
   // Parents without pseudo conditions don't need markers — their override
@@ -140,6 +145,7 @@ export function lowerRules(ctx: TransformContext): {
     ancestorSelectorParents: filteredAncestorParents,
     usedCssHelperFunctions: state.usedCssHelperFunctions,
     crossFileMarkers,
+    siblingMarkerKeys: new Set(state.siblingMarkerNames.keys()),
     bail: state.bail,
   };
 }

src/internal/lower-rules/process-rules.ts

@@ -1869,7 +1869,7 @@ function getOrCreateComputedMediaEntry(prop: string, ctx: DeclProcessingState) {
 
 /**
  * Handles a self-referencing sibling selector (`& + &` or `& ~ &`) by processing
- * declarations and storing them as computed keys using `stylex.when.siblingBefore(':is(*)')`.
+ * declarations and storing them as computed keys using `stylex.when.siblingBefore(':is(*)', Marker)`.
  *
  * **Semantic approximation:** CSS `& + &` targets only the *immediately adjacent*
  * sibling, while `stylex.when.siblingBefore()` generates a general sibling rule
@@ -1878,11 +1878,10 @@ function getOrCreateComputedMediaEntry(prop: string, ctx: DeclProcessingState) {
  * In practice this rarely matters because `& + &` is almost always used with
  * consecutive homogeneous lists. For `& ~ &`, the mapping is semantically exact.
  *
- * Uses `defaultMarker()` (via `ancestorSelectorParents`) instead of per-component
- * `defineMarker()`, avoiding the `.stylex` file requirement. Because the marker
- * is file-global rather than component-scoped, styles from one component could
- * theoretically leak to another if both use sibling selectors and appear as
- * siblings in the same render tree.
+ * Uses per-component `defineMarker()` (emitted in a `.stylex` sidecar file) so that
+ * sibling matching is component-scoped. Without a scoped marker, `defaultMarker()` is
+ * file-global and styles from one component could leak to another if both use sibling
+ * selectors and appear as siblings in the same render tree.
  *
  * **`:is(*)` workaround:** The StyleX Babel plugin mandates a pseudo argument
  * starting with `:` for `siblingBefore()`. `:is(*)` is a universal match with
@@ -1911,12 +1910,18 @@ function handleSiblingSelector(
     });
   }
 
-  // Add to ancestorSelectorParents so defaultMarker() is injected into stylex.props() calls.
+  // Add to ancestorSelectorParents so the marker is injected into stylex.props() calls.
   // Also add to siblingMarkerParents to distinguish from forward/reverse selectors —
   // sibling markers are always needed (stylex.when.siblingBefore() references them).
   ancestorSelectorParents.add(decl.styleKey);
   state.siblingMarkerParents.add(decl.styleKey);
 
+  // Register a per-component marker for scoped sibling matching.
+  // The marker variable (e.g. "ThingMarker") is emitted as defineMarker() in a
+  // sidecar .stylex file and passed as the second argument to siblingBefore().
+  const markerVarName = state.siblingMarkerNames.get(decl.styleKey) ?? `${decl.localName}Marker`;
+  state.siblingMarkerNames.set(decl.styleKey, markerVarName);
+
   // Process declarations into a temporary bucket using the shared helper
   const bucket: Record<string, unknown> = {};
   const result = processDeclarationsIntoBucket(
@@ -1938,14 +1943,15 @@ function handleSiblingSelector(
     return "break";
   }
 
-  // Build a fresh stylex.when.siblingBefore(':is(*)') AST node per property.
+  // Build a fresh stylex.when.siblingBefore(':is(*)', Marker) AST node per property.
+  // The second argument scopes sibling matching to the component's own marker.
   const makeSiblingKeyExpr = () =>
     j.callExpression(
       j.memberExpression(
         j.memberExpression(j.identifier("stylex"), j.identifier("when")),
         j.identifier("siblingBefore"),
       ),
-      [j.literal(":is(*)")],
+      [j.literal(":is(*)"), j.identifier(markerVarName)],
     );
 
   // Wrap values in media/container condition objects when inside an @media or @container at-rule

src/internal/lower-rules/state.ts

@@ -71,6 +71,8 @@ export function createLowerRulesState(ctx: TransformContext) {
   const relationOverrides: RelationOverride[] = [];
   const ancestorSelectorParents = new Set<string>();
   const siblingMarkerParents = new Set<string>();
+  /** Maps styleKey → marker variable name for sibling selectors (e.g. "thing" → "ThingMarker") */
+  const siblingMarkerNames = new Map<string, string>();
   // Map<overrideStyleKey, Map<pseudo|null, Record<prop, value>>>
   // null key = base styles, string key = pseudo styles (e.g., ":hover", ":focus-visible")
   const relationOverridePseudoBuckets = new Map<
@@ -263,6 +265,7 @@ export function createLowerRulesState(ctx: TransformContext) {
     relationOverrides,
     ancestorSelectorParents,
     siblingMarkerParents,
+    siblingMarkerNames,
     relationOverridePseudoBuckets,
     childPseudoMarkers,
     cssHelperValuesByKey,

src/internal/transform-context.ts

@@ -96,8 +96,10 @@ export class TransformContext {
   crossFileSelectorUsages?: import("./transform-types.js").CrossFileSelectorUsage[];
   /** Component names in this file that need a global selector bridge className */
   bridgeComponentNames?: Set<string>;
-  /** Marker variable names generated for cross-file parent components (parentStyleKey → markerName) */
+  /** Marker variable names generated for cross-file parent components and sibling selectors (parentStyleKey → markerName) */
   crossFileMarkers?: Map<string, string>;
+  /** Style keys that use sibling markers (scoped marker replaces defaultMarker) */
+  siblingMarkerKeys?: Set<string>;
   /** Content for the sidecar .stylex.ts file (defineMarker declarations), populated by emitStylesStep */
   sidecarStylexContent?: string;
   /** Bridge components emitted for unconverted consumer selectors. */

src/internal/transform-steps/emit-wrappers.ts

@@ -29,6 +29,8 @@ export function emitWrappersStep(ctx: TransformContext): StepResult {
     themeHook: ctx.adapter.themeHook,
     emptyStyleKeys: ctx.emptyStyleKeys,
     ancestorSelectorParents: ctx.ancestorSelectorParents,
+    crossFileMarkers: ctx.crossFileMarkers,
+    siblingMarkerKeys: ctx.siblingMarkerKeys,
     useSxProp: ctx.adapter.useSxProp,
   });
 

src/internal/transform-steps/lower-rules.ts

@@ -21,6 +21,7 @@ export function lowerRulesStep(ctx: TransformContext): StepResult {
   ctx.relationOverrides = lowered.relationOverrides;
   ctx.ancestorSelectorParents = lowered.ancestorSelectorParents;
   ctx.crossFileMarkers = lowered.crossFileMarkers;
+  ctx.siblingMarkerKeys = lowered.siblingMarkerKeys;
 
   if (lowered.bail || ctx.resolveValueBailRef.value) {
     return returnResult({ code: null, warnings: ctx.warnings }, "bail");