@plumeria/codemod 18.2.20 → 18.2.21

package/README.md

@@ -197,6 +197,19 @@ 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

package/dist/cli.js

@@ -331,7 +331,7 @@ async function migrateFromCssModules(options) {
         console.log(line);
     return 1;
 }
-function releaseConfig(modules, themes, animations, statics, values, complete) {
+function releaseConfig(modules, themes, animations, statics, values, complete, constants) {
     return [
         { ignores: IGNORES },
         {
@@ -347,7 +347,15 @@ function releaseConfig(modules, themes, animations, statics, values, complete) {
             rules: {
                 'codemod/release-styles': [
                     'error',
-                    { modules, themes, animations, statics, values, complete },
+                    {
+                        modules,
+                        themes,
+                        animations,
+                        statics,
+                        values,
+                        complete,
+                        constants,
+                    },
                 ],
             },
         },
@@ -374,7 +382,7 @@ async function migrateFromPlumeria(options) {
     }
     const config = {
         overrideConfigFile: true,
-        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations, planned.statics, planned.values, planned.complete),
+        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/release.d.ts

@@ -14,6 +14,7 @@ export interface ReleasePlan {
     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

@@ -310,6 +310,54 @@ function planRelease(targets) {
         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;
@@ -324,6 +372,25 @@ function planRelease(targets) {
         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 });
@@ -354,6 +421,9 @@ function planRelease(targets) {
             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,
@@ -505,6 +575,10 @@ function planRelease(targets) {
         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),

package/dist/transforms/adopt-styles.js

@@ -119,6 +119,25 @@ exports.adoptStyles = {
             const name = element?.name;
             return name?.type === 'JSXIdentifier' && /^[a-z]/.test(String(name.name));
         };
+        const renamedText = (element) => {
+            const read = styleRead(element);
+            const binding = read?.object?.type === 'Identifier'
+                ? bindings.get(read.object.name)
+                : undefined;
+            if (!binding)
+                return context.sourceCode.getText(element);
+            const written = read.computed && read.property.type === 'Literal'
+                ? String(read.property.value)
+                : !read.computed && read.property.type === 'Identifier'
+                    ? read.property.name
+                    : undefined;
+            if (written === undefined)
+                return context.sourceCode.getText(element);
+            const access = `${binding.local}.${binding.entry.names[written] ?? written}`;
+            return element.type === 'LogicalExpression'
+                ? `${context.sourceCode.getText(element.left)} ${element.operator} ${access}`
+                : access;
+        };
         const styleRead = (node) => node?.type === 'LogicalExpression'
             ? styleRead(node.right)
             : node?.type === 'MemberExpression'
@@ -268,14 +287,6 @@ exports.adoptStyles = {
                     : undefined;
                 if (!binding)
                     return;
-                if (coreLocal && !stylingPosition(node) && !insideUse(node)) {
-                    context.report({
-                        node,
-                        messageId: 'value',
-                        fix: (fixer) => fixer.replaceText(node, `${coreLocal}.use(${context.sourceCode.getText(node)})`),
-                    });
-                    return;
-                }
                 const written = node.computed && node.property.type === 'Literal'
                     ? String(node.property.value)
                     : !node.computed && node.property.type === 'Identifier'
@@ -285,6 +296,14 @@ exports.adoptStyles = {
                     return;
                 const key = binding.entry.names[written] ?? written;
                 const local = binding.local;
+                if (coreLocal && !stylingPosition(node) && !insideUse(node)) {
+                    context.report({
+                        node,
+                        messageId: 'value',
+                        fix: (fixer) => fixer.replaceText(node, `${coreLocal}.use(${local}.${key})`),
+                    });
+                    return;
+                }
                 if (key === written && local === node.object.name)
                     return;
                 context.report({
@@ -383,9 +402,7 @@ exports.adoptStyles = {
                 if (joined) {
                     if (!joined.some((element) => bindings.has(styleRead(element)?.object?.name)))
                         return;
-                    const list = joined
-                        .map((element) => context.sourceCode.getText(element))
-                        .join(', ');
+                    const list = joined.map(renamedText).join(', ');
                     if (!intrinsic(node.parent) && coreLocal) {
                         context.report({
                             node: expression,

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

@@ -19,6 +19,7 @@ export interface ReleaseStylesOptions {
     statics?: Record<string, string[]>;
     values?: Record<string, Record<string, unknown>>;
     complete?: boolean;
+    constants?: Record<string, Record<string, string>>;
     styleProp?: string;
     active?: boolean;
 }

package/dist/transforms/release-styles.js

@@ -56,6 +56,23 @@ const isCreate = (node) => {
     return path?.length === 2 && path[1] === 'create';
 };
 const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+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 needsFilter = (node) => node.type === 'LogicalExpression' ||
     node.type === 'ConditionalExpression' ||
     node.type === 'SpreadElement';
@@ -82,6 +99,7 @@ exports.releaseStyles = {
             use: 'Read the class name straight from the CSS Module.',
             token: 'Inline the value this token resolved to.',
             styleType: 'A released style is a class name.',
+            folded: 'This only named a style key, which the export has resolved.',
             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.',
         },
@@ -95,6 +113,7 @@ exports.releaseStyles = {
                     statics: { type: 'object' },
                     values: { type: 'object' },
                     complete: { type: 'boolean' },
+                    constants: { type: 'object' },
                     styleProp: { type: 'string' },
                     active: { type: 'boolean' },
                 },
@@ -117,6 +136,7 @@ exports.releaseStyles = {
         const styleProp = raw.styleProp ?? 'classStyle';
         const sourceCode = context.sourceCode;
         const moduleByLocal = new Map();
+        const styleLocals = new Set();
         let active = Boolean(entry || raw.active || raw.complete);
         let coreImport;
         let coreLocal;
@@ -167,10 +187,14 @@ exports.releaseStyles = {
                     bindings.includes(candidate.imported.name ?? candidate.imported.value)));
         };
         const removeStatement = (fixer, node) => {
-            const body = sourceCode.ast.body;
+            const body = (Array.isArray(node.parent?.body)
+                ? node.parent.body
+                : sourceCode.ast.body);
             const next = body.find((statement) => statement.range[0] >= node.range[1]);
             if (!next)
-                return fixer.removeRange([node.range[0], sourceCode.text.length]);
+                return body === sourceCode.ast.body
+                    ? fixer.removeRange([node.range[0], sourceCode.text.length])
+                    : fixer.remove(node);
             if (removesStatement(next))
                 return fixer.remove(node);
             const anchor = importAnchor();
@@ -279,6 +303,7 @@ exports.releaseStyles = {
         const moduleOf = (node) => node?.type === 'MemberExpression' && node.object.type === 'Identifier'
             ? moduleByLocal.get(node.object.name)
             : undefined;
+        const constants = raw.constants?.[context.filename] ?? {};
         const styleKey = (node) => {
             const module = moduleOf(node);
             if (!module)
@@ -286,7 +311,9 @@ exports.releaseStyles = {
             const written = node.computed
                 ? node.property.type === 'Literal'
                     ? String(node.property.value)
-                    : undefined
+                    : node.property.type === 'Identifier'
+                        ? constants[node.property.name]
+                        : undefined
                 : node.property.name;
             if (written === undefined)
                 return undefined;
@@ -385,6 +412,8 @@ exports.releaseStyles = {
             }
             if (value.type === 'Literal' && !value.value)
                 return sourceCode.getText(value);
+            if (value.type === 'Identifier' && styleLocals.has(value.name))
+                return sourceCode.getText(value);
             return classText(value);
         };
         const declarationsOf = (value) => {
@@ -447,6 +476,13 @@ exports.releaseStyles = {
                     moduleByLocal.set(local, { ...module, binding: local });
                     active = true;
                 }
+                walk(program.body, (node) => {
+                    if (node.type !== 'VariableDeclarator' ||
+                        node.id.type !== 'Identifier' ||
+                        !styleKey(node.init))
+                        return;
+                    styleLocals.add(node.id.name);
+                });
                 const migrating = active || themeBindings.length > 0 || animationBindings.length > 0;
                 coreNeeded = keptDefinition || !migrating || survivesCore(program);
                 if (coreImport &&
@@ -585,6 +621,36 @@ exports.releaseStyles = {
                     fix: (fixer) => fixer.replaceText(node, literal),
                 });
             },
+            VariableDeclarator(node) {
+                if (!active ||
+                    keptDefinition ||
+                    node.id.type !== 'Identifier' ||
+                    node.init?.type !== 'Literal' ||
+                    constants[node.id.name] !== node.init.value ||
+                    node.parent.declarations.length !== 1)
+                    return;
+                const scope = sourceCode.getScope(node);
+                const variable = scope.variables.find((candidate) => candidate.name === node.id.name);
+                if (!variable || variable.references.length === 0)
+                    return;
+                const onlyNamesKeys = variable.references.every((reference) => {
+                    if (reference.init)
+                        return true;
+                    const parent = reference.identifier.parent;
+                    return (parent?.type === 'MemberExpression' &&
+                        parent.computed &&
+                        parent.property === reference.identifier &&
+                        Boolean(moduleOf(parent)));
+                });
+                if (!onlyNamesKeys)
+                    return;
+                const target = node.parent;
+                context.report({
+                    node: target,
+                    messageId: 'folded',
+                    fix: (fixer) => removeStatement(fixer, target),
+                });
+            },
             TSTypeReference(node) {
                 if (!complete || keptDefinition)
                     return;
@@ -629,7 +695,9 @@ exports.releaseStyles = {
                 const key = node.computed
                     ? node.property.type === 'Literal'
                         ? String(node.property.value)
-                        : undefined
+                        : node.property.type === 'Identifier'
+                            ? constants[node.property.name]
+                            : undefined
                     : node.property.name;
                 const className = key ? alias[key] : undefined;
                 if (!className)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/codemod",
-  "version": "18.2.20",
+  "version": "18.2.21",
   "description": "Codemods for migrating Plumeria APIs",
   "author": "Refirst 11",
   "license": "MIT",