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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",
@@ -32,43 +32,47 @@
     "jscodeshift": "^17.3.0",
     "postcss-selector-parser": "^7.1.1",
     "postcss-value-parser": "^4.2.0",
-    "stylis": "^4.3.2"
+    "stylis": "^4.3.6"
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.2.4",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@storybook/react": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
-    "@stylexjs/babel-plugin": "^0.17.4",
+    "@storybook/react-vite": "^10.2.7",
+    "@stylexjs/babel-plugin": "^0.17.5",
     "@stylexjs/eslint-plugin": "^0.17.5",
-    "@stylexjs/stylex": "^0.17.4",
-    "@stylexjs/unplugin": "^0.17.4",
+    "@stylexjs/stylex": "^0.17.5",
+    "@stylexjs/unplugin": "^0.17.5",
     "@types/jscodeshift": "^17.3.0",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@types/stylis": "^4.2.5",
-    "@typescript-eslint/parser": "^8.53.0",
+    "@types/stylis": "^4.2.7",
+    "@typescript-eslint/parser": "^8.54.0",
     "@uiw/react-codemirror": "^4.25.4",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/coverage-v8": "^4.0.16",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitest/coverage-v8": "^4.0.18",
     "assert": "^2.1.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
-    "knip": "^5.81.0",
-    "lefthook": "^2.0.13",
-    "oxfmt": "^0.20.0",
-    "oxlint": "^1.35.0",
-    "oxlint-tsgolint": "^0.10.1",
+    "eslint-plugin-storybook": "10.2.7",
+    "knip": "^5.83.1",
+    "lefthook": "^2.1.0",
+    "oxfmt": "^0.28.0",
+    "oxlint": "^1.43.0",
+    "oxlint-tsgolint": "^0.11.4",
     "path-browserify": "^1.0.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "storybook": "^10.1.10",
-    "styled-components": "^6.1.19",
-    "tsdown": "^0.18.3",
+    "pixelmatch": "^7.1.0",
+    "playwright": "^1.58.2",
+    "pngjs": "^7.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-select": "^5.10.2",
+    "storybook": "^10.2.7",
+    "styled-components": "^6.3.8",
+    "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "engines": {
     "node": ">=22.20",
@@ -81,6 +85,7 @@
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
     "format": "oxfmt",
+    "format:check": "oxfmt --check",
     "lint": "concurrently 'pnpm:lint:oxlint' 'pnpm:lint:eslint'",
     "lint:oxlint": "oxlint --type-aware --deny-warnings",
     "lint:eslint": "eslint . --cache --max-warnings=0 --no-warn-ignored",
@@ -88,10 +93,12 @@
     "typecheck:fixtures": "tsc -p test-cases/tsconfig.json --noEmit",
     "typecheck:playground": "tsc -p playground/tsconfig.json --noEmit",
     "typecheck": "concurrently 'pnpm:typecheck:*'",
-    "check": "concurrently 'pnpm:lint' 'pnpm:typecheck' 'pnpm:test:run' 'pnpm:knip'",
-    "ci": "pnpm lint && pnpm typecheck && pnpm test:run && pnpm knip && pnpm build",
+    "check": "concurrently 'pnpm:lint' 'pnpm:typecheck' 'pnpm:test:run' 'pnpm:knip' 'pnpm:storybook:build' 'pnpm:build' 'pnpm:format:check'",
+    "ci": "pnpm lint && pnpm typecheck && pnpm test:run && pnpm knip && pnpm storybook:build && pnpm build && pnpm format:check",
     "knip": "knip",
+    "verify-rendering": "node scripts/verify-storybook-rendering.mts",
     "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "playground": "vite --config playground/vite.config.ts",
     "build:playground": "vite build --config playground/vite.config.ts"
   }

package/dist/logger-CNmtK-uJ.d.mts

@@ -1,250 +0,0 @@
-//#region src/adapter.d.ts
-/**
- * Adapter - Single user entry point for customizing the codemod.
- */
-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;
-  /**
-   * 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.
-   */
-  callSiteFilePath: string;
-  /**
-   * Imported name when the callee is a named import (including aliases).
-   * Example: `import { transitionSpeed as ts } ...; ts("x")` -> "transitionSpeed"
-   */
-  calleeImportedName: string;
-  /**
-   * Import source for this call: either an absolute file path (relative imports)
-   * or the module specifier (package imports).
-   */
-  calleeSource: {
-    kind: "absolutePath";
-    value: string;
-  } | {
-    kind: "specifier";
-    value: string;
-  };
-  /**
-   * Call arguments (only literals are surfaced precisely; everything else is `unknown`).
-   */
-  args: Array<{
-    kind: "literal";
-    value: string | number | boolean | null;
-  } | {
-    kind: "unknown";
-  }>;
-};
-/**
- * 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`
-   */
-  expr: string;
-  /**
-   * Import statements required by `expr`.
-   * These are rendered and merged into the file by the codemod.
-   */
-  imports: ImportSpec[];
-  /**
-   * 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;
-} | {
-  kind: "specifier";
-  value: string;
-};
-type ImportSpec = {
-  from: ImportSource;
-  names: Array<{
-    imported: string;
-    local?: string;
-  }>;
-};
-interface ExternalStylesContext {
-  /** Absolute path of the file being transformed */
-  filePath: string;
-  /** Local name of the styled component */
-  componentName: string;
-  /** The export name (may differ from componentName for renamed exports) */
-  exportName: string;
-  /** Whether it's a default export */
-  isDefaultExport: boolean;
-}
-/**
- * Configuration for a custom style merger function that combines stylex.props()
- * results with external className/style props.
- *
- * When configured, generates cleaner output:
- *   `{...stylexProps(styles.foo, className, style)}`
- * instead of the verbose pattern:
- *   `{...sx} className={[sx.className, className].filter(Boolean).join(" ")} style={{...sx.style, ...style}}`
- */
-interface StyleMergerConfig {
-  /**
-   * Function name to use for merging (e.g., "stylexProps" or "mergeStylexProps").
-   */
-  functionName: string;
-  /**
-   * Import source for the merger function.
-   * Example: `{ kind: "specifier", value: "@company/ui-utils" }`
-   */
-  importSource: ImportSource;
-}
-interface Adapter {
-  /**
-   * 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
-   * className/style/rest merging.
-   */
-  shouldSupportExternalStyling: (context: ExternalStylesContext) => boolean;
-  /**
-   * Custom merger function for className/style combining.
-   * When provided, generates cleaner output using this function instead of
-   * the verbose className/style merging pattern.
-   * Set to `null` to use the verbose pattern (default).
-   *
-   * Expected merger function signature:
-   * ```typescript
-   * function merger(
-   *   styles: StyleXStyles | StyleXStyles[],
-   *   className?: string,
-   *   style?: React.CSSProperties
-   * ): { className?: string; style?: React.CSSProperties }
-   * ```
-   */
-  styleMerger: StyleMergerConfig | null;
-}
-/**
- * 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 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;
-//#endregion
-//#region src/internal/logger.d.ts
-type Severity = "info" | "warning" | "error";
-interface WarningLog {
-  severity: Severity;
-  type: "unsupported-feature" | "dynamic-node";
-  message: string;
-  loc?: {
-    line: number;
-    column: number;
-  };
-  context?: unknown;
-}
-interface CollectedWarning extends WarningLog {
-  filePath: string;
-}
-//#endregion
-export { defineAdapter as i, WarningLog as n, Adapter as r, CollectedWarning as t };

package/dist/logger-DKelw2HS.mjs

@@ -1,177 +0,0 @@
-//#region src/internal/public-api-validation.ts
-function describeValue(value) {
-	if (value === null) return "null";
-	if (value === void 0) return "undefined";
-	if (Array.isArray(value)) return `Array(${value.length})`;
-	if (typeof value === "string") return `"${value}"`;
-	if (typeof value === "number" || typeof value === "boolean") return String(value);
-	if (typeof value === "bigint") return value.toString();
-	if (typeof value === "symbol") return value.description ? `Symbol(${value.description})` : "Symbol()";
-	if (typeof value === "function") return "[Function]";
-	if (typeof value === "object") {
-		const ctor = value?.constructor?.name ?? "Object";
-		let keys = [];
-		try {
-			keys = Object.keys(value);
-		} catch {}
-		const preview = keys.slice(0, 5).join(", ");
-		const suffix = keys.length > 5 ? ", ..." : "";
-		return keys.length ? `${ctor} { ${preview}${suffix} }` : ctor;
-	}
-	return "[Unknown]";
-}
-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.`,
-		`Received: ${describeValue(candidate)}`,
-		"",
-		"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? }",
-		"",
-		"resolveCall(context) is called with:",
-		"  - { callSiteFilePath, calleeImportedName, calleeSource, args }",
-		"",
-		`Docs/examples: ${ADAPTER_DOCS_URL}`
-	].join("\n"));
-	if (typeof resolveValue !== "function") throw new Error([
-		`${where}: adapter.resolveValue must be a function.`,
-		`Received: resolveValue=${describeValue(resolveValue)}`,
-		"",
-		"Adapter shape:",
-		"  {",
-		"    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}`
-	].join("\n"));
-	if (typeof shouldSupportExternalStyling !== "function") throw new Error([`${where}: adapter.shouldSupportExternalStyling must be a function.`, `Received: shouldSupportExternalStyling=${describeValue(shouldSupportExternalStyling)}`].join("\n"));
-	const styleMerger = obj?.styleMerger;
-	if (styleMerger !== null && styleMerger !== void 0) {
-		if (typeof styleMerger !== "object") throw new Error([
-			`${where}: adapter.styleMerger must be null or an object.`,
-			`Received: styleMerger=${describeValue(styleMerger)}`,
-			"",
-			"Expected shape:",
-			"  {",
-			"    functionName: \"stylexProps\",",
-			"    importSource: { kind: \"specifier\", value: \"@company/ui-utils\" }",
-			"  }"
-		].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)}`,
-			"",
-			"Expected shape:",
-			"  { kind: \"specifier\", value: \"@company/ui-utils\" }",
-			"  or",
-			"  { kind: \"absolutePath\", value: \"/path/to/module.ts\" }"
-		].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 ADAPTER_DOCS_URL = `https://github.com/skovhus/styled-components-to-stylex-codemod#adapter`;
-
-//#endregion
-//#region src/internal/logger.ts
-var Logger = class Logger {
-	static flushWarnings() {
-		const result = collected;
-		collected = [];
-		return result;
-	}
-	/**
-	* Log a warning message to stderr.
-	* All codemod warnings go through this so tests can mock it.
-	*/
-	static warn(message, context) {
-		Logger.writeWithSpacing(message, context);
-	}
-	/**
-	* Log an error message to stderr with file path and optional location.
-	* Formats like warnings: "Error filepath:line:column\nmessage"
-	*/
-	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.
-	*/
-	static logWarnings(warnings, filePath) {
-		for (const warning of warnings) {
-			collected.push({
-				...warning,
-				filePath
-			});
-			const location = warning.loc ? `${filePath}:${warning.loc.line}:${warning.loc.column}` : `${filePath}`;
-			const label = Logger.colorizeSeverityLabel(warning.severity);
-			Logger.writeWithSpacing(`${label} ${location}\n${warning.message}`, warning.context);
-		}
-	}
-	static writeWithSpacing(message, context) {
-		const trimmed = message.replace(/\s+$/u, "");
-		const serialized = Logger.formatContext(context);
-		process.stderr.write(`${trimmed}${serialized ? `\n${serialized}` : ""}\n\n`);
-	}
-	static colorizeSeverityLabel(severity) {
-		if (severity === "error") return Logger.colorizeErrorLabel("Error");
-		if (severity === "info") return Logger.colorizeInfoLabel("Info");
-		return Logger.colorizeWarnLabel("Warning");
-	}
-	static colorizeWarnLabel(label) {
-		if (!process.stderr.isTTY) return label;
-		return `${WARN_BG_COLOR}${WARN_TEXT_COLOR}${label}${RESET_COLOR}`;
-	}
-	static colorizeErrorLabel(label) {
-		if (!process.stderr.isTTY) return label;
-		return `${ERROR_BG_COLOR}${ERROR_TEXT_COLOR}${label}${RESET_COLOR}`;
-	}
-	static colorizeInfoLabel(label) {
-		if (!process.stderr.isTTY) return label;
-		return `${INFO_BG_COLOR}${INFO_TEXT_COLOR}${label}${RESET_COLOR}`;
-	}
-	static formatContext(context) {
-		if (typeof context === "undefined") return null;
-		return JSON.stringify(context, null, 2);
-	}
-};
-let collected = [];
-const WARN_BG_COLOR = "\x1B[43m";
-const WARN_TEXT_COLOR = "\x1B[30m";
-const ERROR_BG_COLOR = "\x1B[41m";
-const ERROR_TEXT_COLOR = "\x1B[37m";
-const INFO_BG_COLOR = "\x1B[44m";
-const INFO_TEXT_COLOR = "\x1B[37m";
-const RESET_COLOR = "\x1B[0m";
-
-//#endregion
-export { assertValidAdapter as n, describeValue as r, Logger as t };