Support no-pseudo reverse and cross-component sibling selectors (#352)

* feat: support cross-component sibling and no-pseudo ancestor selectors

Implement two previously unimplemented selector patterns:

- `${Link}:focus-visible + &` (cross-component sibling combinator)
  → stylex.when.siblingBefore(":focus-visible", LinkMarker)
- `${Other} &` (component as ancestor without pseudo)
  → stylex.when.ancestor(":is(*)", OtherMarker)

Both use defineMarker() for the referenced component, reusing the
existing siblingMarkerNames/siblingMarkerParents → crossFileMarkers
pipeline for sidecar generation and JSX marker injection.

Move _unimplemented.selector-componentDescendant (uses CSS class
selectors) to _unsupported and create new implementable test case.

https://claude.ai/code/session_01X1Gxfz4reNWtojK37AJpsT

* fix: address PR review comments for cross-component selectors

- Bail on cross-file cross-component sibling selectors instead of silently proceeding
- Preserve media query context in cross-component sibling handler
- Fix marker assignment on pre-existing relation overrides
- Add eslint override for stylex.when.siblingBefore() computed keys
- Extend test cases to cover media queries and combined pseudo/no-pseudo patterns

https://claude.ai/code/session_01X1Gxfz4reNWtojK37AJpsT

* fix: bail on computed media queries inside sibling selectors

When resolveMediaAtRulePlaceholders() returns a computed media key (e.g.
from an imported breakpoint constant), both the cross-component sibling
handler and handleSiblingSelector were silently dropping the media guard
by setting media = undefined. This could cause styles to apply
unconditionally instead of respecting viewport constraints.

Now both handlers bail with a descriptive warning instead of silently
dropping the computed media condition.

https://claude.ai/code/session_01X1Gxfz4reNWtojK37AJpsT

* fix: always emit defaultMarker() alongside scoped markers

Scoped markers (from defineMarker) and defaultMarker() must coexist:
- Scoped markers enable targeted sibling/no-pseudo matching
- defaultMarker() enables regular pseudo-reverse selectors like
  stylex.when.ancestor(':hover') without an explicit marker arg

Previously, components registered in siblingMarkerKeys had their
defaultMarker() suppressed, breaking mixed scenarios where the same
component was both a sibling target and an ancestor reverse target.

Fixes both rewrite-jsx.ts (JSX marker injection) and style-merger.ts
(wrapper emission) to always include defaultMarker() for ancestor
selector parents.

https://claude.ai/code/session_01X1Gxfz4reNWtojK37AJpsT

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

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

---------

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

Author: skovhus

eslint.config.js

@@ -82,7 +82,10 @@ export default [
   {
     // Computed stylex.when.*() keys: rule reports "Keys must be strings"
     // for valid computed property keys like [stylex.when.siblingBefore(...)].
-    files: ["test-cases/selector-siblingMedia.output.tsx"],
+    files: [
+      "test-cases/selector-componentSiblingCombinator.output.tsx",
+      "test-cases/selector-siblingMedia.output.tsx",
+    ],
     rules: { "stylex/valid-styles": "off" },
   },
   {

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,
   });
 

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

@@ -72,7 +72,7 @@ export function emitStyleMerging(args: {
     | "emptyStyleKeys"
     | "ancestorSelectorParents"
     | "crossFileMarkers"
-    | "siblingMarkerKeys"
+    | "parentsNeedingDefaultMarker"
     | "emitTypes"
     | "useSxProp"
   >;
@@ -108,7 +108,7 @@ export function emitStyleMerging(args: {
     stylesIdentifier,
     ancestorSelectorParents,
     crossFileMarkers,
-    siblingMarkerKeys,
+    parentsNeedingDefaultMarker,
     emitTypes,
   } = emitter;
 
@@ -120,8 +120,9 @@ export function emitStyleMerging(args: {
   });
 
   // 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().
+  // Scoped markers (from defineMarker) and defaultMarker() coexist: the scoped marker
+  // enables targeted sibling/no-pseudo matching, while defaultMarker() enables regular
+  // pseudo-reverse selectors like `stylex.when.ancestor(':hover')` (no marker arg).
   if (ancestorSelectorParents && ancestorSelectorParents.size > 0) {
     let needsDefaultMarker = false;
     const pendingMarkers: ExpressionKind[] = [];
@@ -134,9 +135,10 @@ export function emitStyleMerging(args: {
       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)) {
+      // 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;
       }
     }

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");
   }

src/internal/logger.ts

@@ -94,13 +94,17 @@ export type WarningType =
   | "Unsupported selector: unresolved interpolation in descendant component selector"
   | "Unsupported selector: unresolved interpolation in element selector"
   | "Unsupported selector: unresolved interpolation in reverse component selector"
+  | "Unsupported selector: unresolved interpolation in cross-component sibling selector"
   | "Unsupported selector: grouped reverse selector references different components"
+  | "Unsupported selector: computed media query inside cross-component sibling selector"
+  | "Unsupported selector: computed media query inside sibling selector"
   | "Unsupported selector: unknown component selector"
   | "Unsupported css`` mixin: after-base mixin style is not a plain object"
   | "Unsupported css`` mixin: nested contextual conditions in after-base mixin"
   | "Unsupported css`` mixin: cannot infer base default for after-base contextual override (base value is non-literal)"
   | "css`` helper function interpolation references closure variable that cannot be hoisted"
   | "Sibling selector broadened: & + & (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match"
+  | "Sibling selector broadened: + (adjacent) becomes general sibling (~) in StyleX — interleaved non-matching elements will no longer block the match"
   | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead"
   | "styled(ImportedComponent) wraps a component whose file contains internal styled-components — convert the base component's file first to avoid CSS cascade conflicts"
   | "Transient $-prefixed props renamed on exported component — update consumer call sites to use the new prop names"

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,
   };
 }