@plumeria/codemod 18.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) zss-in-js contributer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# @plumeria/codemod
+
+Codemods for migrating Plumeria APIs. No install needed — run it with `npx`.
+
+```sh
+npx @plumeria/codemod rename-prop classStyle sx
+```
+
+## `rename-prop`
+
+Renames the styling prop across your source. The names are arguments, so it
+works for any rename, not just default prop:
+
+```sh
+npx @plumeria/codemod rename-prop <from> <to> [paths...]
+```
+
+| Option        | Effect                                          |
+| ------------- | ----------------------------------------------- |
+| `-d, --dry-run` | report what would change without writing        |
+| `--no-types`  | leave TypeScript declarations untouched         |
+
+Paths default to the current directory. `node_modules`, `dist`, `build`, `out`,
+`.next` and `coverage` are skipped.
+
+### What it rewrites
+
+JSX attributes:
+
+```diff
+- <div classStyle={styles.card} />
++ <div sx={styles.card} />
+```
+
+And property signatures annotated with Plumeria's `Style`, which covers the
+global augmentation in your `plumeria.d.ts` as well as your own component props:
+
+```diff
+  interface CardProps {
+-   classStyle?: Style;
++   sx?: Style;
+  }
+```
+
+The annotation has to be `Style` for the rename to happen, so an unrelated
+interface that happens to use the same key is left alone.
+
+### What it reports instead of rewriting
+
+Where the prop is destructured or read off an object, renaming it would change a
+local binding and not just the prop, so those are listed for you to handle:
+
+```
+2 occurrence(s) need a manual rename — "classStyle" is bound to a local name there:
+  src/components/Card.tsx:8:12
+  src/components/Card.tsx:14:22
+```
+
+## After the rename
+
+The rewrite only touches your source. Point the rest of the toolchain at the new
+name too:
+
+```js
+// next.config.ts / unplugin options
+withPlumeria(nextConfig, { styleProp: 'sx' });
+```
+
+```js
+// eslint.config.js
+settings: { plumeria: { styleProp: 'sx' } }
+```
+
+Commit before running, so the rewrite can be reverted with `git checkout`.

package/bin/codemod.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const { main } = require('../dist/cli.js');
+
+main(process.argv.slice(2)).then(
+  (code) => {
+    process.exitCode = code;
+  },
+  (error) => {
+    console.error(`✖ ${(error && error.message) || error}`);
+    process.exitCode = 1;
+  },
+);

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export declare function main(argv: string[]): Promise<number>;

package/dist/cli.js

@@ -0,0 +1,238 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.main = main;
+const node_child_process_1 = require("node:child_process");
+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 { version } = require('../package.json');
+const TRANSFORMS = ['rename-prop'];
+const SOURCE_FILES = '**/*.{js,jsx,mjs,cjs,ts,tsx,mts,cts}';
+const IGNORES = [
+    '**/dist/**',
+    '**/build/**',
+    '**/out/**',
+    '**/.next/**',
+    '**/coverage/**',
+];
+const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const RESERVED = new Set(['className', 'key', 'ref', 'children', 'style']);
+const USAGE = `plumeria-codemod — codemods for migrating Plumeria APIs
+
+Usage
+  npx @plumeria/codemod rename-prop <from> <to> [paths...]
+
+Options
+  -d, --dry-run    report what would change without writing
+      --no-types   leave TypeScript declarations untouched
+  -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
+
+Paths default to the current directory. After the rewrite, point the toolchain
+at the new name with \`styleProp\` on your bundler plugin, and with
+\`settings: { plumeria: { styleProp: '<to>' } }\` in your ESLint config.`;
+class UsageError extends Error {
+}
+function parseArgs(argv) {
+    if (argv.length === 0 || argv.includes('-h') || argv.includes('--help')) {
+        console.log(USAGE);
+        return null;
+    }
+    if (argv.includes('-v') || argv.includes('--version')) {
+        console.log(version);
+        return null;
+    }
+    const positional = [];
+    let dryRun = false;
+    let includeTypes = true;
+    for (const arg of argv) {
+        switch (arg) {
+            case '-d':
+            case '--dry-run':
+                dryRun = true;
+                break;
+            case '--no-types':
+                includeTypes = false;
+                break;
+            default:
+                if (arg.startsWith('-'))
+                    throw new UsageError(`unknown option "${arg}"`);
+                positional.push(arg);
+        }
+    }
+    const [transform, from, to, ...targets] = positional;
+    if (!TRANSFORMS.includes(transform)) {
+        throw new UsageError(`unknown transform "${transform}". Available: ${TRANSFORMS.join(', ')}`);
+    }
+    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`);
+    }
+    if (from === to) {
+        throw new UsageError(`<from> and <to> are both "${from}"`);
+    }
+    if (RESERVED.has(to)) {
+        throw new UsageError(`"${to}" is already used by React`);
+    }
+    return {
+        from,
+        to,
+        targets: targets.length > 0 ? targets : ['.'],
+        dryRun,
+        includeTypes,
+    };
+}
+function buildConfig(options) {
+    const { from, to, includeTypes } = options;
+    return [
+        { ignores: IGNORES },
+        {
+            files: [SOURCE_FILES],
+            languageOptions: {
+                parser: tsParser,
+                parserOptions: {
+                    sourceType: 'module',
+                    ecmaFeatures: { jsx: true },
+                },
+            },
+            plugins: { codemod: { rules: { 'rename-prop': rename_prop_1.renameProp } } },
+            rules: { 'codemod/rename-prop': ['error', { from, to, includeTypes }] },
+        },
+    ];
+}
+function warnIfDirty() {
+    try {
+        const status = (0, node_child_process_1.execFileSync)('git', ['status', '--porcelain'], {
+            encoding: 'utf8',
+            stdio: ['ignore', 'pipe', 'ignore'],
+        });
+        if (status.trim()) {
+            console.warn('! git working tree is not clean. Commit first so the rewrite can be reverted.\n');
+        }
+    }
+    catch {
+    }
+}
+async function main(argv) {
+    let options;
+    try {
+        options = parseArgs(argv);
+    }
+    catch (error) {
+        if (!(error instanceof UsageError))
+            throw error;
+        console.error(`✖ ${error.message}\n`);
+        console.error(USAGE);
+        return 1;
+    }
+    if (!options)
+        return 0;
+    const { from, to, targets, dryRun } = options;
+    const baseConfig = {
+        overrideConfigFile: true,
+        overrideConfig: buildConfig(options),
+        errorOnUnmatchedPattern: false,
+    };
+    const results = await new eslint_1.ESLint(baseConfig).lintFiles(targets);
+    const cwd = process.cwd();
+    const relative = (filePath) => node_path_1.default.relative(cwd, filePath) || '.';
+    const changes = [];
+    const manual = [];
+    const unparsed = [];
+    let total = 0;
+    for (const result of results) {
+        let count = 0;
+        for (const message of result.messages) {
+            if (message.fatal) {
+                unparsed.push(`${relative(result.filePath)}: ${message.message}`);
+            }
+            else if (message.fix) {
+                count++;
+            }
+            else {
+                manual.push(`${relative(result.filePath)}:${message.line}:${message.column}`);
+            }
+        }
+        if (count > 0) {
+            changes.push({ file: relative(result.filePath), count });
+            total += count;
+        }
+    }
+    if (total === 0 && manual.length === 0) {
+        console.log(`No "${from}" found.`);
+        return unparsed.length > 0 ? report(unparsed) : 0;
+    }
+    if (total === 0) {
+        console.log(`Every remaining "${from}" needs a manual rename.`);
+    }
+    else {
+        for (const { file, count } of changes) {
+            console.log(`  ${file}  ${count}`);
+        }
+        if (dryRun) {
+            console.log(`\n${total} occurrence(s) in ${changes.length} file(s) would become "${to}".`);
+            console.log('Run without --dry-run to apply.');
+        }
+        else {
+            warnIfDirty();
+            const applied = await new eslint_1.ESLint({ ...baseConfig, fix: true }).lintFiles(targets);
+            await eslint_1.ESLint.outputFixes(applied);
+            console.log(`\n✔ renamed ${total} occurrence(s) of "${from}" to "${to}" in ${changes.length} file(s).`);
+        }
+    }
+    if (manual.length > 0) {
+        console.log(`\n${manual.length} occurrence(s) need a manual rename — "${from}" is bound to a local name there:`);
+        for (const location of manual)
+            console.log(`  ${location}`);
+    }
+    return unparsed.length > 0 ? report(unparsed) : 0;
+}
+function report(unparsed) {
+    console.error(`\n✖ ${unparsed.length} file(s) could not be parsed:`);
+    for (const failure of unparsed)
+        console.error(`  ${failure}`);
+    return 1;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { renameProp } from './transforms/rename-prop';
+export { renameProp };
+export type { RenamePropOptions } from './transforms/rename-prop';
+export { main } from './cli';

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.main = exports.renameProp = void 0;
+const rename_prop_1 = require("./transforms/rename-prop");
+Object.defineProperty(exports, "renameProp", { enumerable: true, get: function () { return rename_prop_1.renameProp; } });
+var cli_1 = require("./cli");
+Object.defineProperty(exports, "main", { enumerable: true, get: function () { return cli_1.main; } });

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

@@ -0,0 +1,7 @@
+import type { Rule } from 'eslint';
+export interface RenamePropOptions {
+    from: string;
+    to: string;
+    includeTypes?: boolean;
+}
+export declare const renameProp: Rule.RuleModule;

package/dist/transforms/rename-prop.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renameProp = void 0;
+function isStyleAnnotation(node) {
+    if (!node)
+        return false;
+    switch (node.type) {
+        case 'TSTypeReference': {
+            const name = node.typeName;
+            if (name?.type === 'Identifier')
+                return name.name === 'Style';
+            if (name?.type === 'TSQualifiedName')
+                return name.right?.name === 'Style';
+            return false;
+        }
+        case 'TSUnionType':
+        case 'TSIntersectionType':
+            return node.types.some(isStyleAnnotation);
+        default:
+            return false;
+    }
+}
+exports.renameProp = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Rename a JSX prop to a new name',
+        },
+        fixable: 'code',
+        messages: {
+            rename: 'Rename "{{from}}" to "{{to}}".',
+            manual: '"{{from}}" is forwarded here. Rename it to "{{to}}" by hand — an autofix would change the local binding too.',
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    from: { type: 'string' },
+                    to: { type: 'string' },
+                    includeTypes: { type: 'boolean' },
+                },
+                required: ['from', 'to'],
+                additionalProperties: false,
+            },
+        ],
+    },
+    create(context) {
+        const { from, to, includeTypes = true, } = context.options[0];
+        const rename = (node) => context.report({
+            node,
+            messageId: 'rename',
+            data: { from, to },
+            fix: (fixer) => fixer.replaceText(node, to),
+        });
+        const manual = (node) => context.report({ node, messageId: 'manual', data: { from, to } });
+        return {
+            JSXAttribute(node) {
+                if (node.name.type !== 'JSXIdentifier')
+                    return;
+                if (node.name.name !== from)
+                    return;
+                rename(node.name);
+            },
+            TSPropertySignature(node) {
+                if (!includeTypes)
+                    return;
+                if (node.key.type !== 'Identifier' || node.key.name !== from)
+                    return;
+                if (!isStyleAnnotation(node.typeAnnotation?.typeAnnotation))
+                    return;
+                rename(node.key);
+            },
+            Property(node) {
+                if (node.parent?.type !== 'ObjectPattern')
+                    return;
+                if (node.computed)
+                    return;
+                if (node.key.type !== 'Identifier' || node.key.name !== from)
+                    return;
+                manual(node.key);
+            },
+            MemberExpression(node) {
+                if (node.computed)
+                    return;
+                if (node.property.type !== 'Identifier')
+                    return;
+                if (node.property.name !== from)
+                    return;
+                manual(node.property);
+            },
+        };
+    },
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@plumeria/codemod",
+  "version": "18.0.0",
+  "description": "Codemods for migrating Plumeria APIs",
+  "author": "Refirst 11",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/refirst11",
+  "homepage": "https://plumeria.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zss-in-js/plumeria.git",
+    "directory": "packages/codemod"
+  },
+  "bugs": {
+    "url": "https://github.com/zss-in-js/plumeria/issues"
+  },
+  "keywords": [
+    "plumeria",
+    "codemod",
+    "migration",
+    "eslint",
+    "css-in-js"
+  ],
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "plumeria-codemod": "bin/codemod.js"
+  },
+  "files": [
+    "dist/",
+    "bin/"
+  ],
+  "scripts": {
+    "build": "rimraf dist && pnpm cjs",
+    "cjs": "tsc --project tsconfig.cjs.json"
+  },
+  "dependencies": {
+    "@typescript-eslint/parser": "^8.60.0",
+    "eslint": "^10.4.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}