@plumeria/codemod 20.0.0 → 21.1.0

package/README.md

@@ -7,6 +7,7 @@ No install needed — run it with `npx`.
 npx @plumeria/codemod migrate --from css-modules
 npx @plumeria/codemod migrate --from plumeria
 npx @plumeria/codemod rename-prop classStyle sx
+npx @plumeria/codemod rename-api viewTransition viewTransitionClass
 ```
 
 Commit before running, so the rewrite can be reverted with `git checkout`.
@@ -219,7 +220,7 @@ reported as `dynamic-style-access` and its definitions stay in Plumeria.
 
 ### Global styles
 
-`css.createTheme` and `css.viewTransition` produce rules that belong in a global
+`css.createTheme` and `css.viewTransitionClass` produce rules that belong in a global
 stylesheet, not in a CSS Module. The codemod extracts them and appends them to
 the stylesheet the project already loads — `app/global.css` or
 `styles/global.css`, under `src` or not, spelled `global` or `globals` — and
@@ -227,7 +228,7 @@ writes `src/styles/global.css` (or `styles/global.css` when `src` does not
 exist) when it finds none. Theme tokens become CSS custom properties under
 `:where(:root)` and the theme selector; view transitions become
 `::view-transition-*` pseudo-element rules. References in style objects are
-replaced by their generated names. A `keyframes` or `viewTransition` nothing the
+replaced by their generated names. A `keyframes` or `viewTransitionClass` nothing the
 migration exports reaches is left where it is.
 
 A CSS Module renames the value of `animation-name` the way it renames a class,
@@ -361,3 +362,40 @@ withPlumeria(nextConfig, { styleProp: 'sx' });
 // eslint.config.js
 settings: { plumeria: { styleProp: 'sx' } }
 ```
+
+## `rename-api`
+
+Renames a Plumeria API after it has changed its name in a release:
+
+```sh
+npx @plumeria/codemod rename-api <from> <to> [paths...]
+```
+
+| Option          | Effect                                   |
+| --------------- | ---------------------------------------- |
+| `-d, --dry-run` | report what would change without writing |
+
+`<to>` has to be an API `@plumeria/core` exports, so a typo is reported instead
+of written. Paths default to the current directory, with the same directories
+skipped as `rename-prop`.
+
+### What it rewrites
+
+Calls through the namespace or default import of `@plumeria/core`:
+
+```diff
+  import * as css from '@plumeria/core';
+- const fade = css.viewTransition({ old: { opacity: 0 } });
++ const fade = css.viewTransitionClass({ old: { opacity: 0 } });
+```
+
+And named imports, together with every reference to them. An alias keeps its
+local name, so only the import changes:
+
+```diff
+- import { viewTransition, viewTransition as vt } from '@plumeria/core';
+- const fade = viewTransition({ old: { opacity: 0 } });
++ import { viewTransitionClass, viewTransitionClass as vt } from '@plumeria/core';
++ const fade = viewTransitionClass({ old: { opacity: 0 } });
+  const slide = vt({ new: { opacity: 1 } });
+```

package/dist/cli.js

@@ -42,12 +42,25 @@ 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 rename_api_1 = require("./transforms/rename-api");
 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 TRANSFORMS = ['rename-prop', 'rename-api', 'migrate'];
+const APIS = [
+    'create',
+    'createTheme',
+    'createStatic',
+    'keyframes',
+    'viewTransitionClass',
+    'positionTry',
+    'varType',
+    'marker',
+    'extended',
+    'use',
+];
 const SOURCES = ['css-modules', 'plumeria'];
 const SOURCE_FILES = '**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}';
 const IGNORES = [
@@ -63,6 +76,7 @@ const USAGE = `plumeria-codemod — codemods for migrating Plumeria APIs
 
 Usage
   npx @plumeria/codemod rename-prop <from> <to> [paths...]
+  npx @plumeria/codemod rename-api <from> <to> [paths...]
   npx @plumeria/codemod migrate --from css-modules [paths...]
   npx @plumeria/codemod migrate --from plumeria [paths...]
 
@@ -76,6 +90,7 @@ Options
 Examples
   npx @plumeria/codemod rename-prop classStyle sx
   npx @plumeria/codemod rename-prop classStyle sx src app --dry-run
+  npx @plumeria/codemod rename-api viewTransition viewTransitionClass
   npx @plumeria/codemod migrate --from css-modules
   npx @plumeria/codemod migrate --from plumeria --dry-run
 
@@ -139,14 +154,27 @@ function parseArgs(argv) {
         };
     }
     if (!from || !to) {
-        throw new UsageError('rename-prop needs both <from> and <to>');
-    }
-    if (!IDENTIFIER.test(to)) {
-        throw new UsageError(`"${to}" is not a valid identifier`);
+        throw new UsageError(`${transform} needs both <from> and <to>`);
     }
     if (from === to) {
         throw new UsageError(`<from> and <to> are both "${from}"`);
     }
+    if (transform === 'rename-api') {
+        if (!APIS.includes(to)) {
+            throw new UsageError(`"${to}" is not a Plumeria API. Available: ${APIS.join(', ')}`);
+        }
+        return {
+            transform: 'rename-api',
+            from,
+            to,
+            targets: targets.length > 0 ? targets : ['.'],
+            dryRun,
+            includeTypes,
+        };
+    }
+    if (!IDENTIFIER.test(to)) {
+        throw new UsageError(`"${to}" is not a valid identifier`);
+    }
     if (RESERVED.has(to)) {
         throw new UsageError(`"${to}" is already used by React`);
     }
@@ -160,7 +188,18 @@ function parseArgs(argv) {
     };
 }
 function buildConfig(options) {
-    const { from, to, includeTypes } = options;
+    const { transform, from, to, includeTypes } = options;
+    const rule = transform === 'rename-api'
+        ? {
+            plugins: { codemod: { rules: { 'rename-api': rename_api_1.renameApi } } },
+            rules: { 'codemod/rename-api': ['error', { from, to }] },
+        }
+        : {
+            plugins: { codemod: { rules: { 'rename-prop': rename_prop_1.renameProp } } },
+            rules: {
+                'codemod/rename-prop': ['error', { from, to, includeTypes }],
+            },
+        };
     return [
         { ignores: IGNORES },
         {
@@ -172,8 +211,7 @@ function buildConfig(options) {
                     ecmaFeatures: { jsx: true },
                 },
             },
-            plugins: { codemod: { rules: { 'rename-prop': rename_prop_1.renameProp } } },
-            rules: { 'codemod/rename-prop': ['error', { from, to, includeTypes }] },
+            ...rule,
         },
     ];
 }

package/dist/release.js

@@ -42,7 +42,7 @@ 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_OPEN = '/* Generated from css.createTheme, css.keyframes, and css.viewTransitionClass by @plumeria/codemod */';
 const GLOBAL_CLOSE = '/* End of @plumeria/codemod generated styles */';
 const EXTENSION = /\.(?:[cm]?[jt]sx?)$/;
 const IGNORED = new Set([

package/dist/transforms/from-plumeria.js

@@ -389,11 +389,11 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
     }
     for (const declaration of declarations) {
         if (declaration.id.type !== 'Identifier' ||
-            !isCall(declaration.init, 'viewTransition'))
+            !isCall(declaration.init, 'viewTransitionClass'))
             continue;
         const object = evaluate(declaration.init.arguments[0], values);
         if (!object || typeof object !== 'object') {
-            report(declaration.init, 'dynamic-view-transition', '`viewTransition` needs a statically resolvable object.');
+            report(declaration.init, 'dynamic-view-transition', '`viewTransitionClass` needs a statically resolvable object.');
             continue;
         }
         const hash = (0, zss_engine_1.genBase36Hash)(object, 1, 8);
@@ -406,7 +406,7 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
             const style = object[part];
             if (style && typeof style === 'object') {
                 const pseudoPart = part === 'imagePair' ? 'image-pair' : part;
-                parts.push(emitGlobalObject(`::view-transition-${pseudoPart}(${name})`, style));
+                parts.push(emitGlobalObject(`::view-transition-${pseudoPart}(*.${name})`, style));
             }
         }
         if (parts.length > 0)

package/dist/transforms/release-styles.js

@@ -96,7 +96,7 @@ exports.releaseStyles = {
             static: '`createStatic` values were inlined into the generated CSS.',
             theme: '`createTheme` was written to the global stylesheet.',
             themeImport: 'Remove the createTheme import after inlining its CSS variables.',
-            animation: '`keyframes` or `viewTransition` was written globally.',
+            animation: '`keyframes` or `viewTransitionClass` was written globally.',
             animationImport: 'Remove the animation import after replacing it with its generated name.',
             staticImport: 'Remove the createStatic import after inlining its values into the CSS.',
             alias: 'Read this style from the CSS Module the whole file was exported to.',
@@ -170,7 +170,7 @@ exports.releaseStyles = {
                 return Boolean(entry);
             if (called[1] === 'createTheme')
                 return themeBindings.includes(only.id.name);
-            if (called[1] === 'keyframes' || called[1] === 'viewTransition')
+            if (called[1] === 'keyframes' || called[1] === 'viewTransitionClass')
                 return animationBindings.includes(only.id.name);
             if (called[1] === 'create')
                 return Boolean(entry &&
@@ -367,7 +367,7 @@ exports.releaseStyles = {
             ? Boolean(entry)
             : method === 'createTheme'
                 ? themeBindings.length > 0
-                : method === 'keyframes' || method === 'viewTransition'
+                : method === 'keyframes' || method === 'viewTransitionClass'
                     ? animationBindings.length > 0
                     : false;
         const survivesCore = (program) => {
@@ -604,14 +604,14 @@ exports.releaseStyles = {
                     ((entry && path[1] === 'createStatic') ||
                         (path[1] === 'createTheme' &&
                             themeBindings.includes(declaration.id.name)) ||
-                        ((path[1] === 'keyframes' || path[1] === 'viewTransition') &&
+                        ((path[1] === 'keyframes' || path[1] === 'viewTransitionClass') &&
                             animationBindings.includes(declaration.id.name)))) {
                     const target = node.parent?.type === 'ExportNamedDeclaration' ? node.parent : node;
                     context.report({
                         node: target,
                         messageId: path[1] === 'createTheme'
                             ? 'theme'
-                            : path[1] === 'keyframes' || path[1] === 'viewTransition'
+                            : path[1] === 'keyframes' || path[1] === 'viewTransitionClass'
                                 ? 'animation'
                                 : 'static',
                         fix: (fixer) => removeStatement(fixer, target),

package/dist/transforms/rename-api.d.ts

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+export interface RenameApiOptions {
+    from: string;
+    to: string;
+}
+export declare const renameApi: Rule.RuleModule;

package/dist/transforms/rename-api.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renameApi = void 0;
+const CORE = '@plumeria/core';
+exports.renameApi = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Rename a Plumeria API to a new name',
+        },
+        fixable: 'code',
+        messages: {
+            rename: 'Rename "{{from}}" to "{{to}}".',
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    from: { type: 'string' },
+                    to: { type: 'string' },
+                },
+                required: ['from', 'to'],
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        const { from, to } = context.options[0];
+        const namespaces = new Set();
+        const rename = (node) => context.report({
+            node,
+            messageId: 'rename',
+            data: { from, to },
+            fix: (fixer) => fixer.replaceText(node, to),
+        });
+        return {
+            ImportDeclaration(node) {
+                if (node.source.value !== CORE)
+                    return;
+                for (const specifier of node.specifiers) {
+                    if (specifier.type !== 'ImportSpecifier') {
+                        namespaces.add(specifier.local.name);
+                        continue;
+                    }
+                    if (specifier.imported.type !== 'Identifier')
+                        continue;
+                    if (specifier.imported.name !== from)
+                        continue;
+                    rename(specifier.imported);
+                    if (specifier.local.name !== from)
+                        continue;
+                    const [variable] = context.sourceCode.getDeclaredVariables(specifier);
+                    for (const reference of variable?.references ?? []) {
+                        rename(reference.identifier);
+                    }
+                }
+            },
+            MemberExpression(node) {
+                if (node.computed)
+                    return;
+                if (node.object.type !== 'Identifier')
+                    return;
+                if (!namespaces.has(node.object.name))
+                    return;
+                if (node.property.type !== 'Identifier')
+                    return;
+                if (node.property.name !== from)
+                    return;
+                rename(node.property);
+            },
+        };
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plumeria/codemod",
-  "version": "20.0.0",
-  "description": "Codemods for Plumeria: migrate a CSS Modules codebase in, export it back out, and rename the styling prop",
+  "version": "21.1.0",
+  "description": "Codemods for Plumeria: migrate a CSS Modules codebase in, export it back out, and rename the styling prop or an API",
   "author": "Refirst 11",
   "license": "MIT",
   "homepage": "https://plumeria.dev",