styled-components-to-stylex-codemod 0.0.49 → 0.0.51

package/dist/{run-prepass-BWQCThfh.mjs → run-prepass-CWnoXqI6.mjs}

@@ -1,290 +1,12 @@
-import { c as Logger, i as findImportSource, n as fileExports, o as resolveBarrelReExport, r as fileImportsFrom, s as resolveBarrelReExportBinding, t as walkAst } from "./ast-walk-DigTJqU7.mjs";
-import { i as extractStyledDefBasesFromSource, n as computeGlobalLeafKeys, r as extractStyledDefBasesFromAstProgram, t as createPrepassParser } from "./prepass-parser-CwdDzSgx.mjs";
-import { r as escapeRegex } from "./string-utils-DD9wdRHW.mjs";
-import { n as isTemplatePlaceholderInSelectorContext, r as PLACEHOLDER_RE, t as isSelectorContext } from "./selector-context-heuristic-LVizWWOR.mjs";
-import { a as mergeComponentPropUsage, n as createComponentPropUsageInfo, o as readStaticJsxLiteral, t as KNOWN_NON_ELEMENT_PROPS } from "./prop-usage-QtOSsKTr.mjs";
+import { a as findImportSource, c as resolveBarrelReExportBinding, i as fileImportsFrom, n as createPrepassParser, r as fileExports, s as resolveBarrelReExport, t as walkAst, u as Logger } from "./ast-walk-BOXS-DT7.mjs";
+import { n as extractStyledDefBasesFromAstProgram, r as extractStyledDefBasesFromSource, t as computeGlobalLeafKeys } from "./compute-leaf-set-ghdXvfbp.mjs";
+import { r as escapeRegex } from "./string-utils-BYTEHwNg.mjs";
+import { t as isSelectorContext } from "./selector-context-heuristic-LVizWWOR.mjs";
+import { _ as walkForImportsAndTemplates, a as mergeComponentPropUsage, c as BARE_TEMPLATE_IDENTIFIER_RE, d as categorizeSelectorUsages, f as collectStyledLocalBindingNames, g as findStyledImportNameFromNodes, h as findCssImportNamesFromNodes, l as applyBridgeFields, m as findComponentSelectorLocalsFromNodes, n as createComponentPropUsageInfo, o as readStaticJsxLiteral, p as deduplicateAndResolve, s as collectStylexExportNames, t as KNOWN_NON_ELEMENT_PROPS, u as buildImportMapFromNodes, v as addToSetMap } from "./prop-usage-SADzZJdX.mjs";
 import { relative, resolve } from "node:path";
 import { readFileSync, realpathSync } from "node:fs";
 import { execSync } from "node:child_process";
 import { createHash } from "node:crypto";
