fix: only emit defaultMarker() when parent has non-scoped overrides

claude · claude · commit 79037466d163 · 2026-03-14T22:56:43.000Z
Parents that only have scoped marker overrides (sibling selectors, no-pseudo ancestor with defineMarker) don't need defaultMarker() — it would be unnecessary overhead. Only emit defaultMarker() when the parent has at least one override without a markerVarName, which means it uses stylex.when.ancestor(':pseudo') with no marker argument. Introduces parentsNeedingDefaultMarker set computed in lower-rules.ts and plumbed through the pipeline to both JSX emission paths (rewrite-jsx.ts for inlined components, style-merger.ts for wrappers). https://claude.ai/code/session_01X1Gxfz4reNWtojK37AJpsT
diff --git a/src/internal/emit-wrappers.ts b/src/internal/emit-wrappers.ts
@@ -26,6 +26,7 @@ export function emitWrappers(args: {
   ancestorSelectorParents?: Set<string>;
   crossFileMarkers?: Map<string, string>;
   siblingMarkerKeys?: Set<string>;
+  parentsNeedingDefaultMarker?: Set<string>;
   useSxProp: boolean;
 }): void {
   const {
@@ -43,6 +44,7 @@ export function emitWrappers(args: {
     ancestorSelectorParents,
     crossFileMarkers,
     siblingMarkerKeys,
+    parentsNeedingDefaultMarker,
     useSxProp,
   } = args;
 
@@ -66,6 +68,7 @@ export function emitWrappers(args: {
     ancestorSelectorParents,
     crossFileMarkers,
     siblingMarkerKeys,
+    parentsNeedingDefaultMarker,
     useSxProp,
   });
 
diff --git a/src/internal/emit-wrappers/style-merger.ts b/src/internal/emit-wrappers/style-merger.ts
@@ -72,6 +72,7 @@ export function emitStyleMerging(args: {
     | "emptyStyleKeys"
     | "ancestorSelectorParents"
     | "crossFileMarkers"
+    | "parentsNeedingDefaultMarker"
     | "emitTypes"
     | "useSxProp"
   >;
@@ -107,6 +108,7 @@ export function emitStyleMerging(args: {
     stylesIdentifier,
     ancestorSelectorParents,
     crossFileMarkers,
+    parentsNeedingDefaultMarker,
     emitTypes,
   } = emitter;
 
@@ -133,7 +135,12 @@ export function emitStyleMerging(args: {
       if (markerVarName) {
         pendingMarkers.push(j.identifier(markerVarName));
       }
-      needsDefaultMarker = true;
+      // Only emit defaultMarker() when this parent has at least one override
+      // without a scoped marker. Pure sibling/no-pseudo cases only need
+      // their scoped marker.
+      if (!markerVarName || parentsNeedingDefaultMarker.has(key)) {
+        needsDefaultMarker = true;
+      }
     }
     styleArgs.push(...pendingMarkers);
     if (needsDefaultMarker) {
diff --git a/src/internal/emit-wrappers/wrapper-emitter.ts b/src/internal/emit-wrappers/wrapper-emitter.ts
@@ -50,6 +50,8 @@ type WrapperEmitterArgs = {
   crossFileMarkers?: Map<string, string>;
   /** Style keys that use sibling markers (scoped marker replaces defaultMarker) */
   siblingMarkerKeys?: Set<string>;
+  /** Parent style keys that need defaultMarker() (have at least one override without a scoped marker) */
+  parentsNeedingDefaultMarker?: Set<string>;
   useSxProp: boolean;
 };
 
@@ -68,6 +70,7 @@ export class WrapperEmitter {
   readonly ancestorSelectorParents: Set<string>;
   readonly crossFileMarkers: Map<string, string>;
   readonly siblingMarkerKeys: Set<string>;
+  readonly parentsNeedingDefaultMarker: Set<string>;
   readonly useSxProp: boolean;
 
   // For plain JS/JSX and Flow transforms, skip emitting TS syntax entirely for now.
@@ -95,6 +98,7 @@ export class WrapperEmitter {
     this.ancestorSelectorParents = args.ancestorSelectorParents ?? new Set<string>();
     this.crossFileMarkers = args.crossFileMarkers ?? new Map<string, string>();
     this.siblingMarkerKeys = args.siblingMarkerKeys ?? new Set<string>();
+    this.parentsNeedingDefaultMarker = args.parentsNeedingDefaultMarker ?? new Set<string>();
     this.useSxProp = args.useSxProp;
     this.emitTypes = this.filePath.endsWith(".ts") || this.filePath.endsWith(".tsx");
   }
diff --git a/src/internal/lower-rules.ts b/src/internal/lower-rules.ts
@@ -23,6 +23,7 @@ export function lowerRules(ctx: TransformContext): {
   usedCssHelperFunctions: Set<string>;
   crossFileMarkers: Map<string, string>;
   siblingMarkerKeys: Set<string>;
+  parentsNeedingDefaultMarker: Set<string>;
   bail: boolean;
 } {
   const state = createLowerRulesState(ctx);
@@ -139,13 +140,25 @@ export function lowerRules(ctx: TransformContext): {
     }
   }
 
+  // Parents that have at least one override WITHOUT a scoped marker need
+  // defaultMarker() so that `stylex.when.ancestor(':pseudo')` (no marker arg) can match.
+  // Parents whose overrides ALL use scoped markers (e.g. pure sibling selectors)
+  // only need their scoped marker — defaultMarker() would be unnecessary overhead.
+  const parentsNeedingDefaultMarker = new Set<string>();
+  for (const o of state.relationOverrides) {
+    if (!o.markerVarName && parentsNeedingMarker.has(o.parentStyleKey)) {
+      parentsNeedingDefaultMarker.add(o.parentStyleKey);
+    }
+  }
+
   return {
     resolvedStyleObjects: state.resolvedStyleObjects,
     relationOverrides: state.relationOverrides,
     ancestorSelectorParents: filteredAncestorParents,
     usedCssHelperFunctions: state.usedCssHelperFunctions,
     crossFileMarkers,
     siblingMarkerKeys: new Set(state.siblingMarkerNames.keys()),
+    parentsNeedingDefaultMarker,
     bail: state.bail,
   };
 }
diff --git a/src/internal/rewrite-jsx.ts b/src/internal/rewrite-jsx.ts
@@ -26,6 +26,8 @@ export function postProcessTransformedAst(args: {
   stylesIdentifier?: string;
   /** Cross-file marker variables: parentStyleKey → markerVarName */
   crossFileMarkers?: Map<string, string>;
+  /** Parent style keys that need defaultMarker() (have at least one override without a scoped marker) */
+  parentsNeedingDefaultMarker?: Set<string>;
 }): { changed: boolean; needsReactImport: boolean } {
   const {
     root,
@@ -39,6 +41,7 @@ export function postProcessTransformedAst(args: {
     newImportSourcesByLocal,
     stylesIdentifier = "styles",
     crossFileMarkers,
+    parentsNeedingDefaultMarker,
   } = args;
   let changed = false;
 
@@ -237,10 +240,10 @@ export function postProcessTransformedAst(args: {
                 changed = true;
               }
             }
-            // Always add defaultMarker() for ancestor selector parents — scoped markers
-            // and defaultMarker() coexist: scoped enables targeted matching while
-            // defaultMarker() enables regular pseudo-reverse selectors.
-            if (!hasDefaultMarker(call)) {
+            // Only add defaultMarker() when this parent has at least one override
+            // without a scoped marker. Pure sibling/no-pseudo cases only need
+            // their scoped marker — defaultMarker() would be unnecessary overhead.
+            if (parentsNeedingDefaultMarker?.has(parentKey) && !hasDefaultMarker(call)) {
               call.arguments = [...(call.arguments ?? []), makeDefaultMarkerCall()];
               changed = true;
             }
@@ -258,8 +261,8 @@ export function postProcessTransformedAst(args: {
                 changed = true;
               }
             }
-            // Always add defaultMarker() — see comment in stylex.props() branch above.
-            if (!hasDefaultMarkerInSxArgs(sxAttr)) {
+            // Only add defaultMarker() when needed — see comment in stylex.props() branch above.
+            if (parentsNeedingDefaultMarker?.has(parentKey) && !hasDefaultMarkerInSxArgs(sxAttr)) {
               addArgsToSxAttr(sxAttr, [makeDefaultMarkerCall()]);
               changed = true;
             }
diff --git a/src/internal/transform-context.ts b/src/internal/transform-context.ts
@@ -100,6 +100,8 @@ export class TransformContext {
   crossFileMarkers?: Map<string, string>;
   /** Style keys that use sibling markers (scoped marker replaces defaultMarker) */
   siblingMarkerKeys?: Set<string>;
+  /** Parent style keys that need defaultMarker() (have at least one override without a scoped marker) */
+  parentsNeedingDefaultMarker?: Set<string>;
   /** Content for the sidecar .stylex.ts file (defineMarker declarations), populated by emitStylesStep */
   sidecarStylexContent?: string;
   /** Bridge components emitted for unconverted consumer selectors. */
diff --git a/src/internal/transform-steps/emit-wrappers.ts b/src/internal/transform-steps/emit-wrappers.ts
@@ -31,6 +31,7 @@ export function emitWrappersStep(ctx: TransformContext): StepResult {
     ancestorSelectorParents: ctx.ancestorSelectorParents,
     crossFileMarkers: ctx.crossFileMarkers,
     siblingMarkerKeys: ctx.siblingMarkerKeys,
+    parentsNeedingDefaultMarker: ctx.parentsNeedingDefaultMarker,
     useSxProp: ctx.adapter.useSxProp,
   });
 
diff --git a/src/internal/transform-steps/lower-rules.ts b/src/internal/transform-steps/lower-rules.ts
@@ -22,6 +22,7 @@ export function lowerRulesStep(ctx: TransformContext): StepResult {
   ctx.ancestorSelectorParents = lowered.ancestorSelectorParents;
   ctx.crossFileMarkers = lowered.crossFileMarkers;
   ctx.siblingMarkerKeys = lowered.siblingMarkerKeys;
+  ctx.parentsNeedingDefaultMarker = lowered.parentsNeedingDefaultMarker;
 
   if (lowered.bail || ctx.resolveValueBailRef.value) {
     return returnResult({ code: null, warnings: ctx.warnings }, "bail");
diff --git a/src/internal/transform-steps/post-process.ts b/src/internal/transform-steps/post-process.ts
@@ -71,6 +71,7 @@ export function postProcessStep(ctx: TransformContext): StepResult {
     newImportSourcesByLocal,
     stylesIdentifier: ctx.stylesIdentifier,
     crossFileMarkers: ctx.crossFileMarkers,
+    parentsNeedingDefaultMarker: ctx.parentsNeedingDefaultMarker,
   });
   if (post.changed) {
     ctx.markChanged();
diff --git a/test-cases/selector-crossFileBridgeForward.output.tsx b/test-cases/selector-crossFileBridgeForward.output.tsx
@@ -7,7 +7,7 @@ import { StyledCollapseButtonMarker } from "./selector-crossFileBridgeForward.in
 export function StyledCollapseButton(props: Pick<React.ComponentProps<"div">, "ref" | "children">) {
   const { children, ...rest } = props;
   return (
-    <div {...rest} sx={[styles.collapseButton, StyledCollapseButtonMarker, stylex.defaultMarker()]}>
+    <div {...rest} sx={[styles.collapseButton, StyledCollapseButtonMarker]}>
       {children}
     </div>
   );
diff --git a/test-cases/selector-crossFileComponent.output.tsx b/test-cases/selector-crossFileComponent.output.tsx
@@ -7,7 +7,7 @@ export function App() {
   return (
     <div style={{ display: "flex", gap: 16, padding: 16 }}>
       <CrossFileIcon />
-      <button sx={[styles.button, styles.iconButton, IconButtonMarker, stylex.defaultMarker()]}>
+      <button sx={[styles.button, styles.iconButton, IconButtonMarker]}>
         <CrossFileIcon {...stylex.props(styles.crossFileIconInIconButton)} />
         Hover
       </button>
diff --git a/test-cases/selector-generalSibling.output.tsx b/test-cases/selector-generalSibling.output.tsx
@@ -3,7 +3,7 @@ import * as stylex from "@stylexjs/stylex";
 import { ThingMarker } from "./selector-generalSibling.input.stylex";
 
 function Thing(props: React.PropsWithChildren<{}>) {
-  return <div sx={[styles.thing, ThingMarker, stylex.defaultMarker()]}>{props.children}</div>;
+  return <div sx={[styles.thing, ThingMarker]}>{props.children}</div>;
 }
 
 export const App = () => (
diff --git a/test-cases/selector-sibling.output.tsx b/test-cases/selector-sibling.output.tsx
@@ -4,19 +4,17 @@ import { $colors } from "./tokens.stylex";
 import { ThingMarker, ThingThemedMarker, RowMarker } from "./selector-sibling.input.stylex";
 
 function Thing(props: React.PropsWithChildren<{}>) {
-  return <div sx={[styles.thing, ThingMarker, stylex.defaultMarker()]}>{props.children}</div>;
+  return <div sx={[styles.thing, ThingMarker]}>{props.children}</div>;
 }
 
 // Adjacent sibling with theme interpolation
 function ThingThemed(props: React.PropsWithChildren<{}>) {
-  return (
-    <div sx={[styles.thingThemed, ThingThemedMarker, stylex.defaultMarker()]}>{props.children}</div>
-  );
+  return <div sx={[styles.thingThemed, ThingThemedMarker]}>{props.children}</div>;
 }
 
 // Minimal adjacent sibling (margin-top spacing pattern)
 function Row(props: React.PropsWithChildren<{}>) {
-  return <div sx={[styles.row, RowMarker, stylex.defaultMarker()]}>{props.children}</div>;
+  return <div sx={[styles.row, RowMarker]}>{props.children}</div>;
 }
 
 // NOTE: StyleX siblingBefore() emits `~ *` (general sibling), not `+ *`
diff --git a/test-cases/selector-siblingBaseAfter.output.tsx b/test-cases/selector-siblingBaseAfter.output.tsx
@@ -5,7 +5,7 @@ import { ThingMarker } from "./selector-siblingBaseAfter.input.stylex";
 // The adjacent sibling rule appears BEFORE the base color declaration.
 // The base value must still be preserved as the default.
 function Thing(props: React.PropsWithChildren<{}>) {
-  return <div sx={[styles.thing, ThingMarker, stylex.defaultMarker()]}>{props.children}</div>;
+  return <div sx={[styles.thing, ThingMarker]}>{props.children}</div>;
 }
 
 export const App = () => (
diff --git a/test-cases/selector-siblingMarkerScoping.output.tsx b/test-cases/selector-siblingMarkerScoping.output.tsx
@@ -7,7 +7,7 @@ import { RowMarker } from "./selector-siblingMarkerScoping.input.stylex";
 // an ancestor relation override), its marker could incorrectly activate
 // Row's sibling styles. Use defineMarker() for strict scoping.
 function Row(props: React.PropsWithChildren<{}>) {
-  return <div sx={[styles.row, RowMarker, stylex.defaultMarker()]}>{props.children}</div>;
+  return <div sx={[styles.row, RowMarker]}>{props.children}</div>;
 }
 
 export const App = () => (
diff --git a/test-cases/selector-siblingMedia.output.tsx b/test-cases/selector-siblingMedia.output.tsx
@@ -3,7 +3,7 @@ import * as stylex from "@stylexjs/stylex";
 import { ThingMarker } from "./selector-siblingMedia.input.stylex";
 
 function Thing(props: React.PropsWithChildren<{}>) {
-  return <div sx={[styles.thing, ThingMarker, stylex.defaultMarker()]}>{props.children}</div>;
+  return <div sx={[styles.thing, ThingMarker]}>{props.children}</div>;
 }
 
 export const App = () => (
