styled-components-to-stylex-codemod 0.0.6 → 0.0.9

package/README.md

@@ -29,7 +29,7 @@ import {
 const adapter = defineAdapter({
   resolveValue(ctx) {
     if (ctx.kind === "theme") {
-      // Called for patterns like: ${(props) => props.theme.colors.primary}
+      // Called for patterns like: ${(props) => props.theme.color.primary}
       // `ctx.path` is the dotted path after `theme.`
       const varName = ctx.path.replace(/\./g, "_");
       return {
@@ -88,43 +88,39 @@ const adapter = defineAdapter({
       };
     }
 
-    if (ctx.kind === "call") {
-      // Called for template interpolations like: ${transitionSpeed("slowTransition")}
-      // `calleeImportedName` is the imported symbol name (works even with aliasing).
-      // `calleeSource` tells you where it came from:
-      // - { kind: "absolutePath", value: "/abs/path" } for relative imports
-      // - { kind: "specifier", value: "some-package/foo" } for package imports
-
-      if (ctx.calleeImportedName !== "transitionSpeed") {
-        return null;
-      }
-
-      // If you need to scope resolution to a particular module, you can use:
-      // - ctx.calleeSource
-
-      const arg0 = ctx.args[0];
-      const key =
-        arg0?.kind === "literal" && typeof arg0.value === "string"
-          ? arg0.value
-          : null;
-      if (!key) {
-        return null;
-      }
+    return null;
+  },
 
-      return {
-        expr: `transitionSpeedVars.${key}`,
-        imports: [
-          {
-            from: { kind: "specifier", value: "./lib/helpers.stylex" },
-            names: [
-              { imported: "transitionSpeed", local: "transitionSpeedVars" },
-            ],
-          },
-        ],
-      };
+  resolveCall(ctx) {
+    // Called for template interpolations like: ${transitionSpeed("slowTransition")}
+    // `calleeImportedName` is the imported symbol name (works even with aliasing).
+    // `calleeSource` tells you where it came from:
+    // - { kind: "absolutePath", value: "/abs/path" } for relative imports
+    // - { kind: "specifier", value: "some-package/foo" } for package imports
+
+    const arg0 = ctx.args[0];
+    const key =
+      arg0?.kind === "literal" && typeof arg0.value === "string"
+        ? arg0.value
+        : null;
+    if (ctx.calleeImportedName !== "transitionSpeed" || !key) {
+      return null;
     }
 
-    return null;
+    return {
+      usage: "create",
+      expr: `transitionSpeedVars.${key}`,
+      imports: [
+        {
+          from: { kind: "specifier", value: "./lib/helpers.stylex" },
+          names: [{ imported: "transitionSpeed", local: "transitionSpeedVars" }],
+        },
+      ],
+    };
+  },
+
+  shouldSupportExternalStyling() {
+    return false;
   },
 });
 
@@ -145,7 +141,7 @@ Adapters are the main extension point. They let you control:
 
 - how theme paths and CSS variables are turned into StyleX-compatible JS values (`resolveValue`)
 - what extra imports to inject into transformed files (returned from `resolveValue`)
-- how helper calls are resolved (via `resolveValue({ kind: "call", ... })`)
+- how helper calls are resolved (via `resolveCall({ ... })` returning `usage: "props" | "create"`; `null`/`undefined` now bails)
 - which exported components should support external className/style extension (`shouldSupportExternalStyling`)
 - how className/style merging is handled for components accepting external styling (`styleMerger`)
 
@@ -229,7 +225,9 @@ When the codemod encounters an interpolation inside a styled template literal, i
 
 - theme access (`props.theme...`) via `resolveValue({ kind: "theme", path })`
 - prop access (`props.foo`) and conditionals (`props.foo ? "a" : "b"`, `props.foo && "color: red;"`)
-- simple helper calls (`transitionSpeed("slowTransition")`) via `resolveValue({ kind: "call", calleeImportedName, calleeSource, args, ... })`
+- simple helper calls (`transitionSpeed("slowTransition")`) via `resolveCall({ ... })` returning `usage: "create"`
+- style helper calls (returning StyleX styles) via `resolveCall({ ... })` returning `usage: "props"`; these are emitted as extra `stylex.props(...)` args
+- if `resolveCall` returns `null` or `undefined`, the transform now **bails the file** and logs a warning
 - helper calls applied to prop values (e.g. `shadow(props.shadow)`) by emitting a StyleX style function that calls the helper at runtime
 - conditional CSS blocks via ternary (e.g. `props.$dim ? "opacity: 0.5;" : ""`)
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { i as defineAdapter, r as Adapter, t as CollectedWarning } from "./logger-BS4Evg0n.mjs";
+import { i as defineAdapter, r as Adapter, t as CollectedWarning } from "./logger-CNmtK-uJ.mjs";
 
 //#region src/run.d.ts
 interface RunTransformOptions {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { n as assertValidAdapter, r as describeValue, t as Logger } from "./logger-Dlnt1fYP.mjs";
+import { n as assertValidAdapter, r as describeValue, t as Logger } from "./logger-DKelw2HS.mjs";
 import { run } from "jscodeshift/src/Runner.js";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
@@ -13,6 +13,9 @@ import { spawn } from "node:child_process";
 /**
 * 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) {
@@ -27,11 +30,24 @@ import { spawn } from "node:child_process";
 *       return null;
 *     },
 *
+*     resolveCall(ctx) {
+*       // Resolve helper calls inside template interpolations.
+*       // Return:
+*       // - { usage: "props", expr, imports } for StyleX styles (usable in stylex.props)
+*       // - { usage: "create", expr, imports } for a single value (usable in stylex.create)
+*       // - null to leave the call unresolved
+*       void ctx;
+*       return null;
+*     },
+*
 *     // Enable className/style/rest support for exported components
 *     shouldSupportExternalStyling(ctx) {
 *       // Example: Enable for all exported components in a shared components folder
 *       return ctx.filePath.includes("/shared/components/");
 *     },
+*
+*     // Optional: provide a custom merger, or use `null` for the default verbose merge output
+*     styleMerger: null,
 *   });
 */
 function defineAdapter(adapter) {
@@ -92,20 +108,32 @@ async function runTransform(options) {
 	const { files, dryRun = false, print = false, parser = "tsx", formatterCommand } = options;
 	const adapter = options.adapter;
 	assertValidAdapter(adapter, "runTransform(options)");
+	const resolveValueWithLogging = (ctx) => {
+		try {
+			return adapter.resolveValue(ctx);
+		} catch (e) {
+			const msg = `adapter.resolveValue threw an error: ${e instanceof Error ? e.message : String(e)}`;
+			const filePath = ctx.filePath ?? "<unknown>";
+			Logger.logError(msg, filePath, void 0, ctx);
+			throw e;
+		}
+	};
+	const resolveCallWithLogging = (ctx) => {
+		try {
+			return adapter.resolveCall(ctx);
+		} catch (e) {
+			const msg = `adapter.resolveCall threw an error: ${e instanceof Error ? e.message : String(e)}`;
+			Logger.logError(msg, ctx.callSiteFilePath, void 0, ctx);
+			throw e;
+		}
+	};
 	const adapterWithLogging = {
 		styleMerger: adapter.styleMerger,
 		shouldSupportExternalStyling(ctx) {
 			return adapter.shouldSupportExternalStyling(ctx);
 		},
-		resolveValue(ctx) {
-			try {
-				return adapter.resolveValue(ctx);
-			} catch (e) {
-				const msg = `adapter.resolveValue threw an error: ${e instanceof Error ? e.message : String(e)}`;
-				Logger.error(msg, ctx);
-				throw e;
-			}
-		}
+		resolveValue: resolveValueWithLogging,
+		resolveCall: resolveCallWithLogging
 	};
 	const patterns = Array.isArray(files) ? files : [files];
 	const filePaths = [];

package/dist/{logger-BS4Evg0n.d.mts → logger-CNmtK-uJ.d.mts}

@@ -2,16 +2,27 @@
 /**
  * Adapter - Single user entry point for customizing the codemod.
  */
-type ResolveContext = {
+type ThemeResolveContext = {
   kind: "theme";
   path: string;
-} | {
+  /**
+   * Absolute path of the file currently being transformed.
+   * Useful for adapter logic that wants to branch by caller file.
+   */
+  filePath?: string;
+};
+type CssVariableResolveContext = {
   kind: "cssVariable";
   name: string;
   fallback?: string;
   definedValue?: string;
-} | {
-  kind: "call";
+  /**
+   * Absolute path of the file currently being transformed.
+   * Useful for adapter logic that wants to branch by caller file.
+   */
+  filePath?: string;
+};
+type CallResolveContext = {
   /**
    * Absolute path of the file currently being transformed.
    * Useful for adapter logic that wants to branch by caller file.
@@ -43,7 +54,16 @@ type ResolveContext = {
     kind: "unknown";
   }>;
 };
-type ResolveResult = {
+/**
+ * Context for `adapter.resolveValue(...)` (theme + css variables).
+ *
+ * Helper calls are handled separately via `adapter.resolveCall(...)`.
+ */
+type ResolveValueContext = ThemeResolveContext | CssVariableResolveContext;
+/**
+ * Result for `adapter.resolveValue(...)` (theme + css variables).
+ */
+type ResolveValueResult = {
   /**
    * JS expression string to inline into generated output.
    * Example: `vars.spacingSm` or `calcVars.baseSize`
@@ -57,9 +77,30 @@ type ResolveResult = {
   /**
    * If true, the transformer should drop the corresponding `--name: ...` definition
    * from the emitted style object (useful when replacing with StyleX vars).
+   *
+   * Note: Only meaningful for `{ kind: "cssVariable" }`.
    */
   dropDefinition?: boolean;
 };
+type CallResolveResult = {
+  /**
+   * Disambiguates how the resolved expression is used:
+   * - "props": a StyleX style object suitable for passing to `stylex.props(...)`.
+   * - "create": a value that can be used inside `stylex.create(...)` (e.g. tokens/vars).
+   */
+  usage: "props" | "create";
+  /**
+   * JS expression string to inline into generated output.
+   * Example (value): `vars.spacingSm`
+   * Example (styles): `borders.labelMuted`
+   */
+  expr: string;
+  /**
+   * Import statements required by `expr`.
+   * These are rendered and merged into the file by the codemod.
+   */
+  imports: ImportSpec[];
+};
 type ImportSource = {
   kind: "absolutePath";
   value: string;
@@ -105,8 +146,26 @@ interface StyleMergerConfig {
   importSource: ImportSource;
 }
 interface Adapter {
-  /** Unified resolver for theme paths + CSS variables. Return null to leave unresolved. */
-  resolveValue: (context: ResolveContext) => ResolveResult | null;
+  /**
+   * Resolver for theme paths + CSS variables.
+   *
+   * Notes:
+   * - Return `{ expr, imports }` for both theme + css variables.
+   * - Optionally return `{ dropDefinition: true }` for css variables to remove the local `--x: ...` definition.
+   * - Return `null` to leave a value unresolved.
+   */
+  resolveValue: (context: ResolveValueContext) => ResolveValueResult | null;
+  /**
+   * Resolver for helper calls found inside template interpolations.
+   *
+   * Return:
+   * - `{ usage: "props", expr, imports }` when the call resolves to a StyleX style object
+   *   (usable as an argument to `stylex.props(...)`).
+   * - `{ usage: "create", expr, imports }` when the call resolves to a single CSS value
+   *   (usable inside `stylex.create(...)` declarations).
+   * - `null` to leave the call unresolved (the file may bail with a warning depending on context).
+   */
+  resolveCall: (context: CallResolveContext) => CallResolveResult | null;
   /**
    * Called for exported styled components to determine if they should support
    * external className/style extension. Return true to generate wrapper with
@@ -133,6 +192,9 @@ interface Adapter {
 /**
  * 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) {
@@ -147,11 +209,24 @@ interface Adapter {
  *       return null;
  *     },
  *
+ *     resolveCall(ctx) {
+ *       // Resolve helper calls inside template interpolations.
+ *       // Return:
+ *       // - { usage: "props", expr, imports } for StyleX styles (usable in stylex.props)
+ *       // - { usage: "create", expr, imports } for a single value (usable in stylex.create)
+ *       // - null to leave the call unresolved
+ *       void ctx;
+ *       return null;
+ *     },
+ *
  *     // Enable className/style/rest support for exported components
  *     shouldSupportExternalStyling(ctx) {
  *       // Example: Enable for all exported components in a shared components folder
  *       return ctx.filePath.includes("/shared/components/");
  *     },
+ *
+ *     // Optional: provide a custom merger, or use `null` for the default verbose merge output
+ *     styleMerger: null,
  *   });
  */
 declare function defineAdapter(adapter: Adapter): Adapter;

package/dist/{logger-Dlnt1fYP.mjs → logger-DKelw2HS.mjs}

@@ -23,6 +23,7 @@ function describeValue(value) {
 function assertValidAdapter(candidate, where) {
 	const obj = candidate;
 	const resolveValue = obj?.resolveValue;
+	const resolveCall = obj?.resolveCall;
 	const shouldSupportExternalStyling = obj?.shouldSupportExternalStyling;
 	if (!candidate || typeof candidate !== "object") throw new Error([
 		`${where}: expected an adapter object.`,
@@ -30,12 +31,15 @@ function assertValidAdapter(candidate, where) {
 		"",
 		"Adapter requirements:",
 		"  - adapter.resolveValue(context) is required",
+		"  - adapter.resolveCall(context) is required",
 		"  - adapter.shouldSupportExternalStyling(context) is required",
 		"",
 		"resolveValue(context) is called with one of these shapes:",
 		"  - { kind: \"theme\", path }",
 		"  - { kind: \"cssVariable\", name, fallback?, definedValue? }",
-		"  - { kind: \"call\", callSiteFilePath, calleeImportedName, calleeSource, args }",
+		"",
+		"resolveCall(context) is called with:",
+		"  - { callSiteFilePath, calleeImportedName, calleeSource, args }",
 		"",
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
 	].join("\n"));
@@ -45,7 +49,21 @@ function assertValidAdapter(candidate, where) {
 		"",
 		"Adapter shape:",
 		"  {",
-		"    resolveValue(context) { return { expr: string, imports: ImportSpec[] } | null }",
+		"    resolveValue(context) {",
+		"      // theme/cssVariable -> { expr, imports, dropDefinition? } | null",
+		"    }",
+		"    resolveCall(context) { return { usage: \"props\" | \"create\", expr, imports } | null }",
+		"  }",
+		"",
+		`Docs/examples: ${ADAPTER_DOCS_URL}`
+	].join("\n"));
+	if (typeof resolveCall !== "function") throw new Error([
+		`${where}: adapter.resolveCall must be a function.`,
+		`Received: resolveCall=${describeValue(resolveCall)}`,
+		"",
+		"Adapter shape:",
+		"  {",
+		"    resolveCall(context) { return { usage: \"props\" | \"create\", expr: string, imports: ImportSpec[] } | null }",
 		"  }",
 		"",
 		`Docs/examples: ${ADAPTER_DOCS_URL}`
@@ -97,10 +115,13 @@ var Logger = class Logger {
 		Logger.writeWithSpacing(message, context);
 	}
 	/**
-	* Log an error message to stderr.
+	* Log an error message to stderr with file path and optional location.
+	* Formats like warnings: "Error filepath:line:column\nmessage"
 	*/
-	static error(message, context) {
-		Logger.writeWithSpacing(`${Logger.colorizeErrorLabel("Error")} ${message}`, context);
+	static logError(message, filePath, loc, context) {
+		const location = loc ? `${filePath}:${loc.line}:${loc.column}` : filePath;
+		const label = Logger.colorizeErrorLabel("Error");
+		Logger.writeWithSpacing(`${label} ${location}\n${message}`, context);
 	}
 	/**
 	* Log transform warnings to stderr and collect them.

package/dist/transform.d.mts

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