@plumeria/codemod 18.2.17 → 18.2.18

package/README.md

@@ -5,6 +5,7 @@ No install needed — run it with `npx`.
 
 ```sh
 npx @plumeria/codemod migrate --from css-modules
+npx @plumeria/codemod migrate --from plumeria
 npx @plumeria/codemod rename-prop classStyle sx
 ```
 
@@ -93,6 +94,127 @@ Any rules that cannot be converted are reported in the same run, and the exit
 code remains 1 while such rules are present. Remove `--dry-run` to write the
 generated modules and consumer changes.
 
+## `migrate --from plumeria`
+
+The reverse of the forward migration. Every `css.create` definition under the
+paths becomes a `*.module.css` beside it, and the files that use it are rewritten
+— the import, the `classStyle` prop, and the style composition:
+
+```sh
+npx @plumeria/codemod migrate --from plumeria [paths...]
+```
+
+```tsx
+/* Card.tsx — before */
+import * as css from '@plumeria/core';
+
+export const styles = css.create({
+  base: { fontSize: 12 },
+  card: {
+    padding: 16,
+    ':hover': { background: 'teal' },
+  },
+  size: (width: number) => ({ width }),
+});
+
+export function Card({ width }: { width: number }) {
+  return <div classStyle={[styles.base, styles.card, styles.size(width)]} />;
+}
+```
+
+```css
+/* Card.module.css — generated */
+.base { font-size: 12px }
+.card { padding: 16px }
+.card:hover { background: teal }
+.size { width: var(--styles-size-width) }
+```
+
+```diff
+/* Card.tsx — after */
+- import * as css from '@plumeria/core';
++ import styles from './Card.module.css';
+
+- export const styles = css.create({
+-   base: { fontSize: 12 },
+-   card: {
+-     padding: 16,
+-     ':hover': { background: 'teal' },
+-   },
+-   size: (width: number) => ({ width }),
+- });
++ export { styles };
+
+  export function Card({ width }: { width: number }) {
+-   return <div classStyle={[styles.base, styles.card, styles.size(width)]} />;
++   return (
++     <div
++       className={`${styles.base} ${styles.card} ${styles.size}`}
++       style={{ '--styles-size-width': width }}
++     />
++   );
+  }
+```
+
+A function style key such as `(width) => ({ width })` has no CSS Modules
+equivalent, so each parameter becomes a CSS custom property named
+`--<binding>-<key>-<param>`. The class name stays in `className`; the argument
+values move to the inline `style` prop. If a `style` prop already exists, the
+custom properties are merged into it.
+
+An array on the styling prop is joined into a template literal. When the array
+contains a conditional expression, it uses `.filter(Boolean).join(' ')` instead,
+so the falsy branch drops out at runtime:
+
+```diff
+- <div classStyle={[styles.base, active && styles.active]} />
++ <div className={[styles.base, active && styles.active].filter(Boolean).join(' ')} />
+```
+
+### Global styles
+
+`css.createTheme`, `css.keyframes`, and `css.viewTransition` produce rules that
+belong in a global stylesheet, not in a CSS Module. The codemod extracts them and
+appends them to `src/styles/global.css` (or `styles/global.css` when `src` does
+not exist). Theme tokens become CSS custom properties under `:where(:root)` and
+the theme selector; keyframes become `@keyframes kf-<hash>`; view transitions
+become `::view-transition-*` pseudo-element rules. References in style objects
+are replaced by their generated names.
+
+`css.createStatic` values are statically evaluated and inlined directly into the
+generated CSS rules — no separate output file is needed.
+
+### What it reports instead of converting
+
+```
+src/Card.tsx
+  8:5  dynamic-value
+        The value of `color` cannot be represented statically.
+  12:3  spread-create
+        Top-level spreads cannot name a CSS Module class.
+```
+
+Constructs that cannot be resolved statically — dynamic values, computed keys,
+runtime function calls, object spreads, and multiple `css.create` calls in one
+file — are reported and left in place. A target `*.module.css` that already
+exists is reported as `target-exists` and will not be overwritten.
+
+The exit code is 1 while anything remains, so the command composes with a script.
+
+Start with `-d, --dry-run` to preview the export without writing files:
+
+```sh
+npx @plumeria/codemod migrate --from plumeria --dry-run [paths...]
+```
+
+```
+  src/Card.tsx  ->  src/Card.module.css
+  global styles  ->  src/styles/global.css
+
+1 style module(s) would be exported, 1 source file(s) rewritten.
+Run without --dry-run to apply.
+```
+
 ## `rename-prop`
 
 Renames the styling prop across your source. The names are arguments, so it

