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

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({
@@ -113,6 +119,30 @@ const adapter = defineAdapter({
     };
   },
 
+  /**
+   * Optional: inline styled(ImportedComponent) into an intrinsic element.
+   * When the base component can be resolved statically, return the target
+   * element, consumed props, and base StyleX declarations. Return undefined
+   * to keep normal styled(Component) behavior.
+   */
+  resolveBaseComponent(ctx) {
+    if (ctx.importSource !== "@company/ui" || ctx.importedName !== "Flex") {
+      return undefined;
+    }
+
+    const sx: Record<string, string> = { display: "flex" };
+    const consumedProps = ["column", "gap", "align"];
+
+    if (ctx.staticProps.column === true) {
+      sx.flexDirection = "column";
+    }
+    if (typeof ctx.staticProps.gap === "number") {
+      sx.gap = `${ctx.staticProps.gap}px`;
+    }
+
+    return { tagName: "div", consumedProps, sx };
+  },
+
   /**
    * Control which exported components accept external className/style
    * and/or polymorphic `as` prop. Return `{ styles, as }` flags.
@@ -133,6 +163,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 +195,8 @@ 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`)
+- how `styled(ImportedComponent)` wrapping an external base component can be inlined into an intrinsic element with static StyleX styles (`resolveBaseComponent`)
 
 #### Cross-file selectors (`consumerPaths`)
 
@@ -208,6 +249,50 @@ Troubleshooting prepass failures with `"auto"`:
 - check resolver inputs (import paths, tsconfig path aliases, and related module resolution config)
 - if needed, switch to a manual `externalInterface(ctx)` function to continue migration while you fix prepass inputs
 
+#### Base component resolution (`resolveBaseComponent`)
+
+Use this when you want to **replace a base component entirely** by inlining its styles. If your codebase has a layout primitive like `<Flex>` whose behavior is purely CSS, the codemod can eliminate the runtime import and render a plain `<div>` instead.
+
+The resolver receives `ctx.importSource`, `ctx.importedName`, and `ctx.staticProps` (from `.attrs()` and JSX call sites). Return `{ tagName, consumedProps, sx }` to inline, or `undefined` to skip.
+
+```tsx
+// Input
+const Container = styled(Flex).attrs({ column: true, gap: 16 })`
+  padding: 8px;
+`;
+```
+
+```ts
+// Adapter
+resolveBaseComponent(ctx) {
+  if (ctx.importedName !== "Flex") return undefined;
+  const sx: Record<string, string> = { display: "flex" };
+  if (ctx.staticProps.column === true) sx.flexDirection = "column";
+  if (typeof ctx.staticProps.gap === "number") sx.gap = `${ctx.staticProps.gap}px`;
+  return { tagName: "div", consumedProps: ["column", "gap", "align"], sx };
+},
+```
+
+```tsx
+// Output — Flex is gone, its styles are merged into stylex.create()
+const styles = stylex.create({
+  container: { display: "flex", flexDirection: "column", gap: "16px", padding: "8px" },
+});
+```
+
+If the base component's styles already exist as a `stylex.create()` object, return `mixins` instead of (or alongside) `sx`. The codemod imports the mixin and includes it in `stylex.props(...)`:
+
+```ts
+resolveBaseComponent(ctx) {
+  return {
+    tagName: "div",
+    consumedProps: ["column", "gap"],
+    mixins: [{ importSource: "./lib/mixins.stylex", importName: "mixins", styleKey: "flex" }],
+  };
+},
+// Output: <div {...stylex.props(mixins.flex, styles.container)} />
+```
+
 #### Dynamic interpolations
 
 When the codemod encounters an interpolation inside a styled template literal, it runs an internal dynamic resolution pipeline which covers common cases like:
@@ -263,7 +348,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-DyMTX-U6.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-D7X3KrX1.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.
@@ -168,6 +106,17 @@ async function runTransform(options) {
 			throw e;
 		}
 	};
+	const resolveBaseComponentWithLogging = (ctx) => {
+		if (!adapterInput.resolveBaseComponent) return;
+		try {
+			return adapterInput.resolveBaseComponent(ctx);
+		} catch (e) {
+			const msg = `adapter.resolveBaseComponent threw an error: ${e instanceof Error ? e.message : String(e)}`;
+			Logger.logError(msg, ctx.filePath, void 0, ctx);
+			Logger.markErrorAsLogged(e);
+			throw e;
+		}
+	};
 	const patterns = Array.isArray(files) ? files : [files];
 	const filePaths = [];
 	const cwd = process.cwd();
@@ -194,7 +143,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,12 +192,14 @@ async function runTransform(options) {
 	})();
 	const adapterWithLogging = {
 		styleMerger: resolvedAdapter.styleMerger,
+		themeHook: resolvedAdapter.themeHook,
 		externalInterface(ctx) {
 			return resolvedAdapter.externalInterface(ctx);
 		},
 		resolveValue: resolveValueWithLogging,
 		resolveCall: resolveCallWithLogging,
-		resolveSelector: resolveSelectorWithLogging
+		resolveSelector: resolveSelectorWithLogging,
+		resolveBaseComponent: adapterInput.resolveBaseComponent ? resolveBaseComponentWithLogging : void 0
 	};
 	const transformPath = (() => {
 		const adjacent = join(__dirname, "transform.mjs");

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

@@ -35,6 +35,7 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 	const resolveValue = obj?.resolveValue;
 	const resolveCall = obj?.resolveCall;
 	const resolveSelector = obj?.resolveSelector;
+	const resolveBaseComponent = obj?.resolveBaseComponent;
 	const externalInterface = obj?.externalInterface;
 	if (!candidate || typeof candidate !== "object") throw new Error([
 		`${where}: expected an adapter object.`,
@@ -95,6 +96,19 @@ function assertAdapterShape(candidate, where, allowAutoExtIf) {
 		"",
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
 	].join("\n"));
+	if (resolveBaseComponent !== void 0 && typeof resolveBaseComponent !== "function") throw new Error([
+		`${where}: adapter.resolveBaseComponent must be a function when provided.`,
+		`Received: resolveBaseComponent=${describeValue(resolveBaseComponent)}`,
+		"",
+		"Adapter shape:",
+		"  {",
+		"    resolveBaseComponent(context) {",
+		"      return { tagName, consumedProps, sx?, mixins? } | undefined",
+		"    }",
+		"  }",
+		"",
+		`Docs/examples: ${ADAPTER_DOCS_URL}`
+	].join("\n"));
 	if (!(typeof externalInterface === "function" || allowAutoExtIf && externalInterface === "auto")) {
 		const expected = allowAutoExtIf ? "adapter.externalInterface must be a function or \"auto\"." : "adapter.externalInterface must be a function.";
 		throw new Error([`${where}: ${expected}`, `Received: externalInterface=${describeValue(externalInterface)}`].join("\n"));
@@ -112,23 +126,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 +483,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-DyMTX-U6.d.mts}

@@ -232,6 +232,48 @@ type ImportSpec = {
     local?: string;
   }>;
 };
+type ResolveBaseComponentStaticValue = string | number | boolean;
+interface ResolveBaseComponentContext {
+  /**
+   * Import source for the wrapped base component.
+   * - package import: "@linear/orbiter/components/Flex"
+   * - relative import: resolved absolute path
+   */
+  importSource: string;
+  /**
+   * Imported binding name for the wrapped base component.
+   * Example: `import { Flex as OrbiterFlex } ...` -> importedName: "Flex"
+   */
+  importedName: string;
+  /**
+   * Static props from `.attrs({...})` and/or JSX call sites.
+   * Includes only literal values that can be resolved at codemod time.
+   */
+  staticProps: Record<string, ResolveBaseComponentStaticValue>;
+  /**
+   * Absolute path of the file currently being transformed.
+   * Useful for resolver logic that branches by caller file.
+   */
+  filePath: string;
+}
+interface ResolveBaseComponentMixinRef {
+  /** Import source for the mixin namespace/object (module specifier or absolute path) */
+  importSource: string;
+  /** Imported binding name for the mixin namespace/object (e.g., "mixins") */
+  importName: string;
+  /** Property key on the imported namespace/object (e.g., "flex") */
+  styleKey: string;
+}
+interface ResolveBaseComponentResult {
+  /** Intrinsic element to render after inlining (e.g., "div", "section") */
+  tagName: string;
+  /** Props consumed by the resolver and stripped from DOM forwarding */
+  consumedProps: string[];
+  /** Base StyleX declarations merged into stylex.create() (camelCase, no shorthands) */
+  sx?: Record<string, string>;
+  /** External StyleX mixin references included in stylex.props(...) */
+  mixins?: ResolveBaseComponentMixinRef[];
+}
 /**
  * Context for `adapter.resolveSelector(...)`.
  *
@@ -348,6 +390,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.
@@ -385,6 +446,14 @@ interface Adapter {
    * - `undefined` to bail/skip the file
    */
   resolveSelector: (context: SelectorResolveContext) => SelectorResolveResult | undefined;
+  /**
+   * Optional resolver for inlining `styled(ImportedBase)` components.
+   *
+   * Return:
+   * - `{ tagName, consumedProps, sx?, mixins? }` to inline the base component
+   * - `undefined` to keep normal `styled(Component)` behavior
+   */
+  resolveBaseComponent?: (context: ResolveBaseComponentContext) => ResolveBaseComponentResult | undefined;
   /**
    * Called for exported styled components to determine their external interface.
    *
@@ -411,6 +480,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()`.
@@ -424,6 +500,7 @@ interface AdapterInput {
   resolveValue: Adapter["resolveValue"];
   resolveCall: Adapter["resolveCall"];
   resolveSelector: Adapter["resolveSelector"];
+  resolveBaseComponent?: Adapter["resolveBaseComponent"];
   /**
    * Called for exported styled components to determine their external interface.
    *
@@ -433,6 +510,7 @@ interface AdapterInput {
    */
   externalInterface: "auto" | Adapter["externalInterface"];
   styleMerger: Adapter["styleMerger"];
+  themeHook?: Adapter["themeHook"];
 }
 /**
  * Helper for nicer user authoring + type inference.
@@ -483,13 +561,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 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 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-DyMTX-U6.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") */