@plumeria/codemod 18.2.0 → 18.2.2

package/README.md

@@ -1,11 +1,82 @@
 # @plumeria/codemod
 
-Codemods for migrating Plumeria APIs. No install needed — run it with `npx`.
+Codemods for moving a codebase onto Plumeria, and for migrating Plumeria APIs.
+No install needed — run it with `npx`.
 
 ```sh
+npx @plumeria/codemod migrate --from css-modules
 npx @plumeria/codemod rename-prop classStyle sx
 ```
 
+Commit before running, so the rewrite can be reverted with `git checkout`.
+
+## `migrate --from css-modules`
+
+Converts every `*.module.css` under the paths into a `*.styles.ts` beside it,
+and rewrites the files importing it — the import, the `className` prop, the
+class names, and `composes`:
+
+```sh
+npx @plumeria/codemod migrate --from css-modules [paths...]
+```
+
+```css
+/* Card.module.css */
+.base { font-size: 12px }
+.card { composes: base; padding: 16px }
+.card:hover { background: teal }
+.card .card-title { color: red }
+```
+
+```ts
+/* Card.styles.ts */
+import * as css from '@plumeria/core';
+
+export const styles = css.create({
+  base: { fontSize: 12 },
+  card: {
+    ...css.marker('card', ':defined'),
+    padding: 16,
+    ':hover': { background: 'teal' },
+  },
+  cardTitle: {
+    [css.extended('card', ':defined')]: { color: 'red' },
+  },
+});
+```
+
+```diff
+/* Card.tsx */
++ import '@plumeria/core';
+- import styles from './Card.module.css';
++ import { styles } from './Card.styles';
+
+- <div className={styles.card}>
+-   <span className={styles['card-title']} />
++ <div classStyle={[styles.base, styles.card]}>
++   <span classStyle={styles.cardTitle} />
+  </div>
+```
+
+A descendant rule has no combinator to translate into, so it becomes
+`css.marker` on the parent and `css.extended` on the child. Which class is which
+is read from the stylesheet; no markup is inspected. Class names become
+camel-case keys, and a bare pixel length loses its unit.
+
+### What it reports instead of converting
+
+```
+src/Card.module.css
+  10:1  sibling-combinator  .item + .item
+        A marker carries no order. Write the relation as a selector key.
+```
+
+Sibling combinators, `:global`, and a `composes` reaching into another file are
+named rather than guessed at, and the original rule is left in place. The exit
+code is 1 while anything remains, so the command composes with a script.
+
+Pass `-d, --dry-run` to see the stylesheets and consumer counts without writing.
+
 ## `rename-prop`
 
 Renames the styling prop across your source. The names are arguments, so it
