styled-components-to-stylex-codemod 0.0.21 → 0.0.23

package/README.md

@@ -34,6 +34,8 @@ const adapter = defineAdapter({
   },
   // Optional: use a helper for merging StyleX styles with external className/style
   styleMerger: null,
+  // Emit sx={} JSX attributes instead of {...stylex.props()} spreads (requires StyleX ≥0.18)
+  useSxProp: false,
   // Optional: customize the runtime theme hook import/call used for theme conditionals
   // Defaults to { functionName: "useTheme", importSource: { kind: "specifier", value: "styled-components" } }
   themeHook: {
@@ -164,6 +166,12 @@ const adapter = defineAdapter({
     importSource: { kind: "specifier", value: "./lib/mergedSx" },
   },
 
+  /**
+   * Emit sx={} JSX attributes instead of {...stylex.props()} spreads.
+   * Requires @stylexjs/babel-plugin ≥0.18 with sxPropName enabled.
+   */
+  useSxProp: false,
+
   /**
    * Optional: customize the runtime theme hook used when wrappers need theme booleans.
    * Defaults to useTheme from styled-components.

package/dist/{forwarded-as-consumer-patcher-GPnjkzc_.mjs → forwarded-as-consumer-patcher-CIOAJ-51.mjs}

@@ -1,4 +1,4 @@
-import { n as escapeRegex } from "./string-utils-Dmym5IkG.mjs";
+import { n as escapeRegex } from "./string-utils-J3iaDsXd.mjs";
 import { resolve } from "node:path";
 import { readFileSync, realpathSync } from "node:fs";
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-tKRY0yOA.mjs";
+import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-Cml101qs.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as assertValidAdapterInput, o as describeValue, r as defineAdapter, t as Logger } from "./logger-Bi5-MGBs.mjs";
+import { a as assertValidAdapterInput, o as describeValue, r as defineAdapter, t as Logger } from "./logger-StI3W9gi.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";
@@ -143,7 +143,7 @@ async function runTransform(options) {
 	].join("\n"));
 	const { createModuleResolver } = await import("./resolve-imports-4bFqrkrQ.mjs");
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-BuYfEK4M.mjs");
+	const { runPrepass } = await import("./run-prepass-DV-4A_Ci.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;
@@ -195,6 +195,7 @@ async function runTransform(options) {
 	const adapterWithLogging = {
 		styleMerger: resolvedAdapter.styleMerger,
 		themeHook: resolvedAdapter.themeHook,
+		useSxProp: resolvedAdapter.useSxProp,
 		externalInterface(ctx) {
 			return resolvedAdapter.externalInterface(ctx);
 		},
@@ -218,6 +219,7 @@ async function runTransform(options) {
 	const sidecarFiles = /* @__PURE__ */ new Map();
 	const bridgeResults = /* @__PURE__ */ new Map();
 	const transformedFiles = /* @__PURE__ */ new Set();
+	const transientPropRenames = /* @__PURE__ */ new Map();
 	const result = await run(transformPath, filePaths, {
 		parser,
 		dry: dryRun,
@@ -227,6 +229,7 @@ async function runTransform(options) {
 		sidecarFiles,
 		bridgeResults,
 		transformedFiles,
+		transientPropRenames,
 		runInBand: true
 	});
 	if (sidecarFiles.size > 0 && !dryRun) for (const [sidecarPath, content] of sidecarFiles) await writeFile(sidecarPath, mergeSidecarContent(sidecarPath, content), "utf-8");
@@ -244,7 +247,7 @@ async function runTransform(options) {
 		if (formatterCommands && patchedFiles.length > 0) await runFormatters(formatterCommands, patchedFiles);
 	}
 	if (prepassResult.forwardedAsConsumers.size > 0 && !dryRun) {
-		const { buildForwardedAsReplacements, patchConsumerForwardedAs } = await import("./forwarded-as-consumer-patcher-GPnjkzc_.mjs");
+		const { buildForwardedAsReplacements, patchConsumerForwardedAs } = await import("./forwarded-as-consumer-patcher-CIOAJ-51.mjs");
 		const forwardedAsReplacements = buildForwardedAsReplacements(prepassResult.forwardedAsConsumers, transformedFiles);
 		const patchedFiles = [];
 		for (const [consumerPath, entries] of forwardedAsReplacements) {
@@ -256,6 +259,20 @@ async function runTransform(options) {
 		}
 		if (formatterCommands && patchedFiles.length > 0) await runFormatters(formatterCommands, patchedFiles);
 	}
+	if (transientPropRenames.size > 0 && !dryRun) {
+		const { collectTransientPropPatches } = await import("./transient-prop-consumer-patcher-iofVVX40.mjs");
+		const patches = collectTransientPropPatches({
+			transientPropRenames,
+			consumerFilePaths: consumerFilePaths.map((p) => resolve(p)),
+			resolver: sharedResolver
+		});
+		const patchedFiles = [];
+		for (const { consumerPath, patched } of patches) {
+			await writeFile(consumerPath, patched, "utf-8");
+			patchedFiles.push(consumerPath);
+		}
+		if (formatterCommands && patchedFiles.length > 0) await runFormatters(formatterCommands, patchedFiles);
+	}
 	if (formatterCommands && formatterCommands.length > 0 && result.ok > 0 && !dryRun) await runFormatters(formatterCommands, filePaths);
 	const report = Logger.createReport();
 	report.print();

package/dist/{logger-tKRY0yOA.d.mts → logger-Cml101qs.d.mts}

@@ -378,6 +378,25 @@ type SelectorResolveResult = {
    * Import statements required by `styleSelectorExpr`.
    */
   imports: ImportSpec[];
+} | {
+  kind: "pseudoExpand";
+  /**
+   * List of pseudo-classes to expand into a single merged style object.
+   * Each pseudo can optionally be wrapped in a condition (e.g., a `defineConsts` media query).
+   *
+   * Example: `[{ pseudo: "active" }, { pseudo: "hover", condition: { expr: "$interaction.canHover", imports: [...] } }]`
+   */
+  expansions: Array<{
+    /** Pseudo-class name without leading colon (e.g., "active", "hover") */pseudo: string; /** Optional condition wrapping this pseudo entry (e.g., a defineConsts key) */
+    condition?: {
+      /** JS expression string (e.g., "$interaction.canHover") */expr: string; /** Imports required by the condition expression */
+      imports: ImportSpec[];
+    };
+  }>;
+  /**
+   * Shared imports for the overall expansion (not per-condition).
+   */
+  imports: ImportSpec[];
 };
 interface ExternalInterfaceContext {
   /** Absolute path of the file being transformed */
@@ -527,6 +546,18 @@ interface Adapter {
    * `{ functionName: "useTheme", importSource: { kind: "specifier", value: "styled-components" } }`
    */
   themeHook?: ThemeHookConfig;
+  /**
+   * Emit `sx={...}` JSX attributes instead of `{...stylex.props(...)}` spreads
+   * on intrinsic elements. Requires `@stylexjs/babel-plugin` ≥0.18 with the
+   * `sxPropName` option (defaults to `"sx"`).
+   *
+   * When enabled, the codemod produces shorter output:
+   *   `<div sx={styles.base} />`  instead of  `<div {...stylex.props(styles.base)} />`
+   *
+   * Only applies to simple cases without className/style merging.
+   *
+   */
+  useSxProp: boolean;
 }
 /**
  * User-facing adapter input type accepted by `defineAdapter()`.
@@ -551,6 +582,7 @@ interface AdapterInput {
   externalInterface: "auto" | Adapter["externalInterface"];
   styleMerger: Adapter["styleMerger"];
   themeHook?: Adapter["themeHook"];
+  useSxProp: Adapter["useSxProp"];
 }
 /**
  * Helper for nicer user authoring + type inference.
@@ -602,6 +634,9 @@ interface AdapterInput {
  *     // Optional: provide a custom merger, or use `null` for the default verbose merge output
  *     styleMerger: null,
  *
+ *     // Emit sx={} JSX attributes instead of {...stylex.props()} spreads (requires StyleX ≥0.18)
+ *     useSxProp: false,
+ *
  *     // Optional: customize runtime theme hook import/call used by emitted wrappers
  *     themeHook: {
  *       functionName: "useTheme",
@@ -613,7 +648,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 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: @-rules (e.g., @media, @supports) are not supported" | "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. 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: 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 contains unresolvable interpolation" | "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" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396" | "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" | "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 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 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 contains unresolvable interpolation" | "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: descendant/child/sibling selector" | "Unsupported selector: interpolated pseudo selector" | "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: unresolved interpolation in cross-file component selector" | "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: grouped reverse selector references different components" | "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" | "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";
+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 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: @-rules (e.g., @media, @supports) are not supported" | "CSS block contains unsupported at-rule (only @media and @container are supported; @supports, etc. 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: 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" | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)" | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396" | "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" | "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 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 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: descendant/child/sibling selector" | "Unsupported selector: interpolated pseudo selector" | "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: unresolved interpolation in cross-file component selector" | "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: grouped reverse selector references different components" | "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" | "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";
 interface WarningLog {
   severity: Severity;
   type: WarningType;

package/dist/{logger-Bi5-MGBs.mjs → logger-StI3W9gi.mjs}

@@ -91,7 +91,7 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 		"",
 		"Adapter shape:",
 		"  {",
-		"    resolveSelector(context) { return { kind: \"media\" | \"pseudoAlias\", ... } | undefined }",
+		"    resolveSelector(context) { return { kind: \"media\" | \"pseudoAlias\" | \"pseudoExpand\", ... } | undefined }",
 		"  }",
 		"",
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
@@ -239,6 +239,9 @@ const DEFAULT_THEME_HOOK = {
 *     // Optional: provide a custom merger, or use `null` for the default verbose merge output
 *     styleMerger: null,
 *
+*     // Emit sx={} JSX attributes instead of {...stylex.props()} spreads (requires StyleX ≥0.18)
+*     useSxProp: false,
+*
 *     // Optional: customize runtime theme hook import/call used by emitted wrappers
 *     themeHook: {
 *       functionName: "useTheme",

package/dist/{run-prepass-BuYfEK4M.mjs → run-prepass-DV-4A_Ci.mjs}

@@ -1,4 +1,4 @@
-import { t as PLACEHOLDER_RE } from "./styled-css-DBryFqQM.mjs";
+import { t as PLACEHOLDER_RE } from "./styled-css-BJH7gntu.mjs";
 import { t as isSelectorContext } from "./selector-context-heuristic-Cki9_tTH.mjs";
 import path, { relative, resolve } from "node:path";
 import { readFileSync, realpathSync } from "node:fs";
@@ -575,13 +575,20 @@ async function runPrepass(options) {
 				wrappedName: m[2]
 			});
 		}
-		if (hasAsProp) {
-			JSX_AS_COMPONENT_RE.lastIndex = 0;
-			for (const m of source.matchAll(JSX_AS_COMPONENT_RE)) if (m[1]) addToSetMap(asUsages, m[1], filePath);
-		}
-		if (hasRefProp) {
-			JSX_REF_COMPONENT_RE.lastIndex = 0;
-			for (const m of source.matchAll(JSX_REF_COMPONENT_RE)) if (m[1]) addToSetMap(refUsages, m[1], filePath);
+		if (hasAsProp || hasRefProp) {
+			let aliasMap;
+			const resolveTagName = (tagName) => {
+				aliasMap ??= buildLocalToImportedMap(source);
+				return aliasMap.get(tagName) ?? tagName;
+			};
+			if (hasAsProp) {
+				JSX_AS_COMPONENT_RE.lastIndex = 0;
+				for (const m of source.matchAll(JSX_AS_COMPONENT_RE)) if (m[1]) addToSetMap(asUsages, resolveTagName(m[1]), filePath);
+			}
+			if (hasRefProp) {
+				JSX_REF_COMPONENT_RE.lastIndex = 0;
+				for (const m of source.matchAll(JSX_REF_COMPONENT_RE)) if (m[1]) addToSetMap(refUsages, resolveTagName(m[1]), filePath);
+			}
 		}
 	}
 	const styledFileCount = fileContents.size;
@@ -746,11 +753,14 @@ const IMPORT_ALIAS_ENTRY_RE = /\b(\w+)\s+as\s+(\w+)/g;
 /**
 * Build a mapping from local alias names to original imported names for a source file.
 * Only includes PascalCase names that differ from their original (actual aliases).
+* Scans only import declarations to avoid false positives from TypeScript `as` casts
+* (e.g., `foo as Button` would incorrectly map `Button → foo`).
 */
 function buildLocalToImportedMap(source) {
+	const importText = collectImportDeclarationText(source);
 	const map = /* @__PURE__ */ new Map();
 	IMPORT_ALIAS_ENTRY_RE.lastIndex = 0;
-	for (const m of source.matchAll(IMPORT_ALIAS_ENTRY_RE)) {
+	for (const m of importText.matchAll(IMPORT_ALIAS_ENTRY_RE)) {
 		const original = m[1];
 		const local = m[2];
 		if (original !== local && /^[A-Z]/.test(local)) map.set(local, original);

package/dist/{string-utils-Dmym5IkG.mjs → string-utils-J3iaDsXd.mjs}

@@ -42,6 +42,7 @@ function sanitizeIdentifier(s) {
 * @example looksLikeLength("auto") => false
 */
 function looksLikeLength(token) {
+	if (token === "thin" || token === "medium" || token === "thick") return true;
 	return /^-?\d*\.?\d+(px|rem|em|vh|vw|vmin|vmax|ch|ex|lh|svh|svw|dvh|dvw|cqw|cqh|%)?$/.test(token);
 }
 /**
@@ -62,6 +63,13 @@ function escapeRegex(s) {
 	return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 /**
+* Returns true if a comment body (without delimiters) is a prettier-ignore directive.
+* These are formatting tool directives that should not be transferred to the output.
+*/
+function isPrettierIgnoreComment(body) {
+	return /^\s*prettier-ignore\s*$/.test(body);
+}
+/**
 * Normalizes whitespace in a CSS value string.
 * Collapses all sequences of whitespace (including newlines) to single spaces
 * and trims leading/trailing whitespace.
@@ -77,4 +85,4 @@ function normalizeWhitespace(s) {
 }
 
 //#endregion
-export { looksLikeLength as a, sanitizeIdentifier as c, kebabToCamelCase as i, escapeRegex as n, lowerFirst as o, isBackgroundImageValue as r, normalizeWhitespace as s, capitalize as t };
+export { kebabToCamelCase as a, normalizeWhitespace as c, isPrettierIgnoreComment as i, sanitizeIdentifier as l, escapeRegex as n, looksLikeLength as o, isBackgroundImageValue as r, lowerFirst as s, capitalize as t };

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-tKRY0yOA.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-Cml101qs.mjs";
 import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";
 
@@ -13,6 +13,13 @@ interface TransformResult {
   sidecarContent?: string;
   /** Bridge components emitted for unconverted consumer selectors. */
   bridgeResults?: BridgeComponentResult[];
+  /** Transient prop renames for exported components, keyed by export name. */
+  transientPropRenames?: TransientPropRenameResult[];
+}
+/** Describes a transient prop rename on an exported component for consumer patching. */
+interface TransientPropRenameResult {
+  exportName: string;
+  renames: Record<string, string>;
 }
 /** Describes a bridge className emitted for a component targeted by unconverted consumer selectors. */
 interface BridgeComponentResult {