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>

Author: skovhus

src/__tests__/transform.test.ts

@@ -5633,3 +5633,39 @@ 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();
+  });
+});

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

@@ -248,7 +248,7 @@ export function processDeclRules(ctx: DeclProcessingState): void {
       const hasInterpolatedPseudo = /:[^\s{]*__SC_EXPR_\d+__/.test(selectorForAnalysis);
       // &:has(${Component}) has a placeholder inside :has() — not an interpolated pseudo.
       // Skip the interpolated-pseudo handler so it reaches the component selector path.
-      const isHasComponentSelector = HAS_COMPONENT_SELECTOR_RE.test(selectorForAnalysis);
+      const isHasComponentSelector = HAS_COMPONENT_SELECTOR_STRICT_RE.test(selectorForAnalysis);
 
       if (hasInterpolatedPseudo && !isHasComponentSelector) {
         // Handle interpolated pseudo selectors like `&:${highlight}`.
@@ -2283,8 +2283,6 @@ function extractCssTextFromNode(node: unknown): string | null {
   return null;
 }
 
-/** Descendant-has pattern (substring match): `&:has(__SC_EXPR_N__)` anywhere in selector */
-const HAS_COMPONENT_SELECTOR_RE = /&:has\(__SC_EXPR_\d+__\)/;
 /** Descendant-has pattern (full selector match): exactly `&:has(__SC_EXPR_N__)` */
 const HAS_COMPONENT_SELECTOR_STRICT_RE = /^&:has\(__SC_EXPR_\d+__\)\s*$/;