-//#region src/internal/utilities/collection-utils.ts
-/** Add a value to a Set stored in a Map, creating the Set if it doesn't exist. */
-function addToSetMap(map, key, value) {
-	let set = map.get(key);
-	if (!set) {
-		set = /* @__PURE__ */ new Set();
-		map.set(key, set);
-	}
-	set.add(value);
-}
-//#endregion
-//#region src/internal/prepass/scan-cross-file-selectors.ts
-/**
-* Pre-filter: matches any bare `${Identifier}` template expression.
-* Used to skip files that only contain arrow functions or member expressions
-* in template literals (e.g. `${props => ...}`, `${theme.color}`).
-*/
-const BARE_TEMPLATE_IDENTIFIER_RE = /\$\{\s*[a-zA-Z_$][\w$]*\s*\}/;
-/**
-* Categorize cross-file selector usages into marker sidecar and global selector bridge maps.
-*
-* Bridge usages (from already-converted files) are skipped — the consumer handles marker
-* generation via the forward selector handler, so no sidecar/bridge is needed on the target.
-*/
-function categorizeSelectorUsages(usages, componentsNeedingMarkerSidecar, componentsNeedingGlobalSelectorBridge) {
-	for (const usage of usages) {
-		if (usage.bridgeComponentName) continue;
-		if (usage.consumerIsTransformed) addToSetMap(componentsNeedingMarkerSidecar, usage.resolvedPath, usage.importedName);
-		addToSetMap(componentsNeedingGlobalSelectorBridge, usage.resolvedPath, usage.importedName);
-	}
-}
-/**
-* Regex matching bridge GlobalSelector export patterns (global for matchAll).
-* Matches both:
-*   - Old format: `export const XGlobalSelector = ".sc2sx-..."`
-*   - New format: `` export const XGlobalSelector = `.${xBridgeClass}` ``
-*/
-const BRIDGE_EXPORT_RE = /export\s+const\s+(\w+GlobalSelector)\s*=\s*(?:["']\.sc2sx-|`\.\$\{)/g;
-/**
-* Detect whether an imported name is a bridge GlobalSelector from an
-* already-converted StyleX file.
-*
-* Detection criteria (hybrid fast + safe):
-* 1. Variable name ends with "GlobalSelector" AND the stripped name starts uppercase
-* 2. Target file contains "@stylexjs/stylex" (string check, no parse)
-* 3. Target file has a matching `export const XGlobalSelector = ".sc2sx-"` pattern
-*
-* @returns The stripped component name (e.g., "CollapseArrowIcon" for
-*   "CollapseArrowIconGlobalSelector"), or null if not a bridge.
-*/
-function detectBridgeGlobalSelector(importedName, resolvedPath, readFile) {
-	if (!importedName.endsWith("GlobalSelector")) return null;
-	const stripped = importedName.slice(0, -14);
-	if (!stripped || !/^[A-Z]/.test(stripped)) return null;
-	const content = readFile(resolvedPath);
-	if (!content || !content.includes("@stylexjs/stylex")) return null;
-	let found = false;
-	for (const m of content.matchAll(BRIDGE_EXPORT_RE)) if (m[1] === importedName) {
-		found = true;
-		break;
-	}
-	if (!found) return null;
-	return stripped;
-}
-/**
-* If `importedName` is a bridge GlobalSelector, populate bridge fields on `usage`
-* and find the corresponding component import from the same source.
-*/
-function applyBridgeFields(usage, importedName, localName, resolvedPath, importMap, readFile) {
-	const bridgeName = detectBridgeGlobalSelector(importedName, resolvedPath, readFile);
-	if (!bridgeName) return;
-	usage.bridgeComponentName = bridgeName;
-	const imp = importMap.get(localName);
-	if (!imp) return;
-	let defaultImportLocal;
-	for (const [otherLocal, otherImp] of importMap) {
-		if (otherImp.source !== imp.source || otherLocal === localName) continue;
-		if (otherImp.importedName === bridgeName) {
-			usage.bridgeComponentLocalName = otherLocal;
-			defaultImportLocal = void 0;
-			break;
-		}
-		if (otherImp.importedName === "default" && defaultImportLocal === void 0) defaultImportLocal = otherLocal;
-	}
-	if (defaultImportLocal !== void 0) usage.bridgeComponentLocalName = defaultImportLocal;
-}
-/** Global version for matchAll/replace operations */
-const PLACEHOLDER_RE_G = new RegExp(PLACEHOLDER_RE.source, "g");
-/**
-* Walk the AST collecting ImportDeclaration and TaggedTemplateExpression nodes.
-*
-* Uses a targeted recursive walk — only descends into node types that can
-* contain these targets (skips type annotations, comments, etc.).
-*/
-function walkForImportsAndTemplates(node, imports, templates) {
-	if (!node || typeof node !== "object") return;
-	const n = node;
-	if (n.type === "ImportDeclaration") {
-		imports.push(n);
-		return;
-	}
-	if (n.type === "TaggedTemplateExpression") templates.push(n);
-	for (const key of Object.keys(n)) {
-		if (key === "type" || key === "start" || key === "end" || key === "loc") continue;
-		const val = n[key];
-		if (Array.isArray(val)) for (const child of val) walkForImportsAndTemplates(child, imports, templates);
-		else if (val && typeof val === "object" && val.type) walkForImportsAndTemplates(val, imports, templates);
-	}
-}
-/** Build a map of localName → import info from raw ImportDeclaration nodes. */
-function buildImportMapFromNodes(importNodes) {
-	const map = /* @__PURE__ */ new Map();
-	for (const node of importNodes) {
-		const sourceValue = node.source?.value;
-		if (typeof sourceValue !== "string") continue;
-		const specifiers = node.specifiers;
-		if (!specifiers) continue;
-		for (const spec of specifiers) {
-			const localName = getNodeName(spec.local);
-			if (!localName) continue;
-			if (spec.type === "ImportDefaultSpecifier") map.set(localName, {
-				source: sourceValue,
-				importedName: "default"
-			});
-			else if (spec.type === "ImportNamespaceSpecifier") map.set(localName, {
-				source: sourceValue,
-				importedName: "*"
-			});
-			else if (spec.type === "ImportSpecifier") {
-				const importedName = getNodeName(spec.imported) ?? localName;
-				map.set(localName, {
-					source: sourceValue,
-					importedName
-				});
-			}
-		}
-	}
-	return map;
-}
-/**
-* Local identifiers that refer to `styled` from `"styled-components"` (default and/or
-* `import { styled }` / `import { styled as sc }`).
-*/
-function collectStyledLocalBindingNames(importNodes) {
-	const names = /* @__PURE__ */ new Set();
-	for (const node of importNodes) {
-		if (node.source?.value !== "styled-components") continue;
-		const specifiers = node.specifiers;
-		if (!specifiers) continue;
-		for (const spec of specifiers) if (spec.type === "ImportDefaultSpecifier") {
-			const name = getNodeName(spec.local);
-			if (name) names.add(name);
-		} else if (spec.type === "ImportSpecifier") {
-			if (getNodeName(spec.imported) === "styled") {
-				const localName = getNodeName(spec.local);
-				if (localName) names.add(localName);
-			}
-		}
-	}
-	return names;
-}
-/** Find the local name for the styled-components default import. */
-function findStyledImportNameFromNodes(importNodes) {
-	let namedStyledLocal;
-	for (const node of importNodes) {
-		if (node.source?.value !== "styled-components") continue;
-		const specifiers = node.specifiers;
-		if (!specifiers) continue;
-		for (const spec of specifiers) if (spec.type === "ImportDefaultSpecifier") {
-			const name = getNodeName(spec.local);
-			if (name) return name;
-		} else if (spec.type === "ImportSpecifier") {
-			if (getNodeName(spec.imported) === "styled") {
-				const localName = getNodeName(spec.local);
-				if (localName) namedStyledLocal = localName;
-			}
-		}
-	}
-	return namedStyledLocal;
-}
-/**
-* Find local names of `css` imported from styled-components.
-* Handles aliased imports like `import { css as sc } from "styled-components"`.
-*/
-function findCssImportNamesFromNodes(importNodes) {
-	const names = /* @__PURE__ */ new Set();
-	for (const node of importNodes) {
-		if (node.source?.value !== "styled-components") continue;
-		const specifiers = node.specifiers;
-		if (!specifiers) continue;
-		for (const spec of specifiers) if (spec.type === "ImportSpecifier") {
-			if (getNodeName(spec.imported) === "css") {
-				const localName = getNodeName(spec.local);
-				if (localName) names.add(localName);
-			}
-		}
-	}
-	return names;
-}
-/**
-* Find local names of imported components used as selectors inside
-* styled-components template literals (both `styled` and `css` tagged templates).
-*/
-function findComponentSelectorLocalsFromNodes(templateNodes, styledImportName, cssImportNames) {
-	const selectorLocals = /* @__PURE__ */ new Set();
-	for (const node of templateNodes) {
-		if (!isStyledTag(node.tag, styledImportName) && !isCssTag(node.tag, cssImportNames)) continue;
-		const quasi = node.quasi;
-		if (!quasi) continue;
-		const quasis = quasi.quasis;
-		const expressions = quasi.expressions;
-		if (!quasis || !expressions) continue;
-		const rawParts = [];
-		for (let i = 0; i < quasis.length; i++) {
-			const value = quasis[i]?.value;
-			rawParts.push(value?.raw ?? "");
-			if (i < expressions.length) rawParts.push(`__SC_EXPR_${i}__`);
-		}
-		const rawCss = rawParts.join("");
-		for (const match of rawCss.matchAll(PLACEHOLDER_RE_G)) {
-			const exprIndex = Number(match[1]);
-			const pos = match.index;
-			if (isTemplatePlaceholderInSelectorContext(rawCss, pos, match[0].length)) {
-				const expr = expressions[exprIndex];
-				if (expr?.type === "Identifier" && typeof expr.name === "string") selectorLocals.add(expr.name);
-			}
-		}
-	}
-	return selectorLocals;
-}
-/**
-* Check whether a styled-components tag expression is a styled call.
-* Matches: styled.div, styled(X), styled.div.attrs(...), styled(X).withConfig(...), etc.
-*/
-function isStyledTag(tag, styledName) {
-	if (!tag || typeof tag !== "object") return false;
-	if (tag.type === "MemberExpression") {
-		const obj = tag.object;
-		if (obj?.type === "Identifier" && obj.name === styledName) return true;
-	}
-	if (tag.type === "CallExpression") {
-		const callee = tag.callee;
-		if (callee?.type === "Identifier" && callee.name === styledName) return true;
-		if (callee?.type === "MemberExpression" && callee.object) return isStyledTag(callee.object, styledName);
-	}
-	return false;
-}
-/** Check if a template tag is the `css` helper from styled-components. */
-function isCssTag(tag, cssImportNames) {
-	if (!tag || !cssImportNames || cssImportNames.size === 0) return false;
-	return tag.type === "Identifier" && typeof tag.name === "string" && cssImportNames.has(tag.name);
-}
-/** Safely extract the name string from an AST identifier-like node. */
-function getNodeName(node) {
-	if (!node || typeof node !== "object") return;
-	if (node.type === "Identifier" && typeof node.name === "string") return node.name;
-}
-/** Deduplicate and resolve two file lists into a single array of absolute paths. */
-function deduplicateAndResolve(filesToTransform, consumerPaths) {
-	const seen = /* @__PURE__ */ new Set();
-	const result = [];
-	for (const f of filesToTransform) {
-		const abs = resolve(f);
-		if (!seen.has(abs)) {
-			seen.add(abs);
-			result.push(abs);
-		}
-	}
-	for (const f of consumerPaths) {
-		const abs = resolve(f);
-		if (!seen.has(abs)) {
-			seen.add(abs);
-			result.push(abs);
-		}
-	}
-	return result;
-}
-//#endregion
 //#region src/internal/prepass/run-prepass.ts
 /**
 * Unified prepass: single pass for both cross-file selector scanning
@@ -354,6 +76,7 @@ async function runPrepass(options) {
 	const refUsages = /* @__PURE__ */ new Map();
 	const styledCallUsages = [];
 	const styledDefFiles = /* @__PURE__ */ new Map();
+	const stylexComponentFiles = /* @__PURE__ */ new Map();
 	const classNameStyleUsages = /* @__PURE__ */ new Map();
 	const classNameUsages = /* @__PURE__ */ new Map();
 	const styleUsages = /* @__PURE__ */ new Map();
@@ -385,7 +108,8 @@ async function runPrepass(options) {
 		const hasStyled = source.includes("styled-components");
 		const hasAsProp = createExternalInterface && AS_PROP_RE.test(source);
 		const hasRefProp = createExternalInterface && REF_PROP_RE.test(source);
-		if (!hasStyled && !hasAsProp && !hasRefProp) continue;
+		const hasStylex = source.includes("@stylexjs/stylex") || /\.stylex["']/.test(source);
+		if (!hasStyled && !hasAsProp && !hasRefProp && !hasStylex) continue;
 		fileContents.set(filePath, source);
 		if (hasStyled && BARE_TEMPLATE_IDENTIFIER_RE.test(source) && hasRegexSelectorCandidate(source)) {
 			const usages = scanFileForSelectorsAst(filePath, source, transformSet, resolver, parser, toRealPath, cachedRead, astCache, createExternalInterface);
@@ -398,6 +122,10 @@ async function runPrepass(options) {
 			STYLED_DEF_RE.lastIndex = 0;
 			for (const m of source.matchAll(STYLED_DEF_RE)) if (m[1]) addToSetMap(styledDefFiles, filePath, m[1]);
 		}
+		if (hasStylex) {
+			const stylexExportNames = collectStylexExportNames(source);
+			if (stylexExportNames.size > 0) stylexComponentFiles.set(filePath, stylexExportNames);
+		}
 		if ((createExternalInterface || enableTypeScriptAnalysis) && hasStyled) {
 			STYLED_CALL_RE.lastIndex = 0;
 			for (const m of source.matchAll(STYLED_CALL_RE)) if (m[1]) styledCallUsages.push({
@@ -612,6 +340,7 @@ async function runPrepass(options) {
 		componentsNeedingGlobalSelectorBridge,
 		propUsageByFile,
 		styledDefFiles: createExternalInterface ? styledDefFiles : void 0,
+		stylexComponentFiles,
 		globalLeafKeys
 	};
 	{
@@ -1221,14 +950,14 @@ function scanFileForSelectorsAst(filePath, source, transformSet, resolver, parse
 	return usages;
 }
 /**
-* Use ripgrep to quickly find files containing "styled-components" or `as[={]`.
+* Use ripgrep to quickly find files containing styled-components, StyleX, or relevant JSX props.
 * Returns a Set of absolute file paths, or undefined if rg is not available.
 */
 function rgPreFilter(files) {
 	const dirs = deduplicateParentDirs(files);
 	if (dirs.length === 0) return;
 	try {
-		const pattern = String.raw`(styled-components|\bas[={]|\bref[={])`;
+		const pattern = String.raw`(styled-components|@stylexjs/stylex|\.stylex["']|\bas[={]|\bref[={])`;
 		const globArgs = [
 			"*.tsx",
 			"*.ts",

package/dist/{string-utils-DD9wdRHW.mjs → string-utils-BYTEHwNg.mjs}

@@ -67,13 +67,13 @@ function looksLikeLength(token) {
 	return /^-?\d*\.?\d+(px|rem|em|vh|vw|vmin|vmax|ch|ex|lh|svh|svw|dvh|dvw|cqw|cqh|%)?$/.test(token);
 }
 /**
-* Checks if a CSS value appears to be a background image (gradient or url).
+* Checks if a CSS value appears to be a background image.
 * @example isBackgroundImageValue("linear-gradient(red, blue)") => true
 * @example isBackgroundImageValue("url(image.png)") => true
 * @example isBackgroundImageValue("#fff") => false
 */
 function isBackgroundImageValue(value) {
-	return /\b(linear|radial|conic|repeating-linear|repeating-radial|repeating-conic)-gradient\b/.test(value) || /\burl\s*\(/.test(value);
+	return /\b(linear|radial|conic|repeating-linear|repeating-radial|repeating-conic)-gradient\b/.test(value) || /\burl\s*\(/.test(value) || /\b(-webkit-)?(image|image-set|cross-fade|element|paint)\s*\(/.test(value);
 }
 /**
 * Returns true when a `background` shorthand value is structurally simple

package/dist/{sx-surface-BzqO3hcC.mjs → sx-surface-CEPFSTO1.mjs}

@@ -37,6 +37,7 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 	const resolveSelector = obj?.resolveSelector;
 	const resolveBaseComponent = obj?.resolveBaseComponent;
 	const externalInterface = obj?.externalInterface;
+	const usePhysicalProperties = obj?.usePhysicalProperties;
 	if (!candidate || typeof candidate !== "object") throw new Error([
 		`${where}: expected an adapter object.`,
 		`Received: ${describeValue(candidate)}`,
@@ -111,6 +112,13 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
 	].join("\n"));
 	if (!(typeof externalInterface === "function" || allowAutoExtIf && externalInterface === "auto")) throw new Error([`${where}: ${allowAutoExtIf ? "adapter.externalInterface must be a function or \"auto\"." : "adapter.externalInterface must be a function."}`, `Received: externalInterface=${describeValue(externalInterface)}`].join("\n"));
+	if (typeof usePhysicalProperties !== "boolean") throw new Error([
+		`${where}: adapter.usePhysicalProperties must be explicitly set to true or false.`,
+		`Received: usePhysicalProperties=${describeValue(usePhysicalProperties)}`,
+		"",
+		"Set `usePhysicalProperties: true` to emit physical padding/margin longhands,",
+		"or `usePhysicalProperties: false` to emit logical block/inline properties."
+	].join("\n"));
 	const styleMerger = obj?.styleMerger;
 	if (styleMerger !== null && styleMerger !== void 0) {
 		if (typeof styleMerger !== "object") throw new Error([
@@ -273,8 +281,8 @@ const DEFAULT_THEME_HOOK = {
 *     // Emit sx={} JSX attributes instead of {...stylex.props()} spreads (requires StyleX ≥0.18)
 *     useSxProp: false,
 *
-*     // Opt out of logical properties — use paddingTop/Right/Bottom/Left instead of Block/Inline
-*     // usePhysicalProperties: true,
+*     // Choose how 2-value padding/margin shorthands are expanded.
+*     usePhysicalProperties: true,
 *
 *     // Optional: customize runtime theme hook import/call used by emitted wrappers
 *     themeHook: {

package/dist/{transform-types-CHRHLCj_.d.mts → transform-types-BIv4-1OO.d.mts}

@@ -799,16 +799,14 @@ interface Adapter {
   useSxProp: boolean;
   /**
    * Use physical CSS properties (`paddingTop`/`paddingRight`/`paddingBottom`/`paddingLeft`)
-   * instead of logical properties (`paddingBlock`/`paddingInline`) when expanding
-   * 2-value CSS shorthands like `padding: 4px 8px`.
+   * when expanding 2-value CSS shorthands like `padding: 4px 8px`.
    *
-   * By default, the codemod uses logical properties which adapt to the writing direction
-   * (RTL/LTR), matching StyleX's ESLint plugin recommendations. Enable this if your
-   * codebase needs RTL support or prefer physical properties.
-   *
-   * @default false
+   * Set this explicitly. Use `true` to preserve CSS shorthand semantics and avoid
+   * StyleX property-specificity conflicts during migration. Use `false` only if
+   * your codebase intentionally wants logical properties (`paddingBlock`/`paddingInline`)
+   * for 2-value shorthand output.
    */
-  usePhysicalProperties?: boolean;
+  usePhysicalProperties: boolean;
   /**
    * Optional override for sx-aware wrapped component detection.
    *
@@ -879,7 +877,7 @@ interface AdapterInput {
   styleMerger: Adapter["styleMerger"];
   themeHook?: Adapter["themeHook"];
   useSxProp: Adapter["useSxProp"];
-  usePhysicalProperties?: Adapter["usePhysicalProperties"];
+  usePhysicalProperties: Adapter["usePhysicalProperties"];
   wrappedComponentInterface?: Adapter["wrappedComponentInterface"];
   markerFile?: Adapter["markerFile"];
 }
@@ -947,8 +945,8 @@ interface AdapterInput {
  *     // Emit sx={} JSX attributes instead of {...stylex.props()} spreads (requires StyleX ≥0.18)
  *     useSxProp: false,
  *
- *     // Opt out of logical properties — use paddingTop/Right/Bottom/Left instead of Block/Inline
- *     // usePhysicalProperties: true,
+ *     // Choose how 2-value padding/margin shorthands are expanded.
+ *     usePhysicalProperties: true,
  *
  *     // Optional: customize runtime theme hook import/call used by emitted wrappers
  *     themeHook: {
@@ -961,7 +959,7 @@ declare function defineAdapter<T extends AdapterInput>(adapter: T): T;
 //#endregion
 //#region src/internal/logger.d.ts
 type Severity = "info" | "warning" | "error";
-type WarningType = "`css` helper function switch must return css templates in all branches" | "`css` helper usage as a function call (css(...)) is not supported" | "`css` helper used outside of a styled component template cannot be statically transformed" | "Adapter helper call in border interpolation did not resolve to a single CSS value" | "Adapter resolveCall returned an unparseable styles expression" | "Adapter resolveCall returned an unparseable value expression" | "Adapter resolveCall returned StyleX styles for helper call where a CSS value was expected" | "Adapter resolved an imported helper call as StyleX styles without replacing the RuleSet helper" | "Adapter resolveCall returned undefined for helper call" | "Adapter resolveBaseComponent threw an error" | "Adapter resolved StyleX styles cannot be applied under nested selectors/at-rules" | "Adapter resolved StyleX styles inside pseudo selector but did not provide cssText for property expansion — add cssText to resolveCall result to enable pseudo-wrapping" | 'Adapter resolveCall cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | "Adapter resolveValue returned an unparseable value expression" | "Adapter resolveValue returned undefined for imported value" | "Arrow function: body is not a recognized pattern (expected ternary, logical, call, or member expression)" | "Arrow function: conditional branches could not be resolved to static or theme values" | "Arrow function: helper call body is not supported" | "Arrow function: indexed theme lookup pattern not matched" | "Arrow function: logical expression pattern not supported" | "Arrow function: prop access cannot be converted to style function for this CSS property" | "Arrow function: theme access path could not be resolved" | "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required" | "Conditional `css` block: !important is not supported in StyleX" | "Conditional `css` block: unsupported or mixed @-rules require manual handling" | "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)" | "Conditional `css` block: dynamic interpolation could not be resolved to a single component prop" | "Conditional `css` block: failed to parse expression" | "Conditional `css` block: missing CSS property name" | "Conditional `css` block: missing interpolation expression" | "Conditional `css` block: mixed static/dynamic values with non-theme expressions cannot be safely transformed" | "Conditional `css` block: multiple interpolation slots in a single property value" | "Conditional `css` block: runtime pseudo-alias styles are not supported" | "Conditional `css` block: ternary branch value could not be resolved (imported values require adapter support)" | "Conditional `css` block: ternary expressions inside pseudo selectors are not supported" | "Conditional `css` block: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Conditional `css` block: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "Resolved border helper value could not be expanded to longhand properties" | "Resolved conditional border variant could not be expanded to longhand properties" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Failed to parse theme expressions" | "Heterogeneous background values (mix of gradients and colors) not currently supported" | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported" | "Imported CSS helper mixins: cannot determine inherited properties for correct pseudo selector handling" | "Local helper function returns CSS that cannot be decomposed into individual properties" | "Local helper function computes CSS values that cannot be statically traced to the component prop" | "Unsupported background shorthand: multiple components cannot be mapped to a single StyleX longhand" | "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX" | "Theme-dependent block-level conditional could not be fully resolved (branches may contain dynamic interpolations)" | "Theme-dependant call expression could not be resolved (e.g. theme helper calls like theme.highlight() are not supported)" | "Theme value with fallback (props.theme.X ?? / || default) cannot be resolved statically — use adapter.resolveValue to map theme paths to StyleX tokens" | "Theme-dependent nested prop access requires a project-specific theme source (e.g. useTheme())" | "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())" | "Theme prop overrides on styled components are not supported" | "Universal selectors (`*`) are currently unsupported" | "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))" | "Unsupported conditional test in shouldForwardProp" | "Unsupported .attrs() callback pattern" | "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)" | "Unsupported interpolation: arrow function" | "Unsupported interpolation: call expression" | "Unsupported interpolation: identifier" | "Unsupported interpolation: member expression" | "Unsupported interpolation: property" | "Unsupported interpolation: unknown" | `Unsupported CSS property "${string}" cannot be emitted in StyleX` | "Unsupported nested conditional interpolation" | "Unsupported prop-based inline style expression cannot be safely inlined" | "Unsupported prop-based inline style props.theme access is not supported" | "Unsupported selector interpolation: imported value in selector position" | "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Unsupported selector: class selector" | "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements" | "Unsupported selector: descendant pseudo selector (space before pseudo)" | "Unsupported selector: adjacent sibling combinator" | "Unsupported selector: descendant/child/sibling selector" | "Unsupported selector: conditional css block inside pseudo-element selector" | "Unsupported selector: interpolated pseudo selector" | "Unsupported selector: pseudo-class on pseudo-element selector" | "Unsupported selector: unsupported pseudo-element" | "Unsupported selector: sibling combinator" | "Unsupported selector: unresolved interpolation in sibling selector" | "Unsupported selector: ambiguous element selector" | "Unsupported selector: attribute selector on unsupported element" | "Unsupported selector: element selector on exported component" | "Unsupported selector: element selector with combined ancestor and child pseudos" | "Unsupported selector: element selector with dynamic children" | "Unsupported selector: element selector with plain intrinsic children" | "Unsupported selector: element selector pseudo collision" | "Unsupported selector: cross-file component selector target has no JSX usage in this file" | "Unsupported selector: unresolved interpolation in cross-file component selector" | "Unsupported selector: unresolved interpolation in descendant component selector" | "Unsupported selector: unresolved interpolation in attribute 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 ancestor attribute selector" | "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 selector: component selector with child pseudo" | "Unsupported selector: component selector target has no patchable JSX usage under selector parent" | "Unsupported selector: compound pseudo 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" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file uses styled-components — convert the base component's file first to avoid CSS cascade conflicts" | "Partial transform would have a StyleX leaf wrap a styled-components base — the extending component was transformed but its base was not, so the leaf's StyleX overrides cannot reliably beat the base's styled-components styles" | "Conditional StyleX default would override an unproven earlier style for the same property" | "Forwarded sx conditional default would override an unproven wrapped component base style" | "Wrapped component does not accept className or sx for generated StyleX styles" | "Wrapped component sx prop targets an inner element for a root style property" | "Wrapped component sx prop rejects logical CSS properties that cannot be preserved losslessly" | "Wrapped component sx prop does not accept generated StyleX property" | "Transient $-prefixed props renamed on exported component — update consumer call sites to use the new prop names" | "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens" | "animation shorthand contains a var() with no classifiable fallback — its longhand position cannot be determined statically; bind the variable to a specific longhand (e.g. animation-duration: var(--x)) instead";
+type WarningType = "`css` helper function switch must return css templates in all branches" | "`css` helper usage as a function call (css(...)) is not supported" | "`css` helper used outside of a styled component template cannot be statically transformed" | "Adapter helper call in border interpolation did not resolve to a single CSS value" | "Adapter resolveCall returned an unparseable styles expression" | "Adapter resolveCall returned an unparseable value expression" | "Adapter resolveCall returned StyleX styles for helper call where a CSS value was expected" | "Adapter resolved an imported helper call as StyleX styles without replacing the RuleSet helper" | "Adapter resolveCall returned undefined for helper call" | "Adapter resolveBaseComponent threw an error" | "Adapter resolved StyleX styles cannot be applied under nested selectors/at-rules" | "Adapter resolved StyleX styles inside pseudo selector but did not provide cssText for property expansion — add cssText to resolveCall result to enable pseudo-wrapping" | "Adapter resolved imported StyleX value under nested selectors/at-rules but did not provide cssText for property expansion — add cssText to resolveValue result to enable pseudo-wrapping" | 'Adapter resolveCall cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | 'Adapter resolveValue cssText could not be parsed as CSS declarations — expected semicolon-separated property: value pairs (e.g. "white-space: nowrap; overflow: hidden;")' | "Adapter resolveValue returned an unparseable value expression" | "Adapter resolveValue returned undefined for imported value" | "Arrow function: body is not a recognized pattern (expected ternary, logical, call, or member expression)" | "Arrow function: conditional branches could not be resolved to static or theme values" | "Arrow function: helper call body is not supported" | "Arrow function: indexed theme lookup pattern not matched" | "Arrow function: logical expression pattern not supported" | "Arrow function: prop access cannot be converted to style function for this CSS property" | "Arrow function: theme access path could not be resolved" | "Component selectors like `${OtherComponent}:hover &` are not directly representable in StyleX. Manual refactor is required" | "Conditional `css` block: !important is not supported in StyleX" | "Conditional `css` block: unsupported or mixed @-rules require manual handling" | "CSS block contains unsupported at-rule (only @media, @container, and @supports are supported; mixed nested at-rules require manual handling)" | "Conditional `css` block: dynamic interpolation could not be resolved to a single component prop" | "Conditional `css` block: failed to parse expression" | "Conditional `css` block: missing CSS property name" | "Conditional `css` block: missing interpolation expression" | "Conditional `css` block: mixed static/dynamic values with non-theme expressions cannot be safely transformed" | "Conditional `css` block: multiple interpolation slots in a single property value" | "Conditional `css` block: finite ternary before a later overlapping declaration requires manual source-order handling" | "Conditional `css` block: runtime pseudo-alias styles are not supported" | "Conditional `css` block: ternary branch value could not be resolved (imported values require adapter support)" | "Conditional `css` block: ternary expressions inside pseudo selectors are not supported" | "Conditional `css` block: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Conditional `css` block: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "Resolved border helper value could not be expanded to longhand properties" | "Resolved conditional border variant could not be expanded to longhand properties" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Failed to parse theme expressions" | "Heterogeneous background values (mix of gradients and colors) not currently supported" | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported" | "Imported CSS helper mixins: cannot determine inherited properties for correct pseudo selector handling" | "Local helper function returns CSS that cannot be decomposed into individual properties" | "Local helper function computes CSS values that cannot be statically traced to the component prop" | "Unsupported background shorthand: multiple components cannot be mapped to a single StyleX longhand" | "Styled-components specificity hacks like `&&` / `&&&` are not representable in StyleX" | "Theme-dependent block-level conditional could not be fully resolved (branches may contain dynamic interpolations)" | "Theme-dependant call expression could not be resolved (e.g. theme helper calls like theme.highlight() are not supported)" | "Theme value with fallback (props.theme.X ?? / || default) cannot be resolved statically — use adapter.resolveValue to map theme paths to StyleX tokens" | "Theme-dependent nested prop access requires a project-specific theme source (e.g. useTheme())" | "Theme-dependent template literals require a project-specific theme source (e.g. useTheme())" | "Theme prop overrides on styled components are not supported" | "Universal selectors (`*`) are currently unsupported" | "Unsupported call expression (expected imported helper(...) or imported helper(...)(...))" | "Unsupported conditional test in shouldForwardProp" | "Unsupported .attrs() callback pattern" | "Unsupported shouldForwardProp pattern (only !prop.startsWith(), ![].includes(prop), and prop !== are supported)" | "Unsupported interpolation: arrow function" | "Unsupported interpolation: call expression" | "Unsupported interpolation: identifier" | "Unsupported interpolation: member expression" | "Unsupported interpolation: property" | "Unsupported interpolation: unknown" | `Unsupported CSS property "${string}" cannot be emitted in StyleX` | "Unsupported nested conditional interpolation" | "Unsupported prop-based inline style expression cannot be safely inlined" | "Unsupported prop-based inline style props.theme access is not supported" | "Unsupported selector interpolation: imported value in selector position" | "Unsupported: media query interpolation must be a simple imported reference (expressions like `value + 1` are not supported)" | "Unsupported selector: class selector" | "Unsupported selector: comma-separated selectors must all be simple pseudos or pseudo-elements" | "Unsupported selector: descendant pseudo selector (space before pseudo)" | "Unsupported selector: adjacent sibling combinator" | "Unsupported selector: descendant/child/sibling selector" | "Unsupported selector: conditional css block inside pseudo-element selector" | "Unsupported selector: interpolated pseudo selector" | "Unsupported selector: pseudo-class on pseudo-element selector" | "Unsupported selector: unsupported pseudo-element" | "Unsupported selector: sibling combinator" | "Unsupported selector: unresolved interpolation in sibling selector" | "Unsupported selector: ambiguous element selector" | "Unsupported selector: attribute selector on unsupported element" | "Unsupported selector: element selector on exported component" | "Unsupported selector: element selector with combined ancestor and child pseudos" | "Unsupported selector: element selector with dynamic children" | "Unsupported selector: element selector with plain intrinsic children" | "Unsupported selector: element selector pseudo collision" | "Unsupported selector: cross-file component selector target has no JSX usage in this file" | "Unsupported selector: unresolved interpolation in cross-file component selector" | "Unsupported selector: unresolved interpolation in descendant component selector" | "Unsupported selector: unresolved interpolation in attribute 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 ancestor attribute selector" | "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 selector: component selector with child pseudo" | "Unsupported selector: component selector target has no patchable JSX usage under selector parent" | "Unsupported selector: compound pseudo 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" | "Using styled-components components as mixins is not supported; use css`` mixins or strings instead" | "styled(ImportedComponent) wraps a component whose file uses styled-components — convert the base component's file first to avoid CSS cascade conflicts" | "Partial transform would have a StyleX leaf wrap a styled-components base — the extending component was transformed but its base was not, so the leaf's StyleX overrides cannot reliably beat the base's styled-components styles" | "Conditional StyleX default would override an unproven earlier style for the same property" | "Flat StyleX value would erase earlier conditional property states" | "Forwarded sx conditional default would override an unproven wrapped component base style" | "Wrapped component does not accept className or sx for generated StyleX styles" | "Wrapped component sx prop targets an inner element for a root style property" | "Wrapped component sx prop rejects logical CSS properties that cannot be preserved losslessly" | "Wrapped component sx prop does not accept generated StyleX property" | "Transient $-prefixed props renamed on exported component — update consumer call sites to use the new prop names" | "Shorthand property has an opaque value that StyleX will expand to longhands — use `directional` in resolveValue to return separate longhand tokens" | "animation shorthand contains a var() with no classifiable fallback — its longhand position cannot be determined statically; bind the variable to a specific longhand (e.g. animation-duration: var(--x)) instead";
 interface WarningLog {
   severity: Severity;
   type: WarningType;
@@ -1056,6 +1054,8 @@ interface TransformResult {
   bridgeResults?: BridgeComponentResult[];
   /** Transient prop renames for exported components, keyed by export name. */
   transientPropRenames?: TransientPropRenameResult[];
+  /** Local styled component names that were actually converted in this file. */
+  transformedComponentNames?: string[];
   localStylexVarsSidecarFile?: LocalStylexVarsSidecarFile;
 }
 /** Describes a transient prop rename on an exported component for consumer patching. */
@@ -1130,10 +1130,14 @@ interface CrossFileInfo {
   propUsageByComponent?: Map<string, ComponentPropUsageInfo>;
   /** Global map: files that define styled-components → set of local names. Used for cascade conflict detection. */
   styledDefFiles?: Map<string, Set<string>>;
+  /** Global map: files that export components already using StyleX → set of export names. */
+  stylexComponentFiles?: Map<string, Set<string>>;
   /** Global leaf keys from prepass when leaves-only mode is enabled. */
   globalLeafKeys?: Set<string>;
   /** Files successfully converted in the current transform run. Used to avoid bailing on same-run bases. */
   transformedFiles?: Set<string>;
+  /** File → local styled component names successfully converted in the current transform run. */
+  transformedComponents?: Map<string, Set<string>>;
   /** Opt-in TypeScript compiler metadata from the prepass. */
   typeScriptMetadata?: TypeScriptPrepassMetadata;
 }

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { i as TransformResult, r as TransformOptions, t as BridgeComponentResult } from "./transform-types-CHRHLCj_.mjs";
+import { i as TransformResult, r as TransformOptions, t as BridgeComponentResult } from "./transform-types-BIv4-1OO.mjs";
 import { API, FileInfo, Options } from "jscodeshift";
 
 //#region src/transform.d.ts