Cross-file selector transform (#340)

* fix: infer cross-file selector info in playground browser transform

The playground runs single-file transforms without cross-file prepass info,
causing cross-file selector test cases (e.g. selector-crossFileTwoParents)
to show 'Unsupported selector: unknown component selector' instead of
the correct transformation.

Add inferCrossFileInfo() that reuses the existing prepass helper functions
to detect imported identifiers used as selectors in styled templates and
synthesize CrossFileSelectorUsage entries. This allows the transform to
handle cross-file selectors correctly in the browser-only playground.

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>

* fix: make converted-collapse-icon fixture include bridge class and merge styles

The fixture simulating an already-converted StyleX component had two issues:

1. It did not include the bridge class (sc2sx-CollapseArrowIcon-a1b2c3d4) on
   its DOM element, so styled-components consumers targeting it via
   CollapseArrowIconGlobalSelector could never match.

2. It spread {...stylex.props(styles.base)} after {...props}, overwriting
   incoming className/style. This prevented StyleX consumers from passing
   override styles (like the ancestor-hover backgroundColor: rebeccapurple).

Fix: extract the bridge class as a const, apply it to the DOM element, and
properly merge incoming className/style with the component's base styles.

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: skovhus

playground/src/lib/browser-transform.ts

@@ -1,7 +1,18 @@
 import jscodeshift from "jscodeshift";
+import { parse } from "@babel/parser";
 import { transformWithWarnings } from "../../../src/transform";
 import type { Adapter } from "../../../src/adapter";
 import type { WarningLog } from "../../../src/internal/logger";
+import type { CrossFileInfo, CrossFileSelectorUsage } from "../../../src/internal/transform-types";
+import {
+  walkForImportsAndTemplates,
+  buildImportMapFromNodes,
+  findStyledImportNameFromNodes,
+  findCssImportNamesFromNodes,
+  findComponentSelectorLocalsFromNodes,
+  BARE_TEMPLATE_IDENTIFIER_RE,
+} from "../../../src/internal/prepass/scan-cross-file-selectors";
+import type { AstNode } from "../../../src/internal/prepass/prepass-parser";
 
 export type { WarningLog };
 
@@ -32,7 +43,80 @@ export function runTransform(
     report: () => {},
   };
 
-  const options = { adapter };
+  const crossFileInfo = inferCrossFileInfo(source);
+  const options = crossFileInfo ? { adapter, crossFileInfo } : { adapter };
 
   return transformWithWarnings(file, api, options);
 }
+
+/**
+ * Infer cross-file selector info from source code without filesystem access.
+ * Detects imported identifiers used as selectors in styled templates
+ * (e.g. `${CrossFileIcon} { ... }`) and synthesizes CrossFileSelectorUsage
+ * entries so the transform can handle them.
+ */
+function inferCrossFileInfo(source: string): CrossFileInfo | undefined {
+  if (!source.includes("styled-components")) {
+    return undefined;
+  }
+  if (!BARE_TEMPLATE_IDENTIFIER_RE.test(source)) {
+    return undefined;
+  }
+
+  let ast: AstNode;
+  try {
+    ast = parse(source, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"],
+    }) as unknown as AstNode;
+  } catch {
+    return undefined;
+  }
+
+  const program = (ast.program ?? ast) as AstNode;
+
+  const importNodes: AstNode[] = [];
+  const templateNodes: AstNode[] = [];
+  walkForImportsAndTemplates(program, importNodes, templateNodes);
+
+  const importMap = buildImportMapFromNodes(importNodes);
+  if (importMap.size === 0) {
+    return undefined;
+  }
+
+  const styledImportName = findStyledImportNameFromNodes(importNodes);
+  const cssImportNames = findCssImportNamesFromNodes(importNodes);
+  if (!styledImportName && cssImportNames.size === 0) {
+    return undefined;
+  }
+
+  const selectorLocals = findComponentSelectorLocalsFromNodes(
+    templateNodes,
+    styledImportName ?? "",
+    cssImportNames,
+  );
+  if (selectorLocals.size === 0) {
+    return undefined;
+  }
+
+  const usages: CrossFileSelectorUsage[] = [];
+  for (const localName of selectorLocals) {
+    const imp = importMap.get(localName);
+    if (!imp || imp.source === "styled-components") {
+      continue;
+    }
+
+    usages.push({
+      localName,
+      importSource: imp.source,
+      importedName: imp.importedName,
+      resolvedPath: `/synthetic/${imp.source}`,
+    });
+  }
+
+  if (usages.length === 0) {
+    return undefined;
+  }
+
+  return { selectorUsages: usages };
+}

test-cases/lib/converted-collapse-icon.tsx

@@ -1,7 +1,10 @@
 import * as React from "react";
 import * as stylex from "@stylexjs/stylex";
 
-// Already-converted StyleX component (simulates Run 1 output)
+// Already-converted StyleX component (simulates Run 1 output).
+// Includes bridge class + className/style merging so both unconverted
+// styled-components consumers and converted StyleX consumers can
+// override styles on this component's DOM element.
 export interface CollapseArrowIconProps extends React.ComponentProps<"div"> {}
 
 const styles = stylex.create({
@@ -14,9 +17,20 @@ const styles = stylex.create({
   },
 });
 
-export function CollapseArrowIcon(props: CollapseArrowIconProps) {
-  return <div {...props} {...stylex.props(styles.base)} />;
+const collapseArrowIconBridgeClass = "sc2sx-CollapseArrowIcon-a1b2c3d4";
+
+export function CollapseArrowIcon({ className, style, ...props }: CollapseArrowIconProps) {
+  const base = stylex.props(styles.base);
+  return (
+    <div
+      {...props}
+      className={[collapseArrowIconBridgeClass, base.className, className]
+        .filter(Boolean)
+        .join(" ")}
+      style={{ ...base.style, ...style }}
+    />
+  );
 }
 
 /** @deprecated Bridge selector for unconverted consumers — will be removed once all files are migrated. */
-export const CollapseArrowIconGlobalSelector = ".sc2sx-CollapseArrowIcon-a1b2c3d4";
+export const CollapseArrowIconGlobalSelector = `.${collapseArrowIconBridgeClass}`;