package/dist/cli.js

@@ -43,10 +43,12 @@ const eslint_1 = require("eslint");
 const tsParser = __importStar(require("@typescript-eslint/parser"));
 const rename_prop_1 = require("./transforms/rename-prop");
 const adopt_styles_1 = require("./transforms/adopt-styles");
+const release_styles_1 = require("./transforms/release-styles");
 const migrate_1 = require("./migrate");
+const release_1 = require("./release");
 const { version } = require('../package.json');
 const TRANSFORMS = ['rename-prop', 'migrate'];
-const SOURCES = ['css-modules'];
+const SOURCES = ['css-modules', 'plumeria'];
 const SOURCE_FILES = '**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}';
 const IGNORES = [
     '**/dist/**',
@@ -62,6 +64,7 @@ const USAGE = `plumeria-codemod — codemods for migrating Plumeria APIs
 Usage
   npx @plumeria/codemod rename-prop <from> <to> [paths...]
   npx @plumeria/codemod migrate --from css-modules [paths...]
+  npx @plumeria/codemod migrate --from plumeria [paths...]
 
 Options
   -d, --dry-run    report what would change without writing
@@ -74,6 +77,7 @@ Examples
   npx @plumeria/codemod rename-prop classStyle sx
   npx @plumeria/codemod rename-prop classStyle sx src app --dry-run
   npx @plumeria/codemod migrate --from css-modules
+  npx @plumeria/codemod migrate --from plumeria --dry-run
 
 Paths default to the current directory. After the rewrite, point the toolchain
 at the new name with \`styleProp\` on your bundler plugin, and with
@@ -200,8 +204,11 @@ async function main(argv) {
     }
     if (!options)
         return 0;
-    if (options.transform === 'migrate')
-        return migrate(options);
+    if (options.transform === 'migrate') {
+        return options.source === 'plumeria'
+            ? migrateFromPlumeria(options)
+            : migrateFromCssModules(options);
+    }
     const { from, to, targets, dryRun } = options;
     const baseConfig = {
         overrideConfigFile: true,
@@ -285,7 +292,7 @@ function migrateConfig(modules) {
         },
     ];
 }
-async function migrate(options) {
+async function migrateFromCssModules(options) {
     const { targets, dryRun } = options;
     const cwd = process.cwd();
     const relative = (filePath) => node_path_1.default.relative(cwd, filePath) || '.';
@@ -324,3 +331,65 @@ async function migrate(options) {
         console.log(line);
     return 1;
 }
+function releaseConfig(modules, themes, animations) {
+    return [
+        { ignores: IGNORES },
+        {
+            files: [SOURCE_FILES],
+            languageOptions: {
+                parser: tsParser,
+                parserOptions: {
+                    sourceType: 'module',
+                    ecmaFeatures: { jsx: true },
+                },
+            },
+            plugins: { codemod: { rules: { 'release-styles': release_styles_1.releaseStyles } } },
+            rules: {
+                'codemod/release-styles': ['error', { modules, themes, animations }],
+            },
+        },
+    ];
+}
+async function migrateFromPlumeria(options) {
+    const { targets, dryRun } = options;
+    const cwd = process.cwd();
+    const relative = (filePath) => node_path_1.default.relative(cwd, filePath) || '.';
+    const planned = (0, release_1.planRelease)(targets);
+    if (planned.stylesheets.length === 0 &&
+        Object.keys(planned.themes).length === 0 &&
+        Object.keys(planned.animations).length === 0) {
+        console.log('No Plumeria styles found.');
+        return 0;
+    }
+    for (const sheet of planned.stylesheets) {
+        console.log(`  ${relative(sheet.source)}  ->  ${relative(sheet.target)}`);
+    }
+    if (planned.global) {
+        console.log(`  global styles  ->  ${relative(planned.global.target)}`);
+    }
+    const config = {
+        overrideConfigFile: true,
+        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations),
+        errorOnUnmatchedPattern: false,
+    };
+    const preview = await new eslint_1.ESLint(config).lintFiles(targets);
+    const touched = preview.filter((result) => result.messages.some((message) => message.fix));
+    if (dryRun) {
+        console.log(`\n${Object.keys(planned.modules).length} style module(s) would be exported, ${touched.length} source file(s) rewritten.`);
+        console.log('Run without --dry-run to apply.');
+    }
+    else {
+        warnIfDirty();
+        (0, release_1.writeRelease)(planned);
+        const applied = await new eslint_1.ESLint({ ...config, fix: true }).lintFiles(targets);
+        await eslint_1.ESLint.outputFixes(applied);
+        console.log(`\n✔ exported ${Object.keys(planned.modules).length} style module(s) and rewrote ${touched.length} source file(s).`);
+    }
+    const lines = (0, release_1.formatReleaseReports)(planned.stylesheets, cwd);
+    if (lines.length === 0)
+        return 0;
+    console.log('\nLeft in Plumeria — these styles were not exported:\n');
+    for (const line of lines)
+        console.log(line);
+    return 1;
+}

package/dist/release.d.ts

@@ -0,0 +1,22 @@
+import type { PlumeriaReport } from './transforms/from-plumeria';
+import type { ReleaseModule } from './transforms/release-styles';
+export interface ReleasedStylesheet {
+    source: string;
+    target: string;
+    css: string;
+    reports: PlumeriaReport[];
+}
+export interface ReleasePlan {
+    stylesheets: ReleasedStylesheet[];
+    modules: Record<string, ReleaseModule>;
+    themes: Record<string, string[]>;
+    animations: Record<string, string[]>;
+    global?: {
+        target: string;
+        css: string;
+    };
+}
+export declare const releasedPath: (source: string) => string;
+export declare function planRelease(targets: string[]): ReleasePlan;
+export declare function writeRelease(plan: ReleasePlan): void;
+export declare function formatReleaseReports(sheets: ReleasedStylesheet[], cwd: string): string[];

package/dist/release.js

@@ -0,0 +1,268 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.releasedPath = void 0;
+exports.planRelease = planRelease;
+exports.writeRelease = writeRelease;
+exports.formatReleaseReports = formatReleaseReports;
+const fs = __importStar(require("node:fs"));
+const path = __importStar(require("node:path"));
+const parser_1 = require("@typescript-eslint/parser");
+const from_plumeria_1 = require("./transforms/from-plumeria");
+const EXTENSION = /\.(?:[cm]?[jt]sx?)$/;
+const IGNORED = new Set([
+    'node_modules',
+    'dist',
+    'build',
+    'out',
+    '.next',
+    '.git',
+    'coverage',
+]);
+const findSources = (targets) => {
+    const found = [];
+    const walk = (entry) => {
+        const stats = fs.statSync(entry);
+        if (stats.isFile()) {
+            if (EXTENSION.test(entry))
+                found.push(path.resolve(entry));
+            return;
+        }
+        for (const name of fs.readdirSync(entry)) {
+            if (!IGNORED.has(name))
+                walk(path.join(entry, name));
+        }
+    };
+    for (const target of targets) {
+        try {
+            walk(target);
+        }
+        catch {
+        }
+    }
+    return found.sort();
+};
+const releasedPath = (source) => source.replace(/\.[^.]+$/, '.module.css');
+exports.releasedPath = releasedPath;
+const globalPath = (targets) => {
+    const first = path.resolve(targets[0]);
+    const root = fs.existsSync(first) && fs.statSync(first).isDirectory()
+        ? first
+        : path.dirname(first);
+    const candidates = [
+        path.join(root, 'src', 'styles', 'global.css'),
+        path.join(root, 'styles', 'global.css'),
+    ];
+    return (candidates.find((candidate) => fs.existsSync(candidate)) ??
+        (fs.existsSync(path.join(root, 'src')) ? candidates[0] : candidates[1]));
+};
+function planRelease(targets) {
+    const stylesheets = [];
+    const modules = {};
+    const themes = {};
+    const animations = {};
+    const globalRules = [];
+    const sources = findSources(targets);
+    const sourceText = new Map(sources.map((source) => [source, fs.readFileSync(source, 'utf8')]));
+    const themeValues = new Map();
+    const animationValues = new Map();
+    for (const source of sources) {
+        try {
+            const extracted = (0, from_plumeria_1.extractPlumeriaThemes)(sourceText.get(source));
+            if (Object.keys(extracted.bindings).length === 0)
+                continue;
+            themeValues.set(source, extracted.bindings);
+            themes[source] = Object.keys(extracted.bindings);
+            globalRules.push(extracted.globalCss.trim());
+        }
+        catch {
+        }
+    }
+    for (const source of sources) {
+        try {
+            const extracted = (0, from_plumeria_1.extractPlumeriaAnimations)(sourceText.get(source), {
+                ...(themeValues.get(source) ?? {}),
+            });
+            if (Object.keys(extracted.bindings).length > 0)
+                animationValues.set(source, extracted.bindings);
+        }
+        catch {
+        }
+    }
+    const sourceForImport = (owner, specifier, candidates) => {
+        const resolved = path.resolve(path.dirname(owner), specifier);
+        const stem = resolved.replace(/\.[^.]+$/, '');
+        return [...candidates].find((candidate) => candidate.replace(/\.[^.]+$/, '') === stem);
+    };
+    const importedValues = (source, availableBySource) => {
+        const result = {};
+        const ast = (0, parser_1.parse)(sourceText.get(source), {
+            sourceType: 'module',
+            ecmaFeatures: { jsx: true },
+        });
+        for (const node of ast.body) {
+            if (node.type !== 'ImportDeclaration' ||
+                typeof node.source.value !== 'string' ||
+                !node.source.value.startsWith('.'))
+                continue;
+            const target = sourceForImport(source, node.source.value, availableBySource.keys());
+            if (!target)
+                continue;
+            const available = availableBySource.get(target);
+            for (const specifier of node.specifiers) {
+                if (specifier.type === 'ImportSpecifier') {
+                    const imported = specifier.imported.name ?? specifier.imported.value;
+                    if (available[imported])
+                        result[specifier.local.name] = available[imported];
+                }
+                else if (specifier.type === 'ImportNamespaceSpecifier') {
+                    result[specifier.local.name] = available;
+                }
+            }
+        }
+        return result;
+    };
+    const importedThemes = (source) => importedValues(source, themeValues);
+    const importedAnimations = (source) => importedValues(source, animationValues);
+    const importedPlumeriaValues = (source) => {
+        const merged = { ...importedThemes(source) };
+        for (const [key, value] of Object.entries(importedAnimations(source))) {
+            const previous = merged[key];
+            merged[key] =
+                previous &&
+                    typeof previous === 'object' &&
+                    value &&
+                    typeof value === 'object'
+                    ? { ...previous, ...value }
+                    : value;
+        }
+        return merged;
+    };
+    for (const source of sources) {
+        try {
+            const extracted = (0, from_plumeria_1.extractPlumeriaAnimations)(sourceText.get(source), {
+                ...importedPlumeriaValues(source),
+                ...(themeValues.get(source) ?? {}),
+            });
+            if (Object.keys(extracted.bindings).length === 0)
+                continue;
+            animationValues.set(source, extracted.bindings);
+            animations[source] = [
+                ...extracted.keyframes,
+                ...extracted.viewTransitions,
+            ];
+            globalRules.push(extracted.globalCss.trim());
+        }
+        catch {
+        }
+    }
+    for (const source of sources) {
+        let converted;
+        try {
+            converted = (0, from_plumeria_1.convertPlumeriaModule)(sourceText.get(source), importedPlumeriaValues(source));
+        }
+        catch {
+            continue;
+        }
+        if (!converted)
+            continue;
+        const target = (0, exports.releasedPath)(source);
+        const specifier = `./${path.basename(target)}`;
+        const reports = [...converted.reports];
+        if (fs.existsSync(target)) {
+            reports.push({
+                line: 0,
+                column: 0,
+                kind: 'target-exists',
+                hint: `${path.basename(target)} already exists and was not overwritten.`,
+            });
+        }
+        stylesheets.push({
+            source,
+            target,
+            css: converted.css,
+            reports,
+        });
+        if (reports.length === 0) {
+            modules[source] = {
+                source: specifier,
+                binding: converted.binding,
+                ...(Object.keys(converted.functions).length > 0
+                    ? { functions: converted.functions }
+                    : {}),
+            };
+        }
+    }
+    return {
+        stylesheets,
+        modules,
+        themes,
+        animations,
+        global: globalRules.length > 0
+            ? {
+                target: globalPath(targets),
+                css: `/* Generated from css.createTheme, css.keyframes, and css.viewTransition by @plumeria/codemod */\n${globalRules.join('\n\n')}\n`,
+            }
+            : undefined,
+    };
+}
+function writeRelease(plan) {
+    for (const sheet of plan.stylesheets) {
+        if (sheet.reports.length > 0)
+            continue;
+        fs.writeFileSync(sheet.target, sheet.css, 'utf8');
+    }
+    if (plan.global) {
+        fs.mkdirSync(path.dirname(plan.global.target), { recursive: true });
+        const previous = fs.existsSync(plan.global.target)
+            ? fs.readFileSync(plan.global.target, 'utf8')
+            : '';
+        const separator = previous.length > 0 && !previous.endsWith('\n') ? '\n\n' : '';
+        fs.writeFileSync(plan.global.target, `${previous}${separator}${plan.global.css}`, 'utf8');
+    }
+}
+function formatReleaseReports(sheets, cwd) {
+    const lines = [];
+    for (const sheet of sheets) {
+        if (sheet.reports.length === 0)
+            continue;
+        lines.push(path.relative(cwd, sheet.source) || sheet.source);
+        for (const report of sheet.reports) {
+            lines.push(`  ${report.line}:${report.column}  ${report.kind}`);
+            lines.push(`        ${report.hint}`);
+        }
+    }
+    return lines;
+}

package/dist/transforms/from-plumeria.d.ts

@@ -0,0 +1,37 @@
+export interface PlumeriaReport {
+    line: number;
+    column: number;
+    kind: string;
+    hint: string;
+}
+export interface PlumeriaModule {
+    binding: string;
+    css: string;
+    globalCss: string;
+    keys: string[];
+    functions: Record<string, {
+        params: string[];
+        variables: string[];
+    }>;
+    reports: PlumeriaReport[];
+}
+export interface ThemeExtraction {
+    bindings: Record<string, Record<string, string>>;
+    globalCss: string;
+    reports: PlumeriaReport[];
+}
+export interface AnimationExtraction {
+    bindings: Record<string, string>;
+    keyframes: string[];
+    viewTransitions: string[];
+    globalCss: string;
+    reports: PlumeriaReport[];
+}
+export declare const __private: {
+    propertyKey: (node: any) => string | undefined;
+    memberPath: (node: any) => string[] | undefined;
+    evaluate: (node: any, values: Map<string, unknown>) => unknown;
+};
+export declare function extractPlumeriaThemes(source: string): ThemeExtraction;
+export declare function extractPlumeriaAnimations(source: string, externalValues?: Record<string, unknown>): AnimationExtraction;
+export declare function convertPlumeriaModule(source: string, externalValues?: Record<string, unknown>): PlumeriaModule | null;