@@ -70,5 +141,3 @@ withPlumeria(nextConfig, { styleProp: 'sx' });
 // eslint.config.js
 settings: { plumeria: { styleProp: 'sx' } }
 ```
-
-Commit before running, so the rewrite can be reverted with `git checkout`.

package/dist/cli.js

@@ -42,8 +42,11 @@ const node_path_1 = __importDefault(require("node:path"));
 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 migrate_1 = require("./migrate");
 const { version } = require('../package.json');
-const TRANSFORMS = ['rename-prop'];
+const TRANSFORMS = ['rename-prop', 'migrate'];
+const SOURCES = ['css-modules'];
 const SOURCE_FILES = '**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}';
 const IGNORES = [
     '**/dist/**',
@@ -58,16 +61,19 @@ 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...]
 
 Options
   -d, --dry-run    report what would change without writing
-      --no-types   leave TypeScript declarations untouched
+      --no-types   leave TypeScript declarations untouched (rename-prop)
+      --from       what to migrate from (migrate)
   -h, --help       show this message
   -v, --version    show the version
 
 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
 
 Paths default to the current directory. After the rewrite, point the toolchain
 at the new name with \`styleProp\` on your bundler plugin, and with
@@ -86,7 +92,9 @@ function parseArgs(argv) {
     const positional = [];
     let dryRun = false;
     let includeTypes = true;
-    for (const arg of argv) {
+    let source;
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
         switch (arg) {
             case '-d':
             case '--dry-run':
@@ -95,7 +103,14 @@ function parseArgs(argv) {
             case '--no-types':
                 includeTypes = false;
                 break;
+            case '--from':
+                source = argv[++i];
+                break;
             default:
+                if (arg.startsWith('--from=')) {
+                    source = arg.slice('--from='.length);
+                    break;
+                }
                 if (arg.startsWith('-'))
                     throw new UsageError(`unknown option "${arg}"`);
                 positional.push(arg);
@@ -105,6 +120,20 @@ function parseArgs(argv) {
     if (!TRANSFORMS.includes(transform)) {
         throw new UsageError(`unknown transform "${transform}". Available: ${TRANSFORMS.join(', ')}`);
     }
+    if (transform === 'migrate') {
+        if (!source) {
+            throw new UsageError(`migrate needs --from. Available: ${SOURCES.join(', ')}`);
+        }
+        if (!SOURCES.includes(source)) {
+            throw new UsageError(`unknown source "${source}". Available: ${SOURCES.join(', ')}`);
+        }
+        return {
+            transform: 'migrate',
+            source: source,
+            targets: positional.slice(1).length > 0 ? positional.slice(1) : ['.'],
+            dryRun,
+        };
+    }
     if (!from || !to) {
         throw new UsageError('rename-prop needs both <from> and <to>');
     }
@@ -118,6 +147,7 @@ function parseArgs(argv) {
         throw new UsageError(`"${to}" is already used by React`);
     }
     return {
+        transform: 'rename-prop',
         from,
         to,
         targets: targets.length > 0 ? targets : ['.'],
@@ -170,6 +200,8 @@ async function main(argv) {
     }
     if (!options)
         return 0;
+    if (options.transform === 'migrate')
+        return migrate(options);
     const { from, to, targets, dryRun } = options;
     const baseConfig = {
         overrideConfigFile: true,
@@ -236,3 +268,59 @@ function report(unparsed) {
         console.error(`  ${failure}`);
     return 1;
 }
+function migrateConfig(modules) {
+    return [
+        { ignores: IGNORES },
+        {
+            files: [SOURCE_FILES],
+            languageOptions: {
+                parser: tsParser,
+                parserOptions: {
+                    sourceType: 'module',
+                    ecmaFeatures: { jsx: true },
+                },
+            },
+            plugins: { codemod: { rules: { 'adopt-styles': adopt_styles_1.adoptStyles } } },
+            rules: { 'codemod/adopt-styles': ['error', { modules }] },
+        },
+    ];
+}
+async function migrate(options) {
+    const { targets, dryRun } = options;
+    const cwd = process.cwd();
+    const relative = (filePath) => node_path_1.default.relative(cwd, filePath) || '.';
+    const { stylesheets, modules } = (0, migrate_1.plan)(targets);
+    if (stylesheets.length === 0) {
+        console.log('No *.module.css found.');
+        return 0;
+    }
+    for (const sheet of stylesheets) {
+        console.log(`  ${relative(sheet.source)}  ->  ${relative(sheet.target)}`);
+    }
+    const config = {
+        overrideConfigFile: true,
+        overrideConfig: migrateConfig(modules),
+        errorOnUnmatchedPattern: false,
+    };
+    if (dryRun) {
+        const results = await new eslint_1.ESLint(config).lintFiles(targets);
+        const touched = results.filter((r) => r.messages.length > 0);
+        console.log(`\n${stylesheets.length} stylesheet(s) would be converted, ${touched.length} consumer(s) rewritten.`);
+        console.log('Run without --dry-run to apply.');
+    }
+    else {
+        warnIfDirty();
+        (0, migrate_1.write)(targets);
+        const applied = await new eslint_1.ESLint({ ...config, fix: true }).lintFiles(targets);
+        await eslint_1.ESLint.outputFixes(applied);
+        const touched = applied.filter((r) => r.output !== undefined);
+        console.log(`\n✔ converted ${stylesheets.length} stylesheet(s) and rewrote ${touched.length} consumer(s).`);
+    }
+    const lines = (0, migrate_1.formatReports)(stylesheets, cwd);
+    if (lines.length === 0)
+        return 0;
+    console.log('\nLeft in place — these rules were not converted:\n');
+    for (const line of lines)
+        console.log(line);
+    return 1;
+}

package/dist/migrate.d.ts

@@ -0,0 +1,16 @@
+import type { Report } from './transforms/css-modules';
+import type { ModuleMap } from './transforms/adopt-styles';
+export interface Stylesheet {
+    source: string;
+    target: string;
+    reports: Report[];
+}
+export interface Plan {
+    stylesheets: Stylesheet[];
+    modules: Record<string, ModuleMap>;
+}
+export declare function findStylesheets(targets: string[]): string[];
+export declare const targetPath: (stylesheet: string) => string;
+export declare function plan(targets: string[]): Plan;
+export declare function write(targets: string[]): Plan;
+export declare function formatReports(sheets: Stylesheet[], cwd: string): string[];

package/dist/migrate.js

@@ -0,0 +1,114 @@
+"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.targetPath = void 0;
+exports.findStylesheets = findStylesheets;
+exports.plan = plan;
+exports.write = write;
+exports.formatReports = formatReports;
+const fs = __importStar(require("node:fs"));
+const path = __importStar(require("node:path"));
+const css_modules_1 = require("./transforms/css-modules");
+const IGNORED = new Set([
+    'node_modules',
+    'dist',
+    'build',
+    'out',
+    '.next',
+    '.git',
+    'coverage',
+]);
+function findStylesheets(targets) {
+    const found = [];
+    const walk = (entry) => {
+        const stats = fs.statSync(entry);
+        if (stats.isFile()) {
+            if (entry.endsWith('.module.css'))
+                found.push(path.resolve(entry));
+            return;
+        }
+        for (const name of fs.readdirSync(entry)) {
+            if (IGNORED.has(name))
+                continue;
+            walk(path.join(entry, name));
+        }
+    };
+    for (const target of targets) {
+        try {
+            walk(target);
+        }
+        catch {
+        }
+    }
+    return found.sort();
+}
+const targetPath = (stylesheet) => stylesheet.replace(/\.module\.css$/, '.styles.ts');
+exports.targetPath = targetPath;
+function plan(targets) {
+    const stylesheets = [];
+    const modules = {};
+    for (const source of findStylesheets(targets)) {
+        const converted = (0, css_modules_1.convertStylesheet)(fs.readFileSync(source, 'utf-8'));
+        const target = (0, exports.targetPath)(source);
+        stylesheets.push({ source, target, reports: converted.reports });
+        modules[path.basename(source)] = {
+            source: `./${path.basename(target, '.ts')}`,
+            names: converted.names,
+            composes: converted.composes,
+        };
+    }
+    return { stylesheets, modules };
+}
+function write(targets) {
+    const result = plan(targets);
+    for (const sheet of result.stylesheets) {
+        const converted = (0, css_modules_1.convertStylesheet)(fs.readFileSync(sheet.source, 'utf-8'));
+        fs.writeFileSync(sheet.target, converted.code, 'utf-8');
+    }
+    return result;
+}
+function formatReports(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}  ${report.source}`);
+            lines.push(`        ${report.hint}`);
+        }
+    }
+    return lines;
+}

package/dist/transforms/adopt-styles.d.ts

@@ -0,0 +1,11 @@
+import type { Rule } from 'eslint';
+export interface ModuleMap {
+    source: string;
+    names: Record<string, string>;
+    composes?: Record<string, string[]>;
+}
+export interface AdoptStylesOptions {
+    modules: Record<string, ModuleMap>;
+    styleProp?: string;
+}
+export declare const adoptStyles: Rule.RuleModule;

package/dist/transforms/adopt-styles.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adoptStyles = void 0;
+const CORE = '@plumeria/core';
+const readOptions = (context) => {
+    const raw = (context.options[0] ?? {});
+    return {
+        modules: raw.modules ?? {},
+        styleProp: raw.styleProp ?? 'classStyle',
+    };
+};
+exports.adoptStyles = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Rewrite a CSS Modules import and its usages onto a generated Plumeria module',
+        },
+        fixable: 'code',
+        messages: {
+            source: 'Import the generated styles from "{{source}}" instead of the stylesheet.',
+            core: `Add \`import '${CORE}';\` — the compiler collects a file only when it imports the package.`,
+            key: 'The generated key for "{{from}}" is "{{to}}".',
+            prop: 'Styles are carried by the "{{prop}}" prop.',
+            composes: '"{{key}}" composed other classes; pass them as an array.',
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    modules: { type: 'object' },
+                    styleProp: { type: 'string' },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        const { modules, styleProp } = readOptions(context);
+        const bindings = new Map();
+        let hasCore = false;
+        let stylesTaken = false;
+        return {
+            Program(program) {
+                hasCore = program.body.some((n) => n.type === 'ImportDeclaration' && n.source.value === CORE);
+                stylesTaken = program.body.some((n) => {
+                    if (n.type === 'VariableDeclaration') {
+                        return n.declarations.some((d) => d.id?.name === 'styles');
+                    }
+                    if (n.type === 'ImportDeclaration') {
+                        return n.specifiers.some((sp) => sp.local?.name === 'styles');
+                    }
+                    return ((n.type === 'FunctionDeclaration' ||
+                        n.type === 'ClassDeclaration') &&
+                        n.id?.name === 'styles');
+                });
+            },
+            ImportDeclaration(node) {
+                const specifier = String(node.source.value);
+                const entry = modules[specifier] ??
+                    Object.entries(modules).find(([key]) => key.includes('/') === false && specifier.endsWith(`/${key}`))?.[1];
+                if (!entry)
+                    return;
+                const local = node.specifiers.find((s) => s.type === 'ImportDefaultSpecifier');
+                if (!local)
+                    return;
+                const name = local.local.name;
+                const renamed = stylesTaken && name !== 'styles' ? name : 'styles';
+                bindings.set(name, { entry, local: renamed });
+                const imported = renamed === 'styles'
+                    ? `import { styles } from '${entry.source}';`
+                    : `import { styles as ${renamed} } from '${entry.source}';`;
+                const replacement = hasCore
+                    ? imported
+                    : `import '${CORE}';\n${imported}`;
+                if (!hasCore)
+                    hasCore = true;
+                context.report({
+                    node,
+                    messageId: 'source',
+                    data: { source: entry.source },
+                    fix: (fixer) => fixer.replaceText(node, replacement),
+                });
+            },
+            MemberExpression(node) {
+                const binding = node.object.type === 'Identifier'
+                    ? bindings.get(node.object.name)
+                    : undefined;
+                if (!binding)
+                    return;
+                const written = node.computed && node.property.type === 'Literal'
+                    ? String(node.property.value)
+                    : !node.computed && node.property.type === 'Identifier'
+                        ? node.property.name
+                        : null;
+                if (written === null)
+                    return;
+                const key = binding.entry.names[written] ?? written;
+                const local = binding.local;
+                if (key === written && local === node.object.name)
+                    return;
+                context.report({
+                    node: node.property,
+                    messageId: 'key',
+                    data: { from: written, to: key },
+                    fix: (fixer) => fixer.replaceText(node, `${local}.${key}`),
+                });
+            },
+            JSXAttribute(node) {
+                if (node.name.type !== 'JSXIdentifier')
+                    return;
+                if (node.name.name !== 'className')
+                    return;
+                const value = node.value;
+                if (!value || value.type !== 'JSXExpressionContainer')
+                    return;
+                const expression = value.expression;
+                const root = expression.type === 'MemberExpression' &&
+                    expression.object.type === 'Identifier'
+                    ? expression.object.name
+                    : null;
+                if (!root)
+                    return;
+                const binding = bindings.get(root);
+                if (!binding)
+                    return;
+                const { entry, local } = binding;
+                context.report({
+                    node: node.name,
+                    messageId: 'prop',
+                    data: { prop: styleProp },
+                    fix: (fixer) => fixer.replaceText(node.name, styleProp),
+                });
+                const written = expression.computed && expression.property.type === 'Literal'
+                    ? String(expression.property.value)
+                    : !expression.computed && expression.property.type === 'Identifier'
+                        ? expression.property.name
+                        : null;
+                const key = written === null ? null : (entry.names[written] ?? written);
+                const composed = key ? entry.composes?.[key] : undefined;
+                if (!composed || composed.length === 0)
+                    return;
+                const parts = composed
+                    .concat(key)
+                    .map((k) => `${local}.${k}`)
+                    .join(', ');
+                context.report({
+                    node: expression,
+                    messageId: 'composes',
+                    data: { key: key },
+                    fix: (fixer) => fixer.replaceText(expression, `[${parts}]`),
+                });
+            },
+        };
+    },
+};

package/dist/transforms/css-modules.d.ts

@@ -0,0 +1,19 @@
+export interface Report {
+    line: number;
+    column: number;
+    kind: string;
+    source: string;
+    hint: string;
+}
+export interface Converted {
+    code: string;
+    names: Record<string, string>;
+    composes: Record<string, string[]>;
+    reports: Report[];
+}
+type Value = string | number;
+export declare const toProperty: (name: string) => string;
+export declare const toKey: (className: string) => string;
+export declare const toValue: (raw: string) => Value;
+export declare function convertStylesheet(css: string): Converted;
+export {};

package/dist/transforms/css-modules.js

@@ -0,0 +1,241 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toValue = exports.toKey = exports.toProperty = void 0;
+exports.convertStylesheet = convertStylesheet;
+const postcss_1 = __importDefault(require("postcss"));
+const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
+const DOC = 'https://plumeria.dev/docs/api-reference/javascript/marker';
+const emptyNode = () => ({ decls: [], nested: [], markers: [] });
+const camel = (name) => name.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+const toProperty = (name) => {
+    if (name.startsWith('--'))
+        return name;
+    if (name.startsWith('-')) {
+        const camelised = camel(name.slice(1));
+        return camelised.charAt(0).toUpperCase() + camelised.slice(1);
+    }
+    return camel(name);
+};
+exports.toProperty = toProperty;
+const toKey = (className) => camel(className);
+exports.toKey = toKey;
+const PX = /^-?(\d+\.?\d*|\.\d+)px$/;
+const NUMBER = /^-?(\d+\.?\d*|\.\d+)$/;
+const toValue = (raw) => {
+    const value = raw.trim();
+    if (PX.test(value))
+        return Number(value.slice(0, -2));
+    if (NUMBER.test(value))
+        return Number(value);
+    return value;
+};
+exports.toValue = toValue;
+const nest = (node, key) => {
+    const found = node.nested.find(([k]) => k === key);
+    if (found)
+        return found[1];
+    const child = emptyNode();
+    node.nested.push([key, child]);
+    return child;
+};
+const atRuleKeys = (rule) => {
+    const keys = [];
+    let parent = rule.parent;
+    while (parent && parent.type === 'atrule') {
+        const at = parent;
+        keys.unshift(`@${at.name} ${at.params}`.trim());
+        parent = parent.parent;
+    }
+    return keys;
+};
+const readSelector = (selector) => {
+    let result = {
+        kind: 'unsupported-selector',
+        hint: 'Only a local class, or one local class under another, is converted.',
+    };
+    (0, postcss_selector_parser_1.default)((root) => {
+        const nodes = root.first.nodes.filter((n) => n.type !== 'string');
+        const parts = [
+            { pseudos: [] },
+        ];
+        let combinator = null;
+        let bad = null;
+        for (const node of nodes) {
+            if (node.type === 'class') {
+                const current = parts[parts.length - 1];
+                if (current.className) {
+                    bad = {
+                        kind: 'unsupported-selector',
+                        hint: 'Two classes on one element are written as an array at the call site.',
+                    };
+                    break;
+                }
+                current.className = node.value;
+            }
+            else if (node.type === 'pseudo') {
+                if (node.value === ':global') {
+                    bad = {
+                        kind: 'global',
+                        hint: "A global class is written as a selector key: `':is(.name *)'`.",
+                    };
+                    break;
+                }
+                parts[parts.length - 1].pseudos.push(String(node));
+            }
+            else if (node.type === 'combinator') {
+                const value = node.value.trim();
+                if (value === '+' || value === '~') {
+                    bad = {
+                        kind: 'sibling-combinator',
+                        hint: `A marker carries no order. Write the relation as a selector key: ${DOC}`,
+                    };
+                    break;
+                }
+                if (parts.length > 1) {
+                    bad = {
+                        kind: 'unsupported-selector',
+                        hint: 'Only one level of nesting is converted.',
+                    };
+                    break;
+                }
+                combinator = value === '>' ? '>' : ' ';
+                parts.push({ pseudos: [] });
+            }
+            else {
+                bad = {
+                    kind: 'unsupported-selector',
+                    hint: 'Only a local class, or one local class under another, is converted.',
+                };
+                break;
+            }
+        }
+        if (bad) {
+            result = bad;
+            return;
+        }
+        if (parts.some((p) => !p.className))
+            return;
+        const [first, second] = parts;
+        if (!second) {
+            result = {
+                target: {
+                    key: (0, exports.toKey)(first.className),
+                    pseudo: first.pseudos.join(''),
+                },
+            };
+            return;
+        }
+        result = {
+            target: {
+                key: (0, exports.toKey)(second.className),
+                pseudo: second.pseudos.join(''),
+                ancestor: {
+                    key: (0, exports.toKey)(first.className),
+                    pseudo: first.pseudos.join('') || ':defined',
+                },
+            },
+        };
+        void combinator;
+    }).processSync(selector);
+    return result;
+};
+const serialise = (node, indent) => {
+    const lines = [];
+    for (const marker of node.markers)
+        lines.push(`${indent}...${marker},`);
+    for (const [prop, value] of node.decls) {
+        const key = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(prop) ? prop : `'${prop}'`;
+        lines.push(`${indent}${key}: ${typeof value === 'number' ? value : `'${value}'`},`);
+    }
+    for (const [key, child] of node.nested) {
+        const written = key.startsWith('css.extended(') ? `[${key}]` : `'${key}'`;
+        lines.push(`${indent}${written}: {`);
+        lines.push(serialise(child, indent + '  '));
+        lines.push(`${indent}},`);
+    }
+    return lines.join('\n');
+};
+function convertStylesheet(css) {
+    const root = postcss_1.default.parse(css);
+    const keys = new Map();
+    const names = {};
+    const composes = {};
+    const reports = [];
+    const markerPseudos = new Map();
+    const keyOf = (name) => {
+        if (!keys.has(name))
+            keys.set(name, emptyNode());
+        return keys.get(name);
+    };
+    const report = (node, kind, hint) => {
+        const start = node.source?.start;
+        reports.push({
+            line: start?.line ?? 0,
+            column: start?.column ?? 0,
+            kind,
+            source: node.type === 'rule' ? node.selector : String(node),
+            hint,
+        });
+    };
+    root.walkRules((rule) => {
+        for (const selector of rule.selectors) {
+            const read = readSelector(selector);
+            if (!('target' in read)) {
+                report(rule, read.kind, read.hint);
+                continue;
+            }
+            const { target } = read;
+            for (const className of selector.match(/\.([A-Za-z0-9_-]+)/g) ?? []) {
+                const bare = className.slice(1);
+                const key = (0, exports.toKey)(bare);
+                const taken = Object.entries(names).find(([other, k]) => k === key && other !== bare);
+                if (taken) {
+                    report(rule, 'key-collision', `\`${bare}\` and \`${taken[0]}\` both become \`${key}\`.`);
+                }
+                names[bare] = key;
+            }
+            let node = keyOf(target.key);
+            if (target.ancestor) {
+                const { key: id, pseudo } = target.ancestor;
+                const seen = markerPseudos.get(id) ?? new Set();
+                if (!seen.has(pseudo)) {
+                    seen.add(pseudo);
+                    markerPseudos.set(id, seen);
+                    keyOf(id).markers.push(`css.marker('${id}', '${pseudo}')`);
+                }
+                node = nest(node, `css.extended('${id}', '${pseudo}')`);
+            }
+            for (const key of atRuleKeys(rule))
+                node = nest(node, key);
+            if (target.pseudo)
+                node = nest(node, target.pseudo);
+            rule.each((child) => {
+                if (child.type !== 'decl')
+                    return;
+                if (child.prop === 'composes') {
+                    const [name, from] = child.value.split(/\s+from\s+/);
+                    if (from) {
+                        report(child, 'composes-external', 'A class composed from another file is not resolved.');
+                        return;
+                    }
+                    composes[target.key] = (composes[target.key] ?? []).concat(name.split(/\s+/).map(exports.toKey));
+                    return;
+                }
+                node.decls.push([(0, exports.toProperty)(child.prop), (0, exports.toValue)(child.value)]);
+            });
+        }
+    });
+    const body = [...keys.entries()]
+        .map(([key, node]) => `  ${key}: {\n${serialise(node, '    ')}\n  },`)
+        .join('\n');
+    const code = `import * as css from '@plumeria/core';
+
+export const styles = css.create({
+${body}
+});
+`;
+    return { code, names, composes, reports };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/codemod",
-  "version": "18.2.0",
+  "version": "18.2.2",
   "description": "Codemods for migrating Plumeria APIs",
   "author": "Refirst 11",
   "license": "MIT",
@@ -33,7 +33,9 @@
   ],
   "dependencies": {
     "@typescript-eslint/parser": "^8.60.0",
-    "eslint": "^10.4.1"
+    "eslint": "^10.4.1",
+    "postcss": "8.5.25",
+    "postcss-selector-parser": "^7.1.1"
   },
   "publishConfig": {
     "access": "public",