@plumeria/codemod 18.2.19 → 18.2.21

package/README.md

@@ -134,6 +134,7 @@ export function Card({ width }: { width: number }) {
 /* Card.tsx — after */
 - import * as css from '@plumeria/core';
 + import styles from './Card.module.css';
++ export { styles };
 
 - export const styles = css.create({
 -   base: { fontSize: 12 },
@@ -143,14 +144,13 @@ export function Card({ width }: { width: number }) {
 -   },
 -   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 }}
++       className={[styles.base, styles.card, styles.size].join(' ')}
++       style={{ ['--styles-size-width' as string]: width }}
 +     />
 +   );
   }
@@ -162,15 +162,54 @@ equivalent, so each parameter becomes a CSS custom property named
 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:
+An array with no condition in it collapses into one class that `composes` its
+members, so nothing is duplicated:
+
+```diff
+- <div classStyle={[styles.base, styles.card]} />
++ <div className={styles.baseCard} />
+```
+
+Otherwise the array is joined as it stands. `filter` is added only when a
+condition can make a member falsy, so that branch drops out at runtime:
 
 ```diff
+- <div classStyle={[styles.base, styles.card, styles.size(width)]} />
++ <div className={[styles.base, styles.card, styles.size].join(' ')} style={{ … }} />
+
 - <div classStyle={[styles.base, active && styles.active]} />
 + <div className={[styles.base, active && styles.active].filter(Boolean).join(' ')} />
 ```
 
+`classStyle={[b, a]}` gives `a` the last word, while a stylesheet gives it to
+whichever rule is written later. The export reproduces the array order by
+emitting the classes in an order that satisfies every call site at once. Where
+two call sites compose the same pair in opposite orders, the one that cannot be
+satisfied carries an extra class holding only the disputed declarations, applied
+under the same condition as the style that has to win:
+
+```diff
+- <div classStyle={[styles.raised, flat && styles.surface]} />
++ <div className={[styles.raised, flat && styles.surface, flat && styles.surfaceOverRaised].filter(Boolean).join(' ')} />
+```
+
+Order is only forced where the two classes actually disagree, measured per
+at-rule and per selector. Anything left unsettled is reported as
+`composition-order`.
+
+A variant picked with a bracket is resolved to the class its key names, whether
+the constant is declared in the same file or imported, and a constant left
+naming nothing is removed with it:
+
+```diff
+- const size = 'small';
+- <div classStyle={styles[size]} />
++ <div className={styles.small} />
+```
+
+Only a `const` holding a string literal is followed. A key computed at runtime is
+reported as `dynamic-style-access` and its definitions stay in Plumeria.
+
 ### Global styles
 
 `css.createTheme`, `css.keyframes`, and `css.viewTransition` produce rules that
@@ -195,12 +234,25 @@ src/Card.tsx
 ```
 
 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.
+runtime function calls, and object spreads — are reported and left in place,
+together with every file whose definitions they still need. A target
+`*.module.css` that already exists is reported as `target-exists` and will not be
+overwritten.
+
+Several `css.create` calls in one file are not reported: they are written to the
+same stylesheet, and a key an earlier call claimed is renamed.
 
 The exit code is 1 while anything remains, so the command composes with a script.
 
+The migration is idempotent — the first run converts, every run after it is a
+fixed point:
+
+```
+f(f(x)) = f(x)
+```
+
+Clear a report and run again, and only the newly resolvable files move.
+
 Start with `-d, --dry-run` to preview the export without writing files:
 
 ```sh

package/dist/cli.js

@@ -331,7 +331,7 @@ async function migrateFromCssModules(options) {
         console.log(line);
     return 1;
 }
-function releaseConfig(modules, themes, animations, statics) {
+function releaseConfig(modules, themes, animations, statics, values, complete, constants) {
     return [
         { ignores: IGNORES },
         {
@@ -347,7 +347,15 @@ function releaseConfig(modules, themes, animations, statics) {
             rules: {
                 'codemod/release-styles': [
                     'error',
-                    { modules, themes, animations, statics },
+                    {
+                        modules,
+                        themes,
+                        animations,
+                        statics,
+                        values,
+                        complete,
+                        constants,
+                    },
                 ],
             },
         },
@@ -365,6 +373,8 @@ async function migrateFromPlumeria(options) {
         return 0;
     }
     for (const sheet of planned.stylesheets) {
+        if (sheet.reports.length > 0)
+            continue;
         console.log(`  ${relative(sheet.source)}  ->  ${relative(sheet.target)}`);
     }
     if (planned.global) {
@@ -372,7 +382,7 @@ async function migrateFromPlumeria(options) {
     }
     const config = {
         overrideConfigFile: true,
-        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations, planned.statics),
+        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations, planned.statics, planned.values, planned.complete, planned.constants),
         errorOnUnmatchedPattern: false,
     };
     const preview = await new eslint_1.ESLint(config).lintFiles(targets);

package/dist/migrate.js

@@ -83,10 +83,12 @@ function plan(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)] = {
+        modules[source] = {
             source: `./${path.basename(target, '.ts')}`,
+            target,
             names: converted.names,
             composes: converted.composes,
+            functions: converted.functions,
         };
     }
     return { stylesheets, modules };

package/dist/release.d.ts

@@ -12,6 +12,9 @@ export interface ReleasePlan {
     themes: Record<string, string[]>;
     animations: Record<string, string[]>;
     statics: Record<string, string[]>;
+    values: Record<string, Record<string, unknown>>;
+    complete: boolean;
+    constants: Record<string, Record<string, string>>;
     global?: {
         target: string;
         css: string;

package/dist/release.js

@@ -42,6 +42,8 @@ const path = __importStar(require("node:path"));
 const parser_1 = require("@typescript-eslint/parser");
 const resolve_1 = require("./resolve");
 const from_plumeria_1 = require("./transforms/from-plumeria");
+const GLOBAL_OPEN = '/* Generated from css.createTheme, css.keyframes, and css.viewTransition by @plumeria/codemod */';
+const GLOBAL_CLOSE = '/* End of @plumeria/codemod generated styles */';
 const EXTENSION = /\.(?:[cm]?[jt]sx?)$/;
 const IGNORED = new Set([
     'node_modules',
@@ -75,6 +77,44 @@ const findSources = (targets) => {
     }
     return found.sort();
 };
+const STYLE_PROP = 'classStyle';
+const memberOf = (node) => {
+    if (node?.type !== 'MemberExpression' || node.object.type !== 'Identifier')
+        return undefined;
+    const key = node.computed
+        ? node.property.type === 'Literal'
+            ? String(node.property.value)
+            : undefined
+        : node.property.name;
+    return key === undefined ? undefined : { object: node.object.name, key };
+};
+const slotOf = (node) => {
+    const member = memberOf(node);
+    if (member)
+        return [member];
+    if (node?.type === 'LogicalExpression')
+        return slotOf(node.right);
+    if (node?.type === 'ConditionalExpression')
+        return [...slotOf(node.consequent), ...slotOf(node.alternate)];
+    return [];
+};
+const walk = (node, visit) => {
+    if (!node || typeof node !== 'object')
+        return;
+    if (Array.isArray(node)) {
+        for (const child of node)
+            walk(child, visit);
+        return;
+    }
+    if (typeof node.type !== 'string')
+        return;
+    visit(node);
+    for (const key of Object.keys(node)) {
+        if (key === 'parent' || key === 'loc' || key === 'range')
+            continue;
+        walk(node[key], visit);
+    }
+};
 const releasedPath = (source) => source.replace(/(?:\.styles)?\.[^.]+$/, '.module.css');
 exports.releasedPath = releasedPath;
 const globalPath = (targets) => {
@@ -95,12 +135,34 @@ function planRelease(targets) {
     const themes = {};
     const animations = {};
     const statics = {};
-    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();
     const staticValues = new Map();
+    const reportsBySource = new Map();
+    const globalBySource = new Map();
+    const themeKeys = new Map();
+    const animationKeys = new Map();
+    const staticKeys = new Map();
+    const dependencies = new Map();
+    const note = (source, reports) => {
+        if (reports.length === 0)
+            return;
+        reportsBySource.set(source, [
+            ...(reportsBySource.get(source) ?? []),
+            ...reports,
+        ]);
+    };
+    const addGlobal = (source, css) => {
+        const trimmed = css.trim();
+        if (trimmed.length === 0)
+            return;
+        globalBySource.set(source, [
+            ...(globalBySource.get(source) ?? []),
+            trimmed,
+        ]);
+    };
     for (const source of sources) {
         try {
             const extracted = (0, from_plumeria_1.extractPlumeriaStatics)(sourceText.get(source));
@@ -116,8 +178,6 @@ function planRelease(targets) {
             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 {
         }
@@ -152,11 +212,14 @@ function planRelease(targets) {
             for (const specifier of node.specifiers) {
                 if (specifier.type === 'ImportSpecifier') {
                     const imported = specifier.imported.name ?? specifier.imported.value;
-                    if (available[imported])
+                    if (available[imported]) {
                         result[specifier.local.name] = available[imported];
+                        dependencies.set(source, (dependencies.get(source) ?? new Set()).add(target));
+                    }
                 }
                 else if (specifier.type === 'ImportNamespaceSpecifier') {
                     result[specifier.local.name] = available;
+                    dependencies.set(source, (dependencies.get(source) ?? new Set()).add(target));
                 }
             }
         }
@@ -178,13 +241,26 @@ function planRelease(targets) {
         }
         return merged;
     };
+    for (const source of sources) {
+        try {
+            const extracted = (0, from_plumeria_1.extractPlumeriaThemes)(sourceText.get(source));
+            note(source, extracted.reports);
+            if (Object.keys(extracted.bindings).length === 0)
+                continue;
+            themeKeys.set(source, Object.keys(extracted.bindings));
+            addGlobal(source, extracted.globalCss);
+        }
+        catch {
+        }
+    }
     for (const source of sources) {
         try {
             const extracted = (0, from_plumeria_1.extractPlumeriaStatics)(sourceText.get(source), importedPlumeriaValues(source));
+            note(source, extracted.reports);
             if (Object.keys(extracted.bindings).length === 0)
                 continue;
             staticValues.set(source, extracted.bindings);
-            statics[source] = Object.keys(extracted.bindings);
+            staticKeys.set(source, Object.keys(extracted.bindings));
         }
         catch {
         }
@@ -195,59 +271,301 @@ function planRelease(targets) {
                 ...importedPlumeriaValues(source),
                 ...(themeValues.get(source) ?? {}),
             });
+            note(source, extracted.reports);
             if (Object.keys(extracted.bindings).length === 0)
                 continue;
             animationValues.set(source, extracted.bindings);
-            animations[source] = [
+            animationKeys.set(source, [
                 ...extracted.keyframes,
                 ...extracted.viewTransitions,
-            ];
-            globalRules.push(extracted.globalCss.trim());
+            ]);
+            addGlobal(source, extracted.globalCss);
+        }
+        catch {
+        }
+    }
+    const createBindings = new Map();
+    for (const source of sources) {
+        try {
+            const ast = (0, parser_1.parse)(sourceText.get(source), {
+                sourceType: 'module',
+                ecmaFeatures: { jsx: true },
+            });
+            const declared = new Set();
+            for (const raw of ast.body) {
+                const statement = raw.type === 'ExportNamedDeclaration' ? raw.declaration : raw;
+                if (statement?.type !== 'VariableDeclaration')
+                    continue;
+                for (const declaration of statement.declarations) {
+                    if (declaration.id.type === 'Identifier' &&
+                        declaration.init?.type === 'CallExpression' &&
+                        declaration.init.callee.type === 'MemberExpression' &&
+                        declaration.init.callee.property?.name === 'create')
+                        declared.add(declaration.id.name);
+                }
+            }
+            if (declared.size > 0)
+                createBindings.set(source, declared);
+        }
+        catch {
+        }
+    }
+    const stringConstants = new Map();
+    const exportedConstants = new Map();
+    for (const source of sources) {
+        let ast;
+        try {
+            ast = (0, parser_1.parse)(sourceText.get(source), {
+                sourceType: 'module',
+                ecmaFeatures: { jsx: true },
+            });
+        }
+        catch {
+            continue;
+        }
+        const held = new Map();
+        const exported = new Map();
+        const duplicated = new Set();
+        const read = (statement, isExport) => {
+            if (statement?.type !== 'VariableDeclaration' ||
+                statement.kind !== 'const')
+                return;
+            for (const declaration of statement.declarations) {
+                if (declaration.id.type !== 'Identifier' ||
+                    declaration.init?.type !== 'Literal' ||
+                    typeof declaration.init.value !== 'string')
+                    continue;
+                if (held.has(declaration.id.name))
+                    duplicated.add(declaration.id.name);
+                held.set(declaration.id.name, declaration.init.value);
+                if (isExport)
+                    exported.set(declaration.id.name, declaration.init.value);
+            }
+        };
+        walk(ast.body, (node) => {
+            if (node.type === 'ExportNamedDeclaration')
+                read(node.declaration, true);
+            else
+                read(node, false);
+        });
+        for (const name of duplicated) {
+            held.delete(name);
+            exported.delete(name);
+        }
+        if (held.size > 0)
+            stringConstants.set(source, held);
+        if (exported.size > 0)
+            exportedConstants.set(source, exported);
+    }
+    const resolvedConstants = new Map();
+    const compositions = new Map();
+    for (const source of sources) {
+        let ast;
+        try {
+            ast = (0, parser_1.parse)(sourceText.get(source), {
+                sourceType: 'module',
+                ecmaFeatures: { jsx: true },
+                loc: true,
+                range: true,
+            });
         }
         catch {
+            continue;
+        }
+        const constants = new Map(stringConstants.get(source) ?? []);
+        for (const node of ast.body) {
+            if (node.type !== 'ImportDeclaration')
+                continue;
+            const target = (0, resolve_1.resolveSourcePath)(String(node.source.value), source);
+            const available = target ? exportedConstants.get(target) : undefined;
+            if (!available)
+                continue;
+            for (const specifier of node.specifiers) {
+                if (specifier.type !== 'ImportSpecifier')
+                    continue;
+                const imported = specifier.imported.name ?? specifier.imported.value;
+                const value = available.get(imported);
+                if (value !== undefined)
+                    constants.set(specifier.local.name, value);
+            }
+        }
+        if (constants.size > 0)
+            resolvedConstants.set(source, constants);
+        const owners = new Map();
+        for (const binding of createBindings.get(source) ?? [])
+            owners.set(binding, { source, binding });
+        for (const node of ast.body) {
+            if (node.type !== 'ImportDeclaration')
+                continue;
+            const target = (0, resolve_1.resolveSourcePath)(String(node.source.value), source);
+            const declared = target ? createBindings.get(target) : undefined;
+            if (!target || !declared)
+                continue;
+            for (const specifier of node.specifiers) {
+                if (specifier.type !== 'ImportSpecifier')
+                    continue;
+                const imported = specifier.imported.name ?? specifier.imported.value;
+                if (declared.has(imported))
+                    owners.set(specifier.local.name, {
+                        source: target,
+                        binding: imported,
+                    });
+            }
         }
+        walk(ast.body, (node) => {
+            if (node.type !== 'MemberExpression' ||
+                !node.computed ||
+                node.property.type === 'Literal' ||
+                node.object.type !== 'Identifier')
+                return;
+            const owner = owners.get(node.object.name);
+            if (!owner)
+                return;
+            if (node.property.type === 'Identifier' &&
+                constants.has(node.property.name))
+                return;
+            note(owner.source, [
+                {
+                    line: node.loc.start.line,
+                    column: node.loc.start.column + 1,
+                    kind: 'dynamic-style-access',
+                    hint: `\`${node.object.name}\` is read with a computed key, which has no class name until it runs.`,
+                },
+            ]);
+        });
+        walk(ast.body, (node) => {
+            if (node.type !== 'JSXAttribute' ||
+                node.name?.name !== STYLE_PROP ||
+                node.value?.type !== 'JSXExpressionContainer')
+                return;
+            const expression = node.value.expression;
+            if (expression?.type !== 'ArrayExpression' ||
+                expression.elements.length < 2)
+                return;
+            const slots = expression.elements.map(slotOf);
+            if (slots.some((slot) => slot.length === 0))
+                return;
+            const owners_ = slots.flat().map((part) => owners.get(part.object));
+            if (owners_.some((candidate) => !candidate))
+                return;
+            const owner = owners_[0].source;
+            if (owners_.some((candidate) => candidate.source !== owner))
+                return;
+            const named = slots.map((slot) => slot.map((part) => ({
+                binding: owners.get(part.object).binding,
+                key: part.key,
+            })));
+            const collapsible = expression.elements.every((element) => memberOf(element)) &&
+                named.every((slot) => slot.length === 1);
+            compositions.set(owner, [
+                ...(compositions.get(owner) ?? []),
+                {
+                    parts: collapsible ? named.map((slot) => slot[0]) : [],
+                    slots: named,
+                    file: source,
+                    line: node.loc.start.line,
+                    column: node.loc.start.column + 1,
+                },
+            ]);
+        });
     }
+    const converted = new Map();
     for (const source of sources) {
-        let converted;
+        let module;
         try {
-            converted = (0, from_plumeria_1.convertPlumeriaModule)(sourceText.get(source), importedPlumeriaValues(source));
+            module = (0, from_plumeria_1.convertPlumeriaModule)(sourceText.get(source), importedPlumeriaValues(source), compositions.get(source) ?? []);
         }
         catch {
             continue;
         }
-        if (!converted)
+        if (!module)
             continue;
         const target = (0, exports.releasedPath)(source);
-        const specifier = `./${path.basename(target)}`;
-        const reports = [...converted.reports];
+        converted.set(source, module);
+        note(source, module.reports);
         if (fs.existsSync(target)) {
-            reports.push({
-                line: 0,
-                column: 0,
-                kind: 'target-exists',
-                hint: `${path.basename(target)} already exists and was not overwritten.`,
+            note(source, [
+                {
+                    line: 0,
+                    column: 0,
+                    kind: 'target-exists',
+                    hint: `${path.basename(target)} already exists and was not overwritten.`,
+                },
+            ]);
+        }
+    }
+    const blocked = new Set(reportsBySource.keys());
+    for (let changed = true; changed;) {
+        changed = false;
+        for (const source of blocked) {
+            for (const dependency of dependencies.get(source) ?? []) {
+                if (blocked.has(dependency))
+                    continue;
+                blocked.add(dependency);
+                note(dependency, [
+                    {
+                        line: 0,
+                        column: 0,
+                        kind: 'blocked-dependency',
+                        hint: `${path.relative(path.dirname(dependency), source)} still needs these definitions.`,
+                    },
+                ]);
+                changed = true;
+            }
+        }
+    }
+    const globalRules = [];
+    const values = {};
+    for (const source of sources) {
+        const reports = reportsBySource.get(source) ?? [];
+        const module = converted.get(source);
+        if (module) {
+            stylesheets.push({
+                source,
+                target: (0, exports.releasedPath)(source),
+                css: module.css,
+                reports,
             });
         }
-        stylesheets.push({
-            source,
-            target,
-            css: converted.css,
-            reports,
-        });
-        if (reports.length === 0) {
-            modules[source] = {
-                source: specifier,
-                target,
-                binding: converted.binding,
-                ...(converted.definitionOnly ? { definitionOnly: true } : {}),
-                ...(Object.keys(converted.aliases).length > 0
-                    ? { aliases: converted.aliases }
-                    : {}),
-                ...(Object.keys(converted.functions).length > 0
-                    ? { functions: converted.functions }
-                    : {}),
-            };
+        else if (reports.length > 0) {
+            stylesheets.push({ source, target: '', css: '', reports });
         }
+        if (blocked.has(source))
+            continue;
+        const resolved = {
+            ...(staticValues.get(source) ?? {}),
+            ...(themeValues.get(source) ?? {}),
+            ...(animationValues.get(source) ?? {}),
+        };
+        if (Object.keys(resolved).length > 0)
+            values[source] = resolved;
+        globalRules.push(...(globalBySource.get(source) ?? []));
+        if (themeKeys.has(source))
+            themes[source] = themeKeys.get(source);
+        if (animationKeys.has(source))
+            animations[source] = animationKeys.get(source);
+        if (staticKeys.has(source))
+            statics[source] = staticKeys.get(source);
+        if (!module)
+            continue;
+        modules[source] = {
+            source: `./${path.basename((0, exports.releasedPath)(source))}`,
+            target: (0, exports.releasedPath)(source),
+            binding: module.binding,
+            ...(module.definitionOnly ? { definitionOnly: true } : {}),
+            ...(Object.keys(module.aliases).length > 0
+                ? { aliases: module.aliases }
+                : {}),
+            ...(Object.keys(module.functions).length > 0
+                ? { functions: module.functions }
+                : {}),
+            ...(Object.keys(module.merges).length > 0
+                ? { merges: module.merges }
+                : {}),
+            ...(Object.keys(module.overrides).length > 0
+                ? { overrides: module.overrides }
+                : {}),
+        };
     }
     return {
         stylesheets,
@@ -255,10 +573,16 @@ function planRelease(targets) {
         themes,
         animations,
         statics,
+        values,
+        complete: stylesheets.every((sheet) => sheet.reports.length === 0),
+        constants: Object.fromEntries([...resolvedConstants].map(([source, held]) => [
+            source,
+            Object.fromEntries(held),
+        ])),
         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`,
+                css: `${GLOBAL_OPEN}\n${globalRules.join('\n\n')}\n${GLOBAL_CLOSE}\n`,
             }
             : undefined,
     };
@@ -274,6 +598,13 @@ function writeRelease(plan) {
         const previous = fs.existsSync(plan.global.target)
             ? fs.readFileSync(plan.global.target, 'utf8')
             : '';
+        const opening = previous.indexOf(GLOBAL_OPEN);
+        const closing = previous.lastIndexOf(GLOBAL_CLOSE);
+        if (opening !== -1 && closing > opening) {
+            const kept = `${previous.slice(0, opening)}${previous.slice(closing + GLOBAL_CLOSE.length)}`;
+            fs.writeFileSync(plan.global.target, `${kept.replace(/\n+$/, '\n')}${plan.global.css}`, 'utf8');
+            return;
+        }
         const separator = previous.length > 0 && !previous.endsWith('\n') ? '\n\n' : '';
         fs.writeFileSync(plan.global.target, `${previous}${separator}${plan.global.css}`, 'utf8');
     }