@plumeria/codemod 18.2.18 → 18.2.20

package/dist/transforms/release-styles.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.releaseStyles = exports.__private = void 0;
 const path = __importStar(require("node:path"));
+const resolve_1 = require("../resolve");
 const memberPath = (node) => {
     if (node?.type === 'Identifier')
         return [node.name];
@@ -54,6 +55,7 @@ const isCreate = (node) => {
     const path = memberPath(node.callee);
     return path?.length === 2 && path[1] === 'create';
 };
+const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
 const needsFilter = (node) => node.type === 'LogicalExpression' ||
     node.type === 'ConditionalExpression' ||
     node.type === 'SpreadElement';
@@ -72,9 +74,14 @@ exports.releaseStyles = {
             themeImport: 'Remove the createTheme import after inlining its CSS variables.',
             animation: '`keyframes` or `viewTransition` 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.',
             core: 'Remove the Plumeria import after exporting the styles.',
             prop: 'Use className after exporting this style to CSS Modules.',
             composition: 'Join the composed CSS Module class names.',
+            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.',
             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.',
         },
@@ -85,6 +92,9 @@ exports.releaseStyles = {
                     modules: { type: 'object' },
                     themes: { type: 'object' },
                     animations: { type: 'object' },
+                    statics: { type: 'object' },
+                    values: { type: 'object' },
+                    complete: { type: 'boolean' },
                     styleProp: { type: 'string' },
                     active: { type: 'boolean' },
                 },
@@ -94,43 +104,165 @@ exports.releaseStyles = {
     },
     create(context) {
         const raw = (context.options[0] ?? {});
-        const entry = raw.modules?.[context.filename];
-        const themeBindings = raw.themes?.[context.filename] ?? [];
-        const animationBindings = raw.animations?.[context.filename] ?? [];
+        const declared = raw.modules?.[context.filename];
+        const keptDefinition = declared?.definitionOnly === true;
+        const complete = raw.complete === true;
+        const entry = keptDefinition ? undefined : declared;
+        const themeBindings = keptDefinition
+            ? []
+            : (raw.themes?.[context.filename] ?? []);
+        const animationBindings = keptDefinition
+            ? []
+            : (raw.animations?.[context.filename] ?? []);
         const styleProp = raw.styleProp ?? 'classStyle';
         const sourceCode = context.sourceCode;
-        let active = Boolean(entry || raw.active);
-        let activeModule = entry;
+        const moduleByLocal = new Map();
+        let active = Boolean(entry || raw.active || raw.complete);
+        let coreImport;
+        let coreLocal;
+        let coreNeeded = true;
+        const declarationOf = (statement) => statement.type === 'ExportNamedDeclaration'
+            ? statement.declaration
+            : statement;
+        const removesDeclaration = (statement) => {
+            const declaration = declarationOf(statement);
+            if (declaration?.type !== 'VariableDeclaration' ||
+                declaration.declarations.length !== 1)
+                return false;
+            const only = declaration.declarations[0];
+            if (only.id.type !== 'Identifier')
+                return false;
+            const called = only.init?.type === 'CallExpression'
+                ? memberPath(only.init.callee)
+                : undefined;
+            if (called?.length !== 2)
+                return false;
+            if (called[1] === 'createStatic')
+                return Boolean(entry);
+            if (called[1] === 'createTheme')
+                return themeBindings.includes(only.id.name);
+            if (called[1] === 'keyframes' || called[1] === 'viewTransition')
+                return animationBindings.includes(only.id.name);
+            if (called[1] === 'create')
+                return Boolean(entry &&
+                    (only.id.name === entry.binding || entry.aliases?.[only.id.name]));
+            return false;
+        };
+        const removesStatement = (statement) => {
+            if (keptDefinition)
+                return false;
+            if (statement.type !== 'ImportDeclaration')
+                return removesDeclaration(statement);
+            const specifier = String(statement.source.value);
+            if (specifier === '@plumeria/core')
+                return !coreNeeded;
+            const bindings = [
+                ...(importedAnimationBindings(specifier) ?? []),
+                ...(importedThemeBindings(specifier) ?? []),
+                ...(importedStaticBindings(specifier) ?? []),
+            ];
+            return (bindings.length > 0 &&
+                statement.specifiers.length > 0 &&
+                statement.specifiers.every((candidate) => candidate.type === 'ImportSpecifier' &&
+                    bindings.includes(candidate.imported.name ?? candidate.imported.value)));
+        };
+        const removeStatement = (fixer, node) => {
+            const 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]);
+            if (removesStatement(next))
+                return fixer.remove(node);
+            const anchor = importAnchor();
+            if (node.range[1] <= anchor && next.range[0] >= anchor)
+                return fixer.remove(node);
+            return fixer.removeRange([node.range[0], next.range[0]]);
+        };
+        const importAnchor = () => {
+            const imports = sourceCode.ast.body.filter((statement) => statement.type === 'ImportDeclaration');
+            return imports.length > 0
+                ? Math.min(imports[imports.length - 1].range[1] + 1, sourceCode.text.length)
+                : 0;
+        };
+        const specifierFor = (module) => {
+            if (!module.target)
+                return module.source;
+            const relative = path
+                .relative(path.dirname(context.filename), module.target)
+                .split(path.sep)
+                .join('/');
+            return relative.startsWith('.') ? relative : `./${relative}`;
+        };
+        const importOf = (specifiers, source) => {
+            const defaultImport = specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+            const namedImports = specifiers.filter((specifier) => specifier.type === 'ImportSpecifier');
+            const clauses = [];
+            if (defaultImport)
+                clauses.push(sourceCode.getText(defaultImport));
+            if (namedImports.length > 0) {
+                clauses.push(`{ ${namedImports
+                    .map((specifier) => sourceCode.getText(specifier))
+                    .join(', ')} }`);
+            }
+            return `import ${clauses.join(', ')} from ${sourceCode.getText(source)};`;
+        };
+        const importedFrom = (specifier, table) => {
+            const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
+            return resolved ? table?.[resolved] : undefined;
+        };
+        const byTarget = new Map(Object.values(raw.modules ?? {}).flatMap((module) => module.target ? [[module.target, module]] : []));
         const importedReleasedModule = (specifier) => {
-            if (!specifier.startsWith('.'))
-                return undefined;
-            const resolved = path.resolve(path.dirname(context.filename), specifier);
-            const withoutExtension = resolved.replace(/\.[^.]+$/, '');
-            const source = Object.keys(raw.modules ?? {}).find((candidate) => candidate.replace(/\.[^.]+$/, '') === withoutExtension);
-            return source ? raw.modules?.[source] : undefined;
+            const declared = importedFrom(specifier, raw.modules);
+            if (declared)
+                return declared;
+            const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
+            return resolved ? byTarget.get(resolved) : undefined;
         };
-        const importedThemeBindings = (specifier) => {
-            if (!specifier.startsWith('.'))
+        const importedThemeBindings = (specifier) => importedFrom(specifier, raw.themes);
+        const importedAnimationBindings = (specifier) => importedFrom(specifier, raw.animations);
+        const importedStaticBindings = (specifier) => importedFrom(specifier, raw.statics);
+        const inlineByLocal = new Map();
+        const literalOf = (value) => typeof value === 'string'
+            ? `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
+            : typeof value === 'number'
+                ? String(value)
+                : undefined;
+        const releasedRange = () => {
+            if (!entry)
                 return undefined;
-            const resolved = path.resolve(path.dirname(context.filename), specifier);
-            const withoutExtension = resolved.replace(/\.[^.]+$/, '');
-            const source = Object.keys(raw.themes ?? {}).find((candidate) => candidate.replace(/\.[^.]+$/, '') === withoutExtension);
-            return source ? raw.themes?.[source] : undefined;
+            for (const statement of sourceCode.ast.body) {
+                const declaration = statement.type === 'ExportNamedDeclaration'
+                    ? statement.declaration
+                    : statement;
+                if (declaration?.type !== 'VariableDeclaration')
+                    continue;
+                for (const candidate of declaration.declarations) {
+                    if (candidate.id.type === 'Identifier' &&
+                        candidate.id.name === entry.binding &&
+                        isCreate(candidate.init))
+                        return statement.range;
+                }
+            }
+            return undefined;
         };
-        const importedAnimationBindings = (specifier) => {
-            if (!specifier.startsWith('.'))
-                return undefined;
-            const resolved = path.resolve(path.dirname(context.filename), specifier);
-            const withoutExtension = resolved.replace(/\.[^.]+$/, '');
-            const source = Object.keys(raw.animations ?? {}).find((candidate) => candidate.replace(/\.[^.]+$/, '') === withoutExtension);
-            return source ? raw.animations?.[source] : undefined;
+        const onlyUsedByReleasedStyles = (local) => {
+            const range = releasedRange();
+            if (!range)
+                return false;
+            const scope = sourceCode.getScope(sourceCode.ast);
+            const moduleScope = scope.type === 'global' ? (scope.childScopes[0] ?? scope) : scope;
+            const variable = moduleScope.variables.find((candidate) => candidate.name === local);
+            if (!variable || variable.references.length === 0)
+                return false;
+            return variable.references.every((reference) => reference.identifier.range[0] >= range[0] &&
+                reference.identifier.range[1] <= range[1]);
         };
-        const removeImportedBindings = (node, bindings, messageId) => {
+        const removeImportedBindings = (node, bindings, messageId, dead) => {
             const removed = node.specifiers.filter((specifier) => {
                 if (specifier.type !== 'ImportSpecifier')
                     return false;
                 const name = specifier.imported.name ?? specifier.imported.value;
-                return bindings.includes(name);
+                return bindings.includes(name) && (!dead || dead(specifier));
             });
             if (removed.length === 0)
                 return false;
@@ -138,32 +270,205 @@ exports.releaseStyles = {
             context.report({
                 node,
                 messageId,
-                fix: (fixer) => {
-                    if (retained.length === 0)
-                        return fixer.remove(node);
-                    const defaultImport = retained.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
-                    const namedImports = retained.filter((specifier) => specifier.type === 'ImportSpecifier');
-                    const clauses = [];
-                    if (defaultImport)
-                        clauses.push(sourceCode.getText(defaultImport));
-                    if (namedImports.length > 0) {
-                        clauses.push(`{ ${namedImports
-                            .map((specifier) => sourceCode.getText(specifier))
-                            .join(', ')} }`);
-                    }
-                    return fixer.replaceText(node, `import ${clauses.join(', ')} from ${sourceCode.getText(node.source)};`);
-                },
+                fix: (fixer) => retained.length === 0
+                    ? removeStatement(fixer, node)
+                    : fixer.replaceText(node, importOf(retained, node.source)),
             });
             return true;
         };
+        const moduleOf = (node) => node?.type === 'MemberExpression' && node.object.type === 'Identifier'
+            ? moduleByLocal.get(node.object.name)
+            : undefined;
+        const styleKey = (node) => {
+            const module = moduleOf(node);
+            if (!module)
+                return undefined;
+            const written = node.computed
+                ? node.property.type === 'Literal'
+                    ? String(node.property.value)
+                    : undefined
+                : node.property.name;
+            if (written === undefined)
+                return undefined;
+            const alias = module.aliases?.[node.object.name];
+            const key = alias ? alias[written] : written;
+            return key === undefined ? undefined : { module, key };
+        };
+        const accessOf = (module, key) => `${module.binding}${IDENTIFIER.test(key) ? `.${key}` : `['${key}']`}`;
+        const classText = (node) => {
+            const resolved = styleKey(node);
+            return resolved ? accessOf(resolved.module, resolved.key) : undefined;
+        };
+        const releasedUse = (node, parent) => parent?.type === 'CallExpression' &&
+            parent.callee === node &&
+            parent.arguments.length > 0 &&
+            parent.arguments.every((argument) => classText(argument) !== undefined);
+        const removesCall = (method) => method === 'create' || method === 'createStatic'
+            ? Boolean(entry)
+            : method === 'createTheme'
+                ? themeBindings.length > 0
+                : method === 'keyframes' || method === 'viewTransition'
+                    ? animationBindings.length > 0
+                    : false;
+        const survivesCore = (program) => {
+            if (!coreLocal)
+                return false;
+            let survives = false;
+            const visit = (node, parent) => {
+                if (survives || !node || typeof node !== 'object')
+                    return;
+                if (Array.isArray(node)) {
+                    for (const child of node)
+                        visit(child, parent);
+                    return;
+                }
+                if (typeof node.type !== 'string')
+                    return;
+                if (node.type === 'MemberExpression' &&
+                    node.object.type === 'Identifier' &&
+                    node.object.name === coreLocal) {
+                    const method = node.computed
+                        ? node.property.type === 'Literal'
+                            ? String(node.property.value)
+                            : ''
+                        : node.property.name;
+                    survives =
+                        method === 'use'
+                            ? !releasedUse(node, parent)
+                            : !removesCall(method);
+                    return;
+                }
+                for (const key of Object.keys(node)) {
+                    if (key === 'parent' || key === 'loc' || key === 'range')
+                        continue;
+                    visit(node[key], node);
+                }
+            };
+            visit(program.body, undefined);
+            return survives;
+        };
+        const functionStyle = (value) => {
+            if (value?.type !== 'CallExpression')
+                return undefined;
+            const resolved = styleKey(value.callee);
+            if (!resolved)
+                return undefined;
+            const func = resolved.module.functions?.[resolved.key];
+            if (!func || func.variables.length !== value.arguments.length)
+                return undefined;
+            return {
+                className: accessOf(resolved.module, resolved.key),
+                declarations: func.variables.map((variable, index) => {
+                    const argument = sourceCode.getText(value.arguments[index]);
+                    return `['${variable}' as string]: ${argument}`;
+                }),
+            };
+        };
+        const resolveText = (value) => {
+            if (!value)
+                return undefined;
+            const called = functionStyle(value);
+            if (called)
+                return called.className;
+            if (value.type === 'LogicalExpression') {
+                const right = resolveText(value.right);
+                return right === undefined
+                    ? undefined
+                    : `${sourceCode.getText(value.left)} ${value.operator} ${right}`;
+            }
+            if (value.type === 'ConditionalExpression') {
+                const consequent = resolveText(value.consequent);
+                const alternate = resolveText(value.alternate);
+                return consequent === undefined || alternate === undefined
+                    ? undefined
+                    : `${sourceCode.getText(value.test)} ? ${consequent} : ${alternate}`;
+            }
+            if (value.type === 'Literal' && !value.value)
+                return sourceCode.getText(value);
+            return classText(value);
+        };
+        const declarationsOf = (value) => {
+            if (!value)
+                return [];
+            const called = functionStyle(value);
+            if (called)
+                return called.declarations;
+            if (value.type === 'LogicalExpression')
+                return declarationsOf(value.right);
+            if (value.type === 'ConditionalExpression')
+                return [
+                    ...declarationsOf(value.consequent),
+                    ...declarationsOf(value.alternate),
+                ];
+            return [];
+        };
         return {
+            Program(program) {
+                if (entry) {
+                    moduleByLocal.set(entry.binding, entry);
+                    for (const owner of Object.keys(entry.aliases ?? {}))
+                        moduleByLocal.set(owner, entry);
+                }
+                for (const node of program.body) {
+                    if (node.type !== 'ImportDeclaration')
+                        continue;
+                    const specifier = String(node.source.value);
+                    if (specifier === '@plumeria/core') {
+                        coreImport = node;
+                        for (const candidate of node.specifiers) {
+                            if (candidate.type === 'ImportNamespaceSpecifier')
+                                coreLocal = candidate.local.name;
+                            else if (candidate.type === 'ImportSpecifier' &&
+                                (candidate.imported.name ?? candidate.imported.value) === 'css')
+                                coreLocal = candidate.local.name;
+                        }
+                        continue;
+                    }
+                    const table = importedFrom(specifier, raw.values);
+                    if (table)
+                        for (const candidate of node.specifiers) {
+                            if (candidate.type !== 'ImportSpecifier')
+                                continue;
+                            const imported = candidate.imported.name ?? candidate.imported.value;
+                            if (imported in table)
+                                inlineByLocal.set(candidate.local.name, table[imported]);
+                        }
+                    const module = importedReleasedModule(specifier);
+                    if (!module)
+                        continue;
+                    const importedBinding = node.specifiers.find((candidate) => (candidate.type === 'ImportSpecifier' &&
+                        (candidate.imported.name ?? candidate.imported.value) ===
+                            module.binding) ||
+                        (candidate.type === 'ImportDefaultSpecifier' &&
+                            specifier.endsWith('.css')));
+                    if (!importedBinding)
+                        continue;
+                    const local = importedBinding.local.name;
+                    moduleByLocal.set(local, { ...module, binding: local });
+                    active = true;
+                }
+                const migrating = active || themeBindings.length > 0 || animationBindings.length > 0;
+                coreNeeded = keptDefinition || !migrating || survivesCore(program);
+                if (coreImport &&
+                    !coreNeeded &&
+                    !entry &&
+                    themeBindings.length === 0 &&
+                    animationBindings.length === 0) {
+                    context.report({
+                        node: coreImport,
+                        messageId: 'core',
+                        fix: (fixer) => removeStatement(fixer, coreImport),
+                    });
+                }
+            },
             ImportDeclaration(node) {
-                if ((entry || themeBindings.length > 0 || animationBindings.length > 0) &&
+                if (!coreNeeded &&
+                    (entry || themeBindings.length > 0 || animationBindings.length > 0) &&
                     node.source.value === '@plumeria/core') {
                     context.report({
                         node,
                         messageId: 'core',
-                        fix: (fixer) => fixer.remove(node),
+                        fix: (fixer) => removeStatement(fixer, node),
                     });
                     return;
                 }
@@ -177,16 +482,28 @@ exports.releaseStyles = {
                     if (removeImportedBindings(node, importedThemes, 'themeImport'))
                         return;
                 }
+                const importedStatics = importedStaticBindings(String(node.source.value));
+                if (importedStatics) {
+                    if (removeImportedBindings(node, importedStatics, 'staticImport', (specifier) => onlyUsedByReleasedStyles(specifier.local.name)))
+                        return;
+                }
                 const importedModule = importedReleasedModule(String(node.source.value));
                 if (importedModule) {
-                    active = true;
                     const importedBinding = node.specifiers.find((specifier) => specifier.type === 'ImportSpecifier' &&
                         (specifier.imported.name ?? specifier.imported.value) ===
                             importedModule.binding);
-                    activeModule = {
-                        ...importedModule,
-                        binding: importedBinding?.local.name ?? importedModule.binding,
-                    };
+                    const local = importedBinding?.local.name ?? importedModule.binding;
+                    if (importedModule.definitionOnly && importedBinding) {
+                        const retained = node.specifiers.filter((specifier) => specifier !== importedBinding);
+                        const released = `import ${local} from '${specifierFor(importedModule)}';`;
+                        context.report({
+                            node,
+                            messageId: 'definition',
+                            fix: (fixer) => fixer.replaceText(node, retained.length === 0
+                                ? released
+                                : `${released}\n${importOf(retained, node.source)}`),
+                        });
+                    }
                 }
             },
             VariableDeclaration(node) {
@@ -212,14 +529,24 @@ exports.releaseStyles = {
                             : path[1] === 'keyframes' || path[1] === 'viewTransition'
                                 ? 'animation'
                                 : 'static',
-                        fix: (fixer) => fixer.remove(target),
+                        fix: (fixer) => removeStatement(fixer, target),
                     });
                     return;
                 }
                 if (!entry)
                     return;
-                if (declaration.id.name !== entry.binding ||
-                    !isCreate(declaration.init))
+                if (!isCreate(declaration.init))
+                    return;
+                if (entry.aliases?.[declaration.id.name]) {
+                    const aliased = node.parent?.type === 'ExportNamedDeclaration' ? node.parent : node;
+                    context.report({
+                        node: aliased,
+                        messageId: 'definition',
+                        fix: (fixer) => removeStatement(fixer, aliased),
+                    });
+                    return;
+                }
+                if (declaration.id.name !== entry.binding)
                     return;
                 const exported = node.parent?.type === 'ExportNamedDeclaration';
                 const target = exported ? node.parent : node;
@@ -227,10 +554,115 @@ exports.releaseStyles = {
                 const replacement = exported
                     ? `${imported}\nexport { ${entry.binding} };`
                     : imported;
+                const anchor = importAnchor();
                 context.report({
                     node: target,
                     messageId: 'definition',
-                    fix: (fixer) => fixer.replaceText(target, replacement),
+                    fix: (fixer) => anchor >= target.range[0] && anchor <= target.range[1]
+                        ? fixer.replaceText(target, replacement)
+                        : [
+                            fixer.insertTextBeforeRange([anchor, anchor], `${replacement}\n`),
+                            removeStatement(fixer, target),
+                        ],
+                });
+            },
+            Identifier(node) {
+                const value = inlineByLocal.get(node.name);
+                const literal = literalOf(value);
+                if (literal === undefined)
+                    return;
+                const parent = node.parent;
+                if (parent?.type === 'ImportSpecifier' ||
+                    parent?.type === 'ExportSpecifier' ||
+                    (parent?.type === 'MemberExpression' && parent.property === node) ||
+                    (parent?.type === 'Property' &&
+                        parent.key === node &&
+                        !parent.computed))
+                    return;
+                context.report({
+                    node,
+                    messageId: 'token',
+                    fix: (fixer) => fixer.replaceText(node, literal),
+                });
+            },
+            TSTypeReference(node) {
+                if (!complete || keptDefinition)
+                    return;
+                const name = node.typeName.type === 'TSQualifiedName'
+                    ? node.typeName.right.name
+                    : node.typeName.name;
+                if (name !== 'Style')
+                    return;
+                context.report({
+                    node,
+                    messageId: 'styleType',
+                    fix: (fixer) => fixer.replaceText(node, 'string'),
+                });
+            },
+            MemberExpression(node) {
+                if (node.object.type === 'Identifier') {
+                    const table = inlineByLocal.get(node.object.name);
+                    if (table && typeof table === 'object') {
+                        const key = node.computed
+                            ? node.property.type === 'Literal'
+                                ? String(node.property.value)
+                                : undefined
+                            : node.property.name;
+                        const literal = key === undefined
+                            ? undefined
+                            : literalOf(table[key]);
+                        if (literal !== undefined) {
+                            context.report({
+                                node,
+                                messageId: 'token',
+                                fix: (fixer) => fixer.replaceText(node, literal),
+                            });
+                            return;
+                        }
+                    }
+                }
+                if (!entry?.aliases || node.object.type !== 'Identifier')
+                    return;
+                const alias = entry.aliases[node.object.name];
+                if (!alias)
+                    return;
+                const key = node.computed
+                    ? node.property.type === 'Literal'
+                        ? String(node.property.value)
+                        : undefined
+                    : node.property.name;
+                const className = key ? alias[key] : undefined;
+                if (!className)
+                    return;
+                const access = IDENTIFIER.test(className)
+                    ? `.${className}`
+                    : `['${className}']`;
+                context.report({
+                    node,
+                    messageId: 'alias',
+                    fix: (fixer) => fixer.replaceText(node, `${entry.binding}${access}`),
+                });
+            },
+            CallExpression(node) {
+                if (node.callee.type !== 'MemberExpression' ||
+                    node.callee.object.type !== 'Identifier' ||
+                    node.callee.property.name !== 'use')
+                    return;
+                const reader = node.callee.object.name;
+                if (coreLocal ? reader !== coreLocal : moduleByLocal.has(reader))
+                    return;
+                const texts = node.arguments.map(resolveText);
+                if (texts.length === 0 || texts.some((text) => text === undefined))
+                    return;
+                const replacement = texts.length === 1 && !node.arguments.some(needsFilter)
+                    ? texts[0]
+                    : node.arguments.some(needsFilter)
+                        ? `[${texts.join(', ')}].filter(Boolean).join(' ')`
+                        : `[${texts.join(', ')}].join(' ')`;
+                context.report({
+                    node,
+                    messageId: 'use',
+                    fix: (fixer) => fixer.replaceText(node, replacement),
                 });
             },
             JSXAttribute(node) {
@@ -241,29 +673,49 @@ exports.releaseStyles = {
                 const expression = node.value?.type === 'JSXExpressionContainer'
                     ? node.value.expression
                     : undefined;
-                const moduleInfo = activeModule;
-                const functionStyle = (value) => {
-                    if (!moduleInfo ||
-                        value?.type !== 'CallExpression' ||
-                        value.callee.type !== 'MemberExpression' ||
-                        value.callee.object.type !== 'Identifier' ||
-                        value.callee.object.name !== moduleInfo.binding)
+                const carried = node.parent.attributes.find((attribute) => attribute !== node &&
+                    attribute.type === 'JSXAttribute' &&
+                    attribute.name?.type === 'JSXIdentifier' &&
+                    attribute.name.name === 'className');
+                const takeProp = (valueText) => {
+                    if (!carried) {
+                        context.report({
+                            node: node.name,
+                            messageId: 'prop',
+                            fix: (fixer) => fixer.replaceText(node.name, 'className'),
+                        });
+                        return;
+                    }
+                    const ours = valueText ??
+                        (node.value ? sourceCode.getText(node.value).slice(1, -1) : '');
+                    const theirs = carried.value?.type === 'JSXExpressionContainer'
+                        ? sourceCode.getText(carried.value.expression)
+                        : carried.value
+                            ? sourceCode.getText(carried.value)
+                            : "''";
+                    context.report({
+                        node,
+                        messageId: 'prop',
+                        fix: (fixer) => [
+                            fixer.replaceText(carried, `className={[${theirs}, ${ours}].filter(Boolean).join(' ')}`),
+                            fixer.removeRange([
+                                Math.min(node.range[0], carried.range[1]),
+                                node.range[1],
+                            ]),
+                        ],
+                    });
+                };
+                const mergedClass = (elements) => {
+                    if (elements.length < 2)
+                        return undefined;
+                    const resolved = elements.map(styleKey);
+                    if (resolved.some((part) => !part))
                         return undefined;
-                    const key = value.callee.computed
-                        ? value.callee.property.type === 'Literal'
-                            ? String(value.callee.property.value)
-                            : undefined
-                        : value.callee.property.name;
-                    const func = key ? moduleInfo.functions?.[key] : undefined;
-                    if (!key || !func || func.variables.length !== value.arguments.length)
+                    const module = resolved[0].module;
+                    if (resolved.some((part) => part.module !== module))
                         return undefined;
-                    return {
-                        className: `${moduleInfo.binding}.${key}`,
-                        declarations: func.variables.map((variable, index) => {
-                            const argument = sourceCode.getText(value.arguments[index]);
-                            return `'${variable}': ${argument}`;
-                        }),
-                    };
+                    const name = module.merges?.[resolved.map((part) => part.key).join('|')];
+                    return name ? accessOf(module, name) : undefined;
                 };
                 const replaceWithFunctionStyle = (className, declarations) => {
                     const styleAttribute = node.parent.attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
@@ -299,9 +751,7 @@ exports.releaseStyles = {
                     return;
                 }
                 if (expression?.type === 'CallExpression' &&
-                    expression.callee.type === 'MemberExpression' &&
-                    expression.callee.object.type === 'Identifier' &&
-                    expression.callee.object.name === moduleInfo?.binding) {
+                    moduleOf(expression.callee)) {
                     context.report({
                         node,
                         messageId: 'unsupportedFunctionStyle',
@@ -310,34 +760,70 @@ exports.releaseStyles = {
                 }
                 if (expression?.type === 'ArrayExpression') {
                     const elements = expression.elements.filter(Boolean);
-                    if (elements.length > 0) {
-                        const declarations = [];
-                        const texts = elements.map((element) => {
-                            const resolved = functionStyle(element);
-                            if (!resolved)
-                                return sourceCode.getText(element);
-                            declarations.push(...resolved.declarations);
-                            return resolved.className;
-                        });
-                        const replacement = elements.some(needsFilter)
-                            ? `[${texts.join(', ')}].filter(Boolean).join(' ')`
-                            : `\`${texts.map((text) => `\${${text}}`).join(' ')}\``;
-                        if (declarations.length > 0) {
-                            replaceWithFunctionStyle(replacement, declarations);
+                    const merged = mergedClass(elements);
+                    if (merged) {
+                        if (carried) {
+                            takeProp(merged);
                             return;
                         }
                         context.report({
                             node: expression,
                             messageId: 'composition',
-                            fix: (fixer) => fixer.replaceText(expression, replacement),
+                            fix: (fixer) => fixer.replaceText(expression, merged),
                         });
+                        takeProp();
+                        return;
+                    }
+                    if (elements.length === 0) {
+                        takeProp();
+                        return;
+                    }
+                    const texts = elements.map(resolveText);
+                    if (texts.some((text) => text === undefined))
+                        return;
+                    const ranked = elements.map((element) => element.type === 'LogicalExpression'
+                        ? styleKey(element.right)
+                        : styleKey(element));
+                    const module = ranked[0]?.module;
+                    const perSlot = module && ranked.every((part) => part?.module === module)
+                        ? module.overrides?.[ranked.map((part) => part.key).join('|')]
+                        : undefined;
+                    if (perSlot) {
+                        for (let slot = elements.length - 1; slot >= 0; slot--) {
+                            const name = perSlot[slot];
+                            if (!name)
+                                continue;
+                            const element = elements[slot];
+                            const access = accessOf(module, name);
+                            texts.splice(slot + 1, 0, element.type === 'LogicalExpression'
+                                ? `${sourceCode.getText(element.left)} ${element.operator} ${access}`
+                                : access);
+                            elements.splice(slot + 1, 0, element);
+                        }
+                    }
+                    const declarations = elements.flatMap(declarationsOf);
+                    const replacement = elements.some(needsFilter)
+                        ? `[${texts.join(', ')}].filter(Boolean).join(' ')`
+                        : `[${texts.join(', ')}].join(' ')`;
+                    if (declarations.length > 0) {
+                        replaceWithFunctionStyle(replacement, declarations);
+                        return;
+                    }
+                    if (carried) {
+                        takeProp(replacement);
+                        return;
                     }
+                    context.report({
+                        node: expression,
+                        messageId: 'composition',
+                        fix: (fixer) => fixer.replaceText(expression, replacement),
+                    });
+                    takeProp();
+                    return;
                 }
-                context.report({
-                    node: node.name,
-                    messageId: 'prop',
-                    fix: (fixer) => fixer.replaceText(node.name, 'className'),
-                });
+                if (!complete && expression && resolveText(expression) === undefined)
+                    return;
+                takeProp();
             },
         };
     },