@plumeria/codemod 19.15.0 → 21.0.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`.
@@ -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/adopt-styles.js

@@ -105,6 +105,12 @@ exports.adoptStyles = {
                 (current.parent.name?.name === 'className' ||
                     current.parent.name?.name === styleProp));
         };
+        const lone = (node) => node?.type === 'LogicalExpression' &&
+            node.operator === '||' &&
+            node.right.type === 'Identifier' &&
+            node.right.name === 'undefined'
+            ? [node.left]
+            : undefined;
         const joinedElements = (node) => {
             if (node?.type === 'TemplateLiteral' && node.expressions.length > 1) {
                 const spaced = node.quasis.every((quasi, index) => index === 0 || index === node.quasis.length - 1
@@ -117,7 +123,7 @@ exports.adoptStyles = {
                 node.callee.property?.name !== 'join' ||
                 node.arguments.length !== 1 ||
                 node.arguments[0].value !== ' ')
-                return undefined;
+                return lone(node);
             const joined = node.callee.object;
             if (joined?.type === 'ArrayExpression')
                 return joined.elements.filter(Boolean);

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

@@ -76,6 +76,13 @@ const walk = (node, visit) => {
 const needsFilter = (node) => node.type === 'LogicalExpression' ||
     node.type === 'ConditionalExpression' ||
     node.type === 'SpreadElement';
+const mayBeFalsy = (node) => {
+    if (node.type === 'LogicalExpression')
+        return node.operator === '&&' || mayBeFalsy(node.right);
+    if (node.type === 'ConditionalExpression')
+        return mayBeFalsy(node.consequent) || mayBeFalsy(node.alternate);
+    return node.type === 'Literal' && !node.value;
+};
 exports.__private = { memberPath, isCreate, needsFilter };
 exports.releaseStyles = {
     meta: {
@@ -89,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.',
@@ -101,6 +108,7 @@ exports.releaseStyles = {
             styleType: 'A released style is a class name.',
             folded: 'This only named a style key, which the export has resolved.',
             read: 'Read this style by the name the export gave it.',
+            falsy: 'className takes a string or undefined, so a condition that can be false reads as undefined.',
             functionStyle: 'Use the CSS Module class and pass function arguments as custom properties.',
             unsupportedFunctionStyle: 'This function style call cannot be converted without changing its behavior.',
         },
@@ -162,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 &&
@@ -359,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) => {
@@ -596,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),
@@ -923,6 +931,18 @@ exports.releaseStyles = {
                 const text = expression ? resolveText(expression) : undefined;
                 if (!complete && expression && text === undefined)
                     return;
+                if (!carried &&
+                    expression &&
+                    text !== undefined &&
+                    mayBeFalsy(expression)) {
+                    context.report({
+                        node: expression,
+                        messageId: 'falsy',
+                        fix: (fixer) => fixer.replaceText(expression, `(${text}) || undefined`),
+                    });
+                    takeProp();
+                    return;
+                }
                 const foldsKey = expression?.type === 'MemberExpression' &&
                     expression.computed &&
                     expression.property.type === 'Identifier' &&

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": "19.15.0",
-  "description": "Codemods for Plumeria: migrate a CSS Modules codebase in, export it back out, and rename the styling prop",
+  "version": "21.0.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",
@@ -37,7 +37,7 @@
     "get-tsconfig": "^4.14.2",
     "postcss": "8.5.26",
     "postcss-selector-parser": "^7.1.1",
-    "zss-engine": "2.10.0"
+    "zss-engine": "3.0.1"
   },
   "publishConfig": {
     "access": "public",