fix: add defaultMarker() to JSX ancestors with matching attributes for ancestor attribute selectors

StyleX's `stylex.when.ancestor()` generates CSS that requires the ancestor element
to have the `.x-default-marker` class. The codemod now detects JSX parent elements
with attributes matching the CSS attribute selectors and adds `defaultMarker()` to them.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: skovhus

scripts/verify-storybook-rendering.mts

@@ -70,6 +70,7 @@ const CASE_THRESHOLD_OVERRIDES = new Map<string, number>([
 // cause sub-pixel text anti-aliasing differences vs styled-components' class-only approach.
 const CASE_MISMATCH_TOLERANCE_OVERRIDES = new Map<string, number>([
   ["selector-componentDynamicProp", 0.03], // TODO: investigate if this override can be removed
+  ["selector-dataAttribute", 0.005], // Sub-pixel anti-aliasing from defaultMarker() class on ancestor elements
 ]);
 
 type Page = Awaited<ReturnType<Awaited<ReturnType<typeof chromium.launch>>["newPage"]>>;

src/internal/lower-rules.ts

@@ -24,6 +24,8 @@ export function lowerRules(ctx: TransformContext): {
   crossFileMarkers: Map<string, string>;
   siblingMarkerKeys: Set<string>;
   parentsNeedingDefaultMarker: Set<string>;
+  /** Maps style key → set of CSS attribute selector strings used in ancestor attribute conditions */
+  ancestorAttrsByStyleKey: Map<string, Set<string>>;
   bail: boolean;
 } {
   const state = createLowerRulesState(ctx);
@@ -159,6 +161,7 @@ export function lowerRules(ctx: TransformContext): {
     crossFileMarkers,
     siblingMarkerKeys: new Set(state.siblingMarkerNames.keys()),
     parentsNeedingDefaultMarker,
+    ancestorAttrsByStyleKey: state.ancestorAttrsByStyleKey,
     bail: state.bail,
   };
 }

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

@@ -1005,6 +1005,18 @@ export function processDeclRules(ctx: DeclProcessingState): void {
       ? ancestorAttrs.map((attr) => makeAncestorKeyExpr(j, `:is(${attr})`))
       : null;
 
+    // Track ancestor attribute selectors per style key for JSX marker injection
+    if (ancestorAttrs) {
+      let attrSet = state.ancestorAttrsByStyleKey.get(decl.styleKey);
+      if (!attrSet) {
+        attrSet = new Set();
+        state.ancestorAttrsByStyleKey.set(decl.styleKey, attrSet);
+      }
+      for (const attr of ancestorAttrs) {
+        attrSet.add(attr);
+      }
+    }
+
     const pseudos =
       parsedSelector.kind === "pseudo"
         ? parsedSelector.pseudos

src/internal/lower-rules/state.ts

@@ -82,6 +82,8 @@ export function createLowerRulesState(ctx: TransformContext) {
   const siblingMarkerParents = new Set<string>();
   /** Maps styleKey → marker variable name for sibling selectors (e.g. "thing" → "ThingMarker") */
   const siblingMarkerNames = new Map<string, string>();
+  /** Maps style key → set of CSS attribute selector strings used in ancestor attribute conditions */
+  const ancestorAttrsByStyleKey = new Map<string, Set<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<
@@ -279,6 +281,7 @@ export function createLowerRulesState(ctx: TransformContext) {
     ancestorSelectorParents,
     siblingMarkerParents,
     siblingMarkerNames,
+    ancestorAttrsByStyleKey,
     relationOverridePseudoBuckets,
     childPseudoMarkers,
     cssHelperValuesByKey,

src/internal/rewrite-jsx.ts

@@ -28,6 +28,8 @@ export function postProcessTransformedAst(args: {
   crossFileMarkers?: Map<string, string>;
   /** Parent style keys that need defaultMarker() (have at least one override without a scoped marker) */
   parentsNeedingDefaultMarker?: Set<string>;
+  /** Maps style key → set of CSS attribute selector strings used in ancestor attribute conditions */
+  ancestorAttrsByStyleKey?: Map<string, Set<string>>;
 }): { changed: boolean; needsReactImport: boolean } {
   const {
     root,
@@ -42,6 +44,7 @@ export function postProcessTransformedAst(args: {
     stylesIdentifier = "styles",
     crossFileMarkers,
     parentsNeedingDefaultMarker,
+    ancestorAttrsByStyleKey,
   } = args;
   let changed = false;
 
@@ -57,7 +60,11 @@ export function postProcessTransformedAst(args: {
   // - Add `stylex.defaultMarker()` to elements that need markers (ancestor selectors).
   // - Add override style keys to descendant/child elements' `stylex.props(...)` calls.
   // - For cross-file selectors: use `defineMarker()` and add overrides to imported child JSX.
-  if (relationOverrides.length > 0 || ancestorSelectorParents.size > 0) {
+  if (
+    relationOverrides.length > 0 ||
+    ancestorSelectorParents.size > 0 ||
+    (ancestorAttrsByStyleKey && ancestorAttrsByStyleKey.size > 0)
+  ) {
     // IMPORTANT: Do not reuse the same AST node instance across multiple insertion points.
     // Recast/jscodeshift expect a tree (no shared references); reuse can corrupt printing.
     const makeDefaultMarkerCall = () =>
@@ -376,9 +383,67 @@ export function postProcessTransformedAst(args: {
         }
       }
 
+      // When a child element uses styles with ancestor attribute conditions,
+      // walk up the ancestor JSX tree and add defaultMarker() to any element
+      // whose JSX attributes match the CSS attribute selector patterns.
+      if (ancestorAttrsByStyleKey && ancestorAttrsByStyleKey.size > 0) {
+        const usedStyleKeys = getUsedStyleKeys(call, sxAttr, stylesIdentifier);
+        for (const key of usedStyleKeys) {
+          const attrSelectors = ancestorAttrsByStyleKey.get(key);
+          if (!attrSelectors) {
+            continue;
+          }
+          const attrNames = extractAttrNamesFromSelectors(attrSelectors);
+          for (const anc of ancestors) {
+            if (!anc.opening) {
+              continue;
+            }
+            const jsxAttrs = (anc.opening.attributes ?? []) as any[];
+            const hasMatchingAttr = jsxAttrs.some(
+              (a: any) =>
+                a.type === "JSXAttribute" &&
+                a.name?.type === "JSXIdentifier" &&
+                attrNames.has(a.name.name),
+            );
+            if (!hasMatchingAttr) {
+              continue;
+            }
+            // Add defaultMarker() via sx attribute on the ancestor element
+            const existingSx = getSxAttrFromAttrs(jsxAttrs);
+            if (existingSx) {
+              if (!hasDefaultMarkerInSxArgs(existingSx)) {
+                addArgsToSxAttr(existingSx, [makeDefaultMarkerCall()]);
+                changed = true;
+              }
+            } else {
+              const existingCall = getStylexPropsCallFromAttrs(jsxAttrs);
+              if (existingCall) {
+                if (!hasDefaultMarker(existingCall)) {
+                  existingCall.arguments = [
+                    ...(existingCall.arguments ?? []),
+                    makeDefaultMarkerCall(),
+                  ];
+                  changed = true;
+                }
+              } else {
+                // Plain element with no sx or stylex.props — add sx={stylex.defaultMarker()}
+                anc.opening.attributes = [
+                  ...jsxAttrs,
+                  j.jsxAttribute(
+                    j.jsxIdentifier("sx"),
+                    j.jsxExpressionContainer(makeDefaultMarkerCall()),
+                  ),
+                ];
+                changed = true;
+              }
+            }
+          }
+        }
+      }
+
       const nextAncestors = [
         ...ancestors,
-        { call, sxAttr, elementStyleKey, markerVarName: addedMarkerVarName },
+        { call, sxAttr, elementStyleKey, markerVarName: addedMarkerVarName, opening },
       ];
       for (const child of node.children ?? []) {
         visitJsxChild(child, nextAncestors);
@@ -741,6 +806,56 @@ export function postProcessTransformedAst(args: {
 
 // --- Non-exported helpers ---
 
+/** Extracts style key names referenced in a stylex.props() call or sx attribute. */
+function getUsedStyleKeys(call: any, sxAttr: any, stylesIdentifier: string): string[] {
+  const keys: string[] = [];
+  const extractKey = (node: any): void => {
+    if (
+      node?.type === "MemberExpression" &&
+      node.object?.type === "Identifier" &&
+      node.object.name === stylesIdentifier &&
+      node.property?.type === "Identifier"
+    ) {
+      keys.push(node.property.name);
+    }
+    // Also match styleFn calls: styles.key(...)
+    if (node?.type === "CallExpression") {
+      extractKey(node.callee);
+    }
+  };
+  if (call) {
+    for (const arg of call.arguments ?? []) {
+      extractKey(arg);
+    }
+  }
+  if (sxAttr) {
+    const expr = sxAttr.value?.expression;
+    if (expr?.type === "ArrayExpression") {
+      for (const el of expr.elements ?? []) {
+        extractKey(el);
+      }
+    } else {
+      extractKey(expr);
+    }
+  }
+  return keys;
+}
+
+/** Extracts attribute names from CSS attribute selector strings like '[aria-checked="true"]'. */
+function extractAttrNamesFromSelectors(selectors: Set<string>): Set<string> {
+  const names = new Set<string>();
+  // Match attribute names inside [...] brackets
+  const re = /\[([a-zA-Z][\w-]*)/g;
+  for (const sel of selectors) {
+    let m;
+    while ((m = re.exec(sel)) !== null) {
+      names.add(m[1]!);
+    }
+    re.lastIndex = 0;
+  }
+  return names;
+}
+
 function appendToMapList<K, V>(map: Map<K, V[]>, key: K, value: V): void {
   const list = map.get(key);
   if (list) {

src/internal/transform-context.ts

@@ -102,6 +102,8 @@ export class TransformContext {
   siblingMarkerKeys?: Set<string>;
   /** Parent style keys that need defaultMarker() (have at least one override without a scoped marker) */
   parentsNeedingDefaultMarker?: Set<string>;
+  /** Maps style key → set of CSS attribute selector strings used in ancestor attribute conditions */
+  ancestorAttrsByStyleKey?: Map<string, 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/lower-rules.ts

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

src/internal/transform-steps/post-process.ts

@@ -72,6 +72,7 @@ export function postProcessStep(ctx: TransformContext): StepResult {
     stylesIdentifier: ctx.stylesIdentifier,
     crossFileMarkers: ctx.crossFileMarkers,
     parentsNeedingDefaultMarker: ctx.parentsNeedingDefaultMarker,
+    ancestorAttrsByStyleKey: ctx.ancestorAttrsByStyleKey,
   });
   if (post.changed) {
     ctx.markChanged();

test-cases/selector-dataAttribute.output.tsx

@@ -7,16 +7,16 @@ export function App() {
         Visible
       </div>
       <div sx={[styles.box, styles.boxHidden]}>Hidden</div>
-      <div aria-checked="true">
+      <div aria-checked="true" sx={stylex.defaultMarker()}>
         <div sx={[styles.menuItem, styles.menuItemChecked]}>Checked</div>
       </div>
       <div>
         <div sx={[styles.menuItem, styles.menuItemDefault]}>Default</div>
       </div>
-      <div data-active="true">
+      <div data-active="true" sx={stylex.defaultMarker()}>
         <div sx={styles.indicator}>Active</div>
       </div>
-      <div data-state="active" data-size="lg">
+      <div data-state="active" data-size="lg" sx={stylex.defaultMarker()}>
         <div sx={styles.compoundItem}>Compound</div>
       </div>
     </div>