feat(selector): support &:has(${Component}) same-file selectors (#370)

* feat(selector): support &:has(${Component}) same-file selectors

Transforms `&:has(${StyledIcon})` to `stylex.when.descendant(":is(*)", IconMarker)`,
enabling parent components to conditionally style themselves based on the presence
of a specific child component.

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

* fix(test): avoid shorthand/longhand conflict in selector-has test case

The previous test used `padding: 8px 16px` (expands to logical `paddingInline`)
with `&:has() { padding-right: 32px }` — the computed-key default lookup doesn't
resolve physical longhands from logical shorthands, causing `default: null`.
Changed to non-conflicting properties (background + color) instead.

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

* fix(computed-keys): resolve logical shorthand base values for physical longhands

When a computed-key override targets a physical longhand (e.g. paddingRight)
and the base style uses a logical shorthand (e.g. paddingInline from
`padding: 8px 16px`), the default value lookup now falls back to the
logical shorthand. Previously this produced `default: null`, losing the
base padding.

Restores the original selector-has test case with shorthand + longhand
pattern that exercises this fix.

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

* fix(selector): bail on compound :has() selectors like &:has(${Icon}):hover

The loose HAS_COMPONENT_SELECTOR_RE regex matched any selector containing
&:has(__SC_EXPR_N__), letting compound forms like &:has(${Icon}):hover bypass
the interpolated-pseudo bailout. This caused them to fall through into the
descendant-component handler, producing invalid output with unresolved
placeholders. Now uses the strict anchored regex so only exact &:has(${Component})
selectors are handled; compound forms correctly bail.

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

* fix(selector): normalize specificity hacks for :has() detection, bail on unresolvable media

Two review fixes:
- Use specificity-normalized selector for isHasPattern so &&:has(${Icon}) is
  correctly detected as a :has() pattern instead of falling through to the
  descendant-component handler
- Add state.markBail() in resolveMediaAndEmitComputedKeys when media query
  interpolation cannot resolve, preventing lossy transformation

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

---------

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

Author: skovhus

eslint.config.js

@@ -75,6 +75,7 @@ export default [
     // for valid computed property keys like [stylex.when.siblingBefore(...)].
     files: [
       "test-cases/selector-componentSiblingCombinator.output.tsx",
+      "test-cases/selector-has.output.tsx",
       "test-cases/selector-siblingMedia.output.tsx",
     ],
     rules: { "stylex/valid-styles": "off" },
@@ -97,5 +98,12 @@ export default [
     rules: { "stylex/valid-styles": "off" },
   },
 
+  {
+    // stylex.when.descendant(): `:has()` selectors have limited browser support
+    // but are valid and intentionally emitted by the codemod for same-file component selectors.
+    files: ["test-cases/selector-has.output.tsx"],
+    rules: { "stylex/no-lookahead-selectors": "off" },
+  },
+
   ...storybook.configs["flat/recommended"],
 ];

src/__tests__/transform.test.ts

@@ -5633,3 +5633,74 @@ export function App() {
     expect(result.code).not.toMatch(/\{\.\.\.stylex\.props\([^)]+\)\}\s*className=/);
   });
 });
+
+describe("compound :has() component selectors", () => {
+  it("should bail on &:has(${Component}):hover (compound pseudo + has)", () => {
+    const source = `
+import styled from "styled-components";
+
+const Icon = styled.span\`
+  color: blue;
+\`;
+
+const Button = styled.button\`
+  background: lightgray;
+
+  &:has(\${Icon}):hover {
+    background: lightyellow;
+  }
+\`;
+
+export const App = () => (
+  <div>
+    <Button>No icon</Button>
+    <Button>With icon <Icon>★</Icon></Button>
+  </div>
+);
+`;
+
+    const result = transformWithWarnings(
+      { source, path: "test.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: fixtureAdapter },
+    );
+
+    // Should bail — compound :has + pseudo is not supported
+    expect(result.code).toBeNull();
+  });
+
+  it("should handle &:has(${Component}) with specificity hack (&&:has)", () => {
+    const source = `
+import styled from "styled-components";
+
+const Icon = styled.span\`
+  color: blue;
+\`;
+
+const Button = styled.button\`
+  background: lightgray;
+
+  &&:has(\${Icon}) {
+    background: lightyellow;
+  }
+\`;
+
+export const App = () => (
+  <div>
+    <Button>No icon</Button>
+    <Button>With icon <Icon>★</Icon></Button>
+  </div>
+);
+`;
+
+    const result = transformWithWarnings(
+      { source, path: "test.tsx" },
+      { jscodeshift: j, j, stats: () => {}, report: () => {} },
+      { adapter: fixtureAdapter },
+    );
+
+    // Should transform (not bail) — && is a specificity hack normalized to &
+    expect(result.code).not.toBeNull();
+    expect(result.code).toContain("stylex.when.descendant");
+  });
+});

src/internal/logger.ts

@@ -98,6 +98,9 @@ export type WarningType =
   | "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: computed media query inside :has() component selector"
+  | "Unsupported selector: cross-file :has() component selector not yet supported"
+  | "Unsupported selector: unresolved interpolation in :has() component 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"