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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components-to-stylex-codemod",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Codemod to transform styled-components to StyleX",
   "keywords": [
     "codemod",
@@ -32,43 +32,44 @@
     "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",
+    "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 +82,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 +90,11 @@
     "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",
     "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 };