@plumeria/codemod 18.2.19 → 18.2.21

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

@@ -1,8 +1,10 @@
 import type { Rule } from 'eslint';
 export interface ModuleMap {
     source: string;
+    target?: string;
     names: Record<string, string>;
     composes?: Record<string, string[]>;
+    functions?: Record<string, string[]>;
 }
 export interface AdoptStylesOptions {
     modules: Record<string, ModuleMap>;

package/dist/transforms/adopt-styles.js

@@ -1,6 +1,41 @@
 "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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adoptStyles = void 0;
+const path = __importStar(require("node:path"));
+const resolve_1 = require("../resolve");
 const CORE = '@plumeria/core';
 const readOptions = (context) => {
     const raw = (context.options[0] ?? {});
@@ -22,6 +57,9 @@ exports.adoptStyles = {
             key: 'The generated key for "{{from}}" is "{{to}}".',
             prop: 'Styles are carried by the "{{prop}}" prop.',
             composes: '"{{key}}" composed other classes; pass them as an array.',
+            value: 'A style read as a value goes back through `css.use`.',
+            joined: 'A joined class list is written as an array.',
+            call: 'The custom properties are the arguments of a function style.',
         },
         schema: [
             {
@@ -39,9 +77,144 @@ exports.adoptStyles = {
         const bindings = new Map();
         let hasCore = false;
         let stylesTaken = false;
+        let coreLocal;
+        let readsValue = false;
+        let several = false;
+        const stylingPosition = (node) => {
+            let current = node;
+            while (current.parent &&
+                (current.parent.type === 'ArrayExpression' ||
+                    current.parent.type === 'LogicalExpression' ||
+                    current.parent.type === 'ConditionalExpression' ||
+                    current.parent.type === 'JSXExpressionContainer'))
+                current = current.parent;
+            return (current.parent?.type === 'JSXAttribute' &&
+                (current.parent.name?.name === 'className' ||
+                    current.parent.name?.name === styleProp));
+        };
+        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
+                    ? quasi.value.cooked === ''
+                    : quasi.value.cooked === ' ');
+                return spaced ? node.expressions : undefined;
+            }
+            if (node?.type !== 'CallExpression' ||
+                node.callee.type !== 'MemberExpression' ||
+                node.callee.property?.name !== 'join' ||
+                node.arguments.length !== 1 ||
+                node.arguments[0].value !== ' ')
+                return undefined;
+            const joined = node.callee.object;
+            if (joined?.type === 'ArrayExpression')
+                return joined.elements.filter(Boolean);
+            return joined?.type === 'CallExpression' &&
+                joined.callee.type === 'MemberExpression' &&
+                joined.callee.property?.name === 'filter' &&
+                joined.callee.object?.type === 'ArrayExpression'
+                ? joined.callee.object.elements.filter(Boolean)
+                : undefined;
+        };
+        const intrinsic = (element) => {
+            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'
+                ? node
+                : undefined;
+        const insideUse = (node) => {
+            let current = node;
+            while (current.parent &&
+                (current.parent.type === 'LogicalExpression' ||
+                    current.parent.type === 'ConditionalExpression' ||
+                    current.parent.type === 'ArrayExpression'))
+                current = current.parent;
+            return (current.parent?.type === 'CallExpression' &&
+                current.parent.callee?.type === 'MemberExpression' &&
+                current.parent.callee.property?.name === 'use');
+        };
         return {
             Program(program) {
                 hasCore = program.body.some((n) => n.type === 'ImportDeclaration' && n.source.value === CORE);
+                const locals = new Set();
+                let seen = 0;
+                for (const statement of program.body) {
+                    if (statement.type !== 'ImportDeclaration')
+                        continue;
+                    if (statement.source.value === CORE) {
+                        for (const specifier of statement.specifiers)
+                            if (specifier.type === 'ImportNamespaceSpecifier' ||
+                                (specifier.type === 'ImportSpecifier' &&
+                                    (specifier.imported.name ?? specifier.imported.value) ===
+                                        'css'))
+                                coreLocal = specifier.local.name;
+                        continue;
+                    }
+                    const target = (0, resolve_1.resolveSourcePath)(String(statement.source.value), context.filename);
+                    if (!target || !modules[target])
+                        continue;
+                    for (const specifier of statement.specifiers)
+                        if (specifier.type === 'ImportDefaultSpecifier') {
+                            locals.add(specifier.local.name);
+                            seen += 1;
+                        }
+                }
+                several = seen > 1;
+                const visit = (node, styling) => {
+                    if (!node || typeof node !== 'object')
+                        return;
+                    if (Array.isArray(node)) {
+                        for (const child of node)
+                            visit(child, styling);
+                        return;
+                    }
+                    if (typeof node.type !== 'string')
+                        return;
+                    const inside = styling ||
+                        (node.type === 'JSXAttribute' &&
+                            (node.name?.name === 'className' ||
+                                node.name?.name === styleProp));
+                    if (!inside &&
+                        node.type === 'MemberExpression' &&
+                        locals.has(node.object?.name))
+                        readsValue = true;
+                    if (node.type === 'JSXAttribute' &&
+                        node.name?.name === 'className' &&
+                        node.parent?.name?.type === 'JSXIdentifier' &&
+                        /^[A-Z]/.test(String(node.parent.name.name)) &&
+                        node.value?.type === 'JSXExpressionContainer' &&
+                        joinedElements(node.value.expression))
+                        readsValue = true;
+                    for (const key of Object.keys(node)) {
+                        if (key === 'parent' || key === 'loc' || key === 'range')
+                            continue;
+                        visit(node[key], inside);
+                    }
+                };
+                visit(program.body, false);
+                if (readsValue && !coreLocal)
+                    coreLocal = 'css';
                 stylesTaken = program.body.some((n) => {
                     if (n.type === 'VariableDeclaration') {
                         return n.declarations.some((d) => d.id?.name === 'styles');
@@ -56,28 +229,55 @@ exports.adoptStyles = {
             },
             ImportDeclaration(node) {
                 const specifier = String(node.source.value);
-                const entry = modules[specifier] ??
-                    Object.entries(modules).find(([key]) => key.includes('/') === false && specifier.endsWith(`/${key}`))?.[1];
-                if (!entry)
+                const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
+                const named = Object.entries(modules).filter(([key]) => key === specifier ||
+                    path.basename(key) === path.basename(specifier));
+                const entry = (resolved ? modules[resolved] : undefined) ??
+                    (named.length === 1 ? named[0][1] : undefined);
+                if (!entry) {
+                    const adopted = resolved &&
+                        Object.values(modules).find((candidate) => candidate.target === resolved);
+                    if (!adopted)
+                        return;
+                    const already = node.specifiers.find((specifier) => specifier.type === 'ImportSpecifier' &&
+                        (specifier.imported.name ?? specifier.imported.value) ===
+                            'styles');
+                    if (already)
+                        bindings.set(already.local.name, {
+                            entry: adopted,
+                            local: already.local.name,
+                        });
                     return;
+                }
+                const from = entry.target && path.isAbsolute(context.filename)
+                    ? (() => {
+                        const relative = path
+                            .relative(path.dirname(context.filename), entry.target)
+                            .split(path.sep)
+                            .join('/')
+                            .replace(/\.ts$/, '');
+                        return relative.startsWith('.') ? relative : `./${relative}`;
+                    })()
+                    : entry.source;
                 const local = node.specifiers.find((s) => s.type === 'ImportDefaultSpecifier');
                 if (!local)
                     return;
                 const name = local.local.name;
-                const renamed = stylesTaken && name !== 'styles' ? name : 'styles';
+                const renamed = several || (stylesTaken && name !== 'styles') ? name : 'styles';
                 bindings.set(name, { entry, local: renamed });
                 const imported = renamed === 'styles'
-                    ? `import { styles } from '${entry.source}';`
-                    : `import { styles as ${renamed} } from '${entry.source}';`;
-                const replacement = hasCore
-                    ? imported
-                    : `import '${CORE}';\n${imported}`;
+                    ? `import { styles } from '${from}';`
+                    : `import { styles as ${renamed} } from '${from}';`;
+                const core = coreLocal
+                    ? `import * as ${coreLocal} from '${CORE}';`
+                    : `import '${CORE}';`;
+                const replacement = hasCore ? imported : `${core}\n${imported}`;
                 if (!hasCore)
                     hasCore = true;
                 context.report({
                     node,
                     messageId: 'source',
-                    data: { source: entry.source },
+                    data: { source: from },
                     fix: (fixer) => fixer.replaceText(node, replacement),
                 });
             },
@@ -96,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({
@@ -105,6 +313,82 @@ exports.adoptStyles = {
                     fix: (fixer) => fixer.replaceText(node, `${local}.${key}`),
                 });
             },
+            [`JSXAttribute[name.name='${styleProp}']`](node) {
+                if (node.value?.type !== 'JSXExpressionContainer')
+                    return;
+                const style = node.parent.attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
+                    attribute.name?.name === 'style' &&
+                    attribute.value?.type === 'JSXExpressionContainer' &&
+                    attribute.value.expression.type === 'ObjectExpression');
+                if (!style)
+                    return;
+                const properties = style.value.expression.properties;
+                const named = new Map();
+                for (const property of properties) {
+                    if (property.type !== 'Property' || !property.computed)
+                        continue;
+                    const key = property.key.type === 'TSAsExpression'
+                        ? property.key.expression
+                        : property.key;
+                    if (key.type === 'Literal' && typeof key.value === 'string')
+                        named.set(key.value, property);
+                }
+                if (named.size === 0)
+                    return;
+                const consumed = new Set();
+                const call = (read) => {
+                    const binding = read?.type === 'MemberExpression' &&
+                        read.object.type === 'Identifier'
+                        ? bindings.get(read.object.name)
+                        : undefined;
+                    if (!binding)
+                        return undefined;
+                    const written = !read.computed && read.property.type === 'Identifier'
+                        ? read.property.name
+                        : read.computed && read.property.type === 'Literal'
+                            ? String(read.property.value)
+                            : undefined;
+                    const key = written && (binding.entry.names[written] ?? written);
+                    const variables = key ? binding.entry.functions?.[key] : undefined;
+                    if (!variables || variables.some((v) => !named.has(v)))
+                        return undefined;
+                    for (const variable of variables)
+                        consumed.add(named.get(variable));
+                    return `${binding.local}.${key}(${variables
+                        .map((variable) => context.sourceCode.getText(named.get(variable).value))
+                        .join(', ')})`;
+                };
+                const expression = node.value.expression;
+                const elements = expression.type === 'ArrayExpression'
+                    ? expression.elements.filter(Boolean)
+                    : [expression];
+                const texts = elements.map((element) => {
+                    const called = call(styleRead(element));
+                    if (!called)
+                        return context.sourceCode.getText(element);
+                    return element.type === 'LogicalExpression'
+                        ? `${context.sourceCode.getText(element.left)} ${element.operator} ${called}`
+                        : called;
+                });
+                if (consumed.size === 0)
+                    return;
+                const kept = properties.filter((property) => !consumed.has(property));
+                const replacement = expression.type === 'ArrayExpression'
+                    ? `[${texts.join(', ')}]`
+                    : texts[0];
+                context.report({
+                    node,
+                    messageId: 'call',
+                    fix: (fixer) => [
+                        fixer.replaceText(expression, replacement),
+                        kept.length === 0
+                            ? fixer.removeRange([style.range[0] - 1, style.range[1]])
+                            : fixer.replaceText(style.value.expression, `{ ${kept
+                                .map((property) => context.sourceCode.getText(property))
+                                .join(', ')} }`),
+                    ],
+                });
+            },
             JSXAttribute(node) {
                 if (node.name.type !== 'JSXIdentifier')
                     return;
@@ -114,6 +398,32 @@ exports.adoptStyles = {
                 if (!value || value.type !== 'JSXExpressionContainer')
                     return;
                 const expression = value.expression;
+                const joined = joinedElements(expression);
+                if (joined) {
+                    if (!joined.some((element) => bindings.has(styleRead(element)?.object?.name)))
+                        return;
+                    const list = joined.map(renamedText).join(', ');
+                    if (!intrinsic(node.parent) && coreLocal) {
+                        context.report({
+                            node: expression,
+                            messageId: 'value',
+                            fix: (fixer) => fixer.replaceText(expression, `${coreLocal}.use(${list})`),
+                        });
+                        return;
+                    }
+                    context.report({
+                        node: node.name,
+                        messageId: 'prop',
+                        data: { prop: styleProp },
+                        fix: (fixer) => fixer.replaceText(node.name, styleProp),
+                    });
+                    context.report({
+                        node: expression,
+                        messageId: 'joined',
+                        fix: (fixer) => fixer.replaceText(expression, `[${list}]`),
+                    });
+                    return;
+                }
                 const root = expression.type === 'MemberExpression' &&
                     expression.object.type === 'Identifier'
                     ? expression.object.name

package/dist/transforms/css-modules.d.ts

@@ -9,9 +9,13 @@ export interface Converted {
     code: string;
     names: Record<string, string>;
     composes: Record<string, string[]>;
+    functions: Record<string, string[]>;
     reports: Report[];
 }
-type Value = string | number;
+interface Raw {
+    raw: string;
+}
+type Value = string | number | Raw;
 export declare const toProperty: (name: string) => string;
 export declare const toKey: (className: string) => string;
 export declare const toValue: (raw: string) => Value;

package/dist/transforms/css-modules.js

@@ -41,6 +41,7 @@ const nest = (node, key) => {
     node.nested.push([key, child]);
     return child;
 };
+const isSpecificityBoost = (node) => node.type === 'pseudo' && /^:not\(#[\\_].*\)$/.test(node.toString());
 const atRuleKeys = (rule) => {
     const keys = [];
     let parent = rule.parent;
@@ -57,7 +58,7 @@ const readSelector = (selector) => {
         hint: 'Only a local class, or one local class under another, is converted.',
     };
     (0, postcss_selector_parser_1.default)((root) => {
-        const nodes = root.first.nodes.filter((n) => n.type !== 'string');
+        const nodes = root.first.nodes.filter((n) => n.type !== 'string' && !isSpecificityBoost(n));
         const parts = [
             { pseudos: [] },
         ];
@@ -148,7 +149,16 @@ const serialise = (node, indent) => {
         lines.push(`${indent}...${marker},`);
     for (const [prop, value] of node.decls) {
         const key = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(prop) ? prop : `'${prop}'`;
-        lines.push(`${indent}${key}: ${typeof value === 'number' ? value : `'${value}'`},`);
+        if (typeof value === 'object' && value.raw === prop) {
+            lines.push(`${indent}${prop},`);
+            continue;
+        }
+        const written = typeof value === 'number'
+            ? value
+            : typeof value === 'object'
+                ? value.raw
+                : `'${value}'`;
+        lines.push(`${indent}${key}: ${written},`);
     }
     for (const [key, child] of node.nested) {
         const written = key.startsWith('css.extended(') ? `[${key}]` : `'${key}'`;
@@ -224,12 +234,56 @@ function convertStylesheet(css) {
                     composes[target.key] = (composes[target.key] ?? []).concat(name.split(/\s+/).map(exports.toKey));
                     return;
                 }
-                node.decls.push([(0, exports.toProperty)(child.prop), (0, exports.toValue)(child.value)]);
+                const property = (0, exports.toProperty)(child.prop);
+                const held = node.decls.findIndex(([name]) => name === property);
+                if (held !== -1)
+                    node.decls.splice(held, 1);
+                node.decls.push([property, (0, exports.toValue)(child.value)]);
             });
         }
     });
+    const declared = new Set();
+    root.walkDecls((decl) => {
+        if (decl.prop.startsWith('--'))
+            declared.add(decl.prop);
+    });
+    const functions = {};
+    const VARIABLE = /^var\((--[A-Za-z0-9_-]+)\)$/;
+    const HASHED = /^x[0-9a-z]{7}$/;
+    const kebab = (name) => name.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const parameterise = (node, key, variables) => {
+        const owned = new RegExp(`^--[A-Za-z0-9_-]+-${kebab(key)}-([a-z0-9-]+)$`);
+        node.decls = node.decls.map(([prop, value]) => {
+            const match = typeof value === 'string' ? VARIABLE.exec(value.trim()) : null;
+            const variable = match?.[1];
+            if (!variable || declared.has(variable))
+                return [prop, value];
+            const parameter = owned.exec(variable)?.[1];
+            if (!parameter || HASHED.test(variable.slice(2).split('-')[0]))
+                return [prop, value];
+            if (!variables.includes(variable))
+                variables.push(variable);
+            return [prop, { raw: (0, exports.toKey)(parameter) }];
+        });
+        for (const [, child] of node.nested)
+            parameterise(child, key, variables);
+    };
+    for (const [key, node] of keys) {
+        const variables = [];
+        parameterise(node, key, variables);
+        if (variables.length > 0)
+            functions[key] = variables;
+    }
     const body = [...keys.entries()]
-        .map(([key, node]) => `  ${key}: {\n${serialise(node, '    ')}\n  },`)
+        .map(([key, node]) => {
+        const variables = functions[key];
+        if (!variables)
+            return `  ${key}: {\n${serialise(node, '    ')}\n  },`;
+        const params = variables
+            .map((variable) => `${(0, exports.toKey)(variable.split('-').pop())}: string | number`)
+            .join(', ');
+        return `  ${key}: (${params}) => ({\n${serialise(node, '    ')}\n  }),`;
+    })
         .join('\n');
     const code = `import * as css from '@plumeria/core';
 
@@ -237,5 +291,5 @@ export const styles = css.create({
 ${body}
 });
 `;
-    return { code, names, composes, reports };
+    return { code, names, composes, functions, reports };
 }

package/dist/transforms/from-plumeria.d.ts

@@ -14,9 +14,25 @@ export interface PlumeriaModule {
         variables: string[];
     }>;
     aliases: Record<string, Record<string, string>>;
+    merges: Record<string, string>;
+    overrides: Record<string, Record<number, string>>;
     definitionOnly: boolean;
     reports: PlumeriaReport[];
 }
+export interface PlumeriaComposition {
+    parts: {
+        binding: string;
+        key: string;
+    }[];
+    slots: {
+        binding: string;
+        key: string;
+    }[][];
+    file: string;
+    line: number;
+    column: number;
+}
+export declare const compositionSignature: (classNames: string[]) => string;
 export interface ThemeExtraction {
     bindings: Record<string, Record<string, string>>;
     globalCss: string;
@@ -42,4 +58,4 @@ export declare const __private: {
 export declare function extractPlumeriaThemes(source: string): ThemeExtraction;
 export declare function extractPlumeriaStatics(source: string, externalValues?: Record<string, unknown>): StaticExtraction;
 export declare function extractPlumeriaAnimations(source: string, externalValues?: Record<string, unknown>): AnimationExtraction;
-export declare function convertPlumeriaModule(source: string, externalValues?: Record<string, unknown>): PlumeriaModule | null;
+export declare function convertPlumeriaModule(source: string, externalValues?: Record<string, unknown>, compositions?: PlumeriaComposition[]): PlumeriaModule | null;