styled-components-to-stylex-codemod 0.0.17 → 0.0.18

package/README.md

@@ -34,6 +34,12 @@ const adapter = defineAdapter({
   },
   // Optional: use a helper for merging StyleX styles with external className/style
   styleMerger: null,
+  // Optional: customize the runtime theme hook import/call used for theme conditionals
+  // Defaults to { functionName: "useTheme", importSource: { kind: "specifier", value: "styled-components" } }
+  themeHook: {
+    functionName: "useTheme",
+    importSource: { kind: "specifier", value: "styled-components" },
+  },
 });
 
 await runTransform({
@@ -133,6 +139,15 @@ const adapter = defineAdapter({
     functionName: "mergedSx",
     importSource: { kind: "specifier", value: "./lib/mergedSx" },
   },
+
+  /**
+   * Optional: customize the runtime theme hook used when wrappers need theme booleans.
+   * Defaults to useTheme from styled-components.
+   */
+  themeHook: {
+    functionName: "useDesignTheme",
+    importSource: { kind: "specifier", value: "@company/theme-hooks" },
+  },
 });
 
 await runTransform({
@@ -156,6 +171,7 @@ Adapters are the main extension point, see full example above. They let you cont
 - how helper calls are resolved (via `resolveCall({ ... })` returning `{ expr, imports }`; `null`/`undefined` bails the file)
 - which exported components should support external className/style extension and/or polymorphic `as` prop (`externalInterface`)
 - how className/style merging is handled for components accepting external styling (`styleMerger`)
+- which runtime theme hook import/call to use for emitted wrapper theme conditionals (`themeHook`)
 
 #### Cross-file selectors (`consumerPaths`)
 
@@ -263,7 +279,11 @@ export const truncate = stylex.create({
 
 The adapter maps your project's `props.theme.*` access, CSS variables, and helper calls to the StyleX equivalents from step 1. See [Usage](#usage) for the full API.
 
-### 3. Verify, iterate, clean up
+### 3. Convert bottom-up (leaf components first)
+
+When a component wraps another component that internally uses styled-components (e.g. `styled(GroupHeader)` where `GroupHeader` renders a `StyledHeader`), CSS cascade conflicts can arise after migration. Convert leaf files — the ones that don't wrap other styled-components — first, then work your way up. The codemod will bail with a warning if it detects this pattern.
+
+### 4. Verify, iterate, clean up
 
 Build and test your project. Review warnings — they tell you which files were skipped and why. Fix adapter gaps, re-run on remaining files, and repeat until done. [Report issues](https://github.com/skovhus/styled-components-to-stylex-codemod/issues) with input/output examples if the codemod produces incorrect results.
 

package/dist/index.d.mts

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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i as describeValue, r as assertValidAdapterInput, t as Logger } from "./logger-D-R2KB6I.mjs";
+import { a as assertValidAdapterInput, o as describeValue, r as defineAdapter, t as Logger } from "./logger-Cn8OiPdU.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";
@@ -6,68 +6,6 @@ import { existsSync, readFileSync, realpathSync } from "node:fs";
 import { glob, writeFile } from "node:fs/promises";
 import { spawn } from "node:child_process";
 
-//#region src/adapter.ts
-/**
-* Adapter entry point for customizing the codemod.
-* Core concepts: value resolution hooks and adapter validation.
-*/
-/**
-* Helper for nicer user authoring + type inference.
-*
-* `defineAdapter(...)` also performs runtime validation (helpful for JS consumers)
-* and will throw a descriptive error message if the adapter shape is invalid.
-*
-* Usage:
-*   export default defineAdapter({
-*     resolveValue(ctx) {
-*       if (ctx.kind === "theme") {
-*         return {
-*           expr: `tokens.${ctx.path}`,
-*           imports: [
-*             { from: { kind: "specifier", value: "./tokens" }, names: [{ imported: "tokens" }] },
-*           ],
-*         };
-*       }
-*       // Return undefined to bail/skip the file
-*     },
-*
-*     resolveCall(ctx) {
-*       // Resolve helper calls inside template interpolations.
-*       // Use ctx.cssProperty to determine context:
-*       // - If ctx.cssProperty exists → return a CSS value expression
-*       // - If ctx.cssProperty is undefined → return a StyleX style object reference
-*       // Return { expr, imports } or undefined to bail/skip the file
-*       void ctx;
-*     },
-*
-*     resolveSelector(ctx) {
-*       // Resolve imported values used in selector position.
-*       // Return one of:
-*       // - { kind: "media", expr, imports } for media queries (e.g., breakpoints.phone)
-*       // - { kind: "pseudoAlias", values, styleSelectorExpr?, imports? } for pseudo-class expansion
-*       // - undefined to bail/skip the file
-*       void ctx;
-*     },
-*
-*     // Configure external interface for exported components
-*     externalInterface(ctx) {
-*       // Example: Enable styles and `as` for shared components folder
-*       if (ctx.filePath.includes("/shared/components/")) {
-*         return { styles: true, as: true };
-*       }
-*       return { styles: false, as: false };
-*     },
-*
-*     // Optional: provide a custom merger, or use `null` for the default verbose merge output
-*     styleMerger: null,
-*   });
-*/
-function defineAdapter(adapter) {
-	assertValidAdapterInput(adapter, "defineAdapter(adapter)");
-	return adapter;
-}
-
-//#endregion
 //#region src/run.ts
 /**
 * Runs the codemod over input files with an adapter.
@@ -194,7 +132,7 @@ async function runTransform(options) {
 	].join("\n"));
 	const { createModuleResolver } = await import("./resolve-imports-BDk6Ms09.mjs");
 	const sharedResolver = createModuleResolver();
-	const { runPrepass } = await import("./run-prepass-C4Lv1FHf.mjs");
+	const { runPrepass } = await import("./run-prepass-ByjC18e6.mjs");
 	const absoluteFiles = filePaths.map((f) => resolve(f));
 	const absoluteConsumers = consumerFilePaths.map((f) => resolve(f));
 	let prepassResult;
@@ -243,6 +181,7 @@ async function runTransform(options) {
 	})();
 	const adapterWithLogging = {
 		styleMerger: resolvedAdapter.styleMerger,
+		themeHook: resolvedAdapter.themeHook,
 		externalInterface(ctx) {
 			return resolvedAdapter.externalInterface(ctx);
 		},

package/dist/{logger-D-R2KB6I.mjs → logger-Cn8OiPdU.mjs}

@@ -112,23 +112,131 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 			"  }"
 		].join("\n"));
 		const { functionName, importSource } = styleMerger;
-		if (typeof functionName !== "string" || !functionName.trim()) throw new Error([`${where}: adapter.styleMerger.functionName must be a non-empty string.`, `Received: functionName=${describeValue(functionName)}`].join("\n"));
-		if (!importSource || typeof importSource !== "object") throw new Error([
-			`${where}: adapter.styleMerger.importSource must be an object.`,
-			`Received: importSource=${describeValue(importSource)}`,
+		assertFunctionNameAndImportSource({
+			where,
+			configPath: "adapter.styleMerger",
+			functionName,
+			importSource,
+			specifierExample: "@company/ui-utils",
+			absolutePathExample: "/path/to/module.ts"
+		});
+	}
+	const themeHook = obj?.themeHook;
+	if (themeHook !== null && themeHook !== void 0) {
+		if (typeof themeHook !== "object") throw new Error([
+			`${where}: adapter.themeHook must be an object when provided.`,
+			`Received: themeHook=${describeValue(themeHook)}`,
 			"",
 			"Expected shape:",
-			"  { kind: \"specifier\", value: \"@company/ui-utils\" }",
-			"  or",
-			"  { kind: \"absolutePath\", value: \"/path/to/module.ts\" }"
+			"  {",
+			"    functionName: \"useTheme\",",
+			"    importSource: { kind: \"specifier\", value: \"@company/theme-hooks\" }",
+			"  }"
 		].join("\n"));
-		const { kind, value } = importSource;
-		if (kind !== "specifier" && kind !== "absolutePath") throw new Error([`${where}: adapter.styleMerger.importSource.kind must be "specifier" or "absolutePath".`, `Received: kind=${describeValue(kind)}`].join("\n"));
-		if (typeof value !== "string" || !value.trim()) throw new Error([`${where}: adapter.styleMerger.importSource.value must be a non-empty string.`, `Received: value=${describeValue(value)}`].join("\n"));
+		const { functionName, importSource } = themeHook;
+		assertFunctionNameAndImportSource({
+			where,
+			configPath: "adapter.themeHook",
+			functionName,
+			importSource,
+			specifierExample: "@company/theme-hooks",
+			absolutePathExample: "/path/to/theme-hooks.ts"
+		});
 	}
 }
+function assertFunctionNameAndImportSource(args) {
+	const { where, configPath, functionName, importSource, specifierExample, absolutePathExample } = args;
+	if (typeof functionName !== "string" || !functionName.trim()) throw new Error([`${where}: ${configPath}.functionName must be a non-empty string.`, `Received: functionName=${describeValue(functionName)}`].join("\n"));
+	if (!importSource || typeof importSource !== "object") throw new Error([
+		`${where}: ${configPath}.importSource must be an object.`,
+		`Received: importSource=${describeValue(importSource)}`,
+		"",
+		"Expected shape:",
+		`  { kind: "specifier", value: "${specifierExample}" }`,
+		"  or",
+		`  { kind: "absolutePath", value: "${absolutePathExample}" }`
+	].join("\n"));
+	const { kind, value } = importSource;
+	if (kind !== "specifier" && kind !== "absolutePath") throw new Error([`${where}: ${configPath}.importSource.kind must be "specifier" or "absolutePath".`, `Received: kind=${describeValue(kind)}`].join("\n"));
+	if (typeof value !== "string" || !value.trim()) throw new Error([`${where}: ${configPath}.importSource.value must be a non-empty string.`, `Received: value=${describeValue(value)}`].join("\n"));
+}
 const ADAPTER_DOCS_URL = `https://github.com/skovhus/styled-components-to-stylex-codemod#adapter`;
 
+//#endregion
+//#region src/adapter.ts
+/**
+* Adapter entry point for customizing the codemod.
+* Core concepts: value resolution hooks and adapter validation.
+*/
+const DEFAULT_THEME_HOOK = {
+	functionName: "useTheme",
+	importSource: {
+		kind: "specifier",
+		value: "styled-components"
+	}
+};
+/**
+* Helper for nicer user authoring + type inference.
+*
+* `defineAdapter(...)` also performs runtime validation (helpful for JS consumers)
+* and will throw a descriptive error message if the adapter shape is invalid.
+*
+* Usage:
+*   export default defineAdapter({
+*     resolveValue(ctx) {
+*       if (ctx.kind === "theme") {
+*         return {
+*           expr: `tokens.${ctx.path}`,
+*           imports: [
+*             { from: { kind: "specifier", value: "./tokens" }, names: [{ imported: "tokens" }] },
+*           ],
+*         };
+*       }
+*       // Return undefined to bail/skip the file
+*     },
+*
+*     resolveCall(ctx) {
+*       // Resolve helper calls inside template interpolations.
+*       // Use ctx.cssProperty to determine context:
+*       // - If ctx.cssProperty exists → return a CSS value expression
+*       // - If ctx.cssProperty is undefined → return a StyleX style object reference
+*       // Return { expr, imports } or undefined to bail/skip the file
+*       void ctx;
+*     },
+*
+*     resolveSelector(ctx) {
+*       // Resolve imported values used in selector position.
+*       // Return one of:
+*       // - { kind: "media", expr, imports } for media queries (e.g., breakpoints.phone)
+*       // - { kind: "pseudoAlias", values, styleSelectorExpr?, imports? } for pseudo-class expansion
+*       // - undefined to bail/skip the file
+*       void ctx;
+*     },
+*
+*     // Configure external interface for exported components
+*     externalInterface(ctx) {
+*       // Example: Enable styles and `as` for shared components folder
+*       if (ctx.filePath.includes("/shared/components/")) {
+*         return { styles: true, as: true };
+*       }
+*       return { styles: false, as: false };
+*     },
+*
+*     // Optional: provide a custom merger, or use `null` for the default verbose merge output
+*     styleMerger: null,
+*
+*     // Optional: customize runtime theme hook import/call used by emitted wrappers
+*     themeHook: {
+*       functionName: "useTheme",
+*       importSource: { kind: "specifier", value: "styled-components" },
+*     },
+*   });
+*/
+function defineAdapter(adapter) {
+	assertValidAdapterInput(adapter, "defineAdapter(adapter)");
+	return adapter;
+}
+
 //#endregion
 //#region src/internal/logger.ts
 /**
@@ -361,4 +469,4 @@ const SECTION_COLOR = "\x1B[36m";
 const RESET_COLOR = "\x1B[0m";
 
 //#endregion
-export { describeValue as i, assertValidAdapter as n, assertValidAdapterInput as r, Logger as t };
+export { assertValidAdapterInput as a, assertValidAdapter as i, DEFAULT_THEME_HOOK as n, describeValue as o, defineAdapter as r, Logger as t };

package/dist/{logger-B7SOfCti.d.mts → logger-vL9nn4Bu.d.mts}

@@ -348,6 +348,25 @@ interface StyleMergerConfig {
    */
   importSource: ImportSource;
 }
+/**
+ * Configuration for the theme hook used when wrapper emission needs runtime theme access
+ * (e.g. theme boolean conditionals that cannot be fully lowered statically).
+ *
+ * Defaults to:
+ * - functionName: "useTheme"
+ * - importSource: { kind: "specifier", value: "styled-components" }
+ */
+interface ThemeHookConfig {
+  /**
+   * Function name to call in emitted wrappers (e.g. "useTheme", "useDesignSystemTheme").
+   */
+  functionName: string;
+  /**
+   * Import source for the hook function.
+   * Example: `{ kind: "specifier", value: "@company/theme" }`
+   */
+  importSource: ImportSource;
+}
 interface Adapter {
   /**
    * Resolver for theme paths + CSS variables + imported values.
@@ -411,6 +430,13 @@ interface Adapter {
    * ```
    */
   styleMerger: StyleMergerConfig | null;
+  /**
+   * Optional theme hook import/call customization for wrapper code that needs runtime theme access.
+   *
+   * When omitted, defaults to:
+   * `{ functionName: "useTheme", importSource: { kind: "specifier", value: "styled-components" } }`
+   */
+  themeHook?: ThemeHookConfig;
 }
 /**
  * User-facing adapter input type accepted by `defineAdapter()`.
@@ -433,6 +459,7 @@ interface AdapterInput {
    */
   externalInterface: "auto" | Adapter["externalInterface"];
   styleMerger: Adapter["styleMerger"];
+  themeHook?: Adapter["themeHook"];
 }
 /**
  * Helper for nicer user authoring + type inference.
@@ -483,13 +510,19 @@ interface AdapterInput {
  *
  *     // Optional: provide a custom merger, or use `null` for the default verbose merge output
  *     styleMerger: null,
+ *
+ *     // Optional: customize runtime theme hook import/call used by emitted wrappers
+ *     themeHook: {
+ *       functionName: "useTheme",
+ *       importSource: { kind: "specifier", value: "styled-components" },
+ *     },
  *   });
  */
 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 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" | "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: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "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" | "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 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";
+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 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 is supported; @supports, @container, 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: unsupported selector" | "Directional border helper styles are not supported" | "Multi-slot border interpolation could not be resolved" | "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" | "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 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";
 interface WarningLog {
   severity: Severity;
   type: WarningType;

package/dist/{run-prepass-C4Lv1FHf.mjs → run-prepass-ByjC18e6.mjs}

@@ -652,7 +652,8 @@ async function runPrepass(options) {
 	const crossFileInfo = {
 		selectorUsages,
 		componentsNeedingMarkerSidecar,
-		componentsNeedingGlobalSelectorBridge
+		componentsNeedingGlobalSelectorBridge,
+		styledDefFiles: createExternalInterface ? styledDefFiles : void 0
 	};
 	{
 		const elapsed = ((performance.now() - t0) / 1e3).toFixed(1);

package/dist/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-B7SOfCti.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-vL9nn4Bu.mjs";
 import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";
 
@@ -46,6 +46,8 @@ interface CrossFileInfo {
   selectorUsages: CrossFileSelectorUsage[];
   /** Component names in this file that need a global selector bridge className (consumer not transformed) */
   bridgeComponentNames?: Set<string>;
+  /** Global map: files that define styled-components → set of local names. Used for cascade conflict detection. */
+  styledDefFiles?: Map<string, Set<string>>;
 }
 interface CrossFileSelectorUsage {
   /** Local name in the consumer file (e.g. "CollapseArrowIcon") */