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

package/README.md

@@ -119,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.
@@ -172,6 +196,7 @@ Adapters are the main extension point, see full example above. They let you cont
 - 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`)
 
@@ -224,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:

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as defineAdapter, i as AdapterInput, t as CollectedWarning } from "./logger-vL9nn4Bu.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 { a as assertValidAdapterInput, o as describeValue, r as defineAdapter, t as Logger } from "./logger-Cn8OiPdU.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";
@@ -106,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();
@@ -187,7 +198,8 @@ async function runTransform(options) {
 		},
 		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-Cn8OiPdU.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"));

package/dist/{logger-vL9nn4Bu.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(...)`.
  *
@@ -404,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.
    *
@@ -450,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.
    *
@@ -522,7 +573,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 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";
+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/transform.d.mts

@@ -1,4 +1,4 @@
-import { n as WarningLog, r as Adapter } from "./logger-vL9nn4Bu.mjs";
+import { n as WarningLog, r as Adapter } from "./logger-DyMTX-U6.mjs";
 import "stylis";
 import { API, FileInfo, Options } from "jscodeshift";