@plumeria/codemod 18.2.19 → 18.2.21

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';
@@ -79,6 +96,10 @@ exports.releaseStyles = {
             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.',
+            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.',
         },
@@ -90,6 +111,9 @@ exports.releaseStyles = {
                     themes: { type: 'object' },
                     animations: { type: 'object' },
                     statics: { type: 'object' },
+                    values: { type: 'object' },
+                    complete: { type: 'boolean' },
+                    constants: { type: 'object' },
                     styleProp: { type: 'string' },
                     active: { type: 'boolean' },
                 },
@@ -100,13 +124,90 @@ exports.releaseStyles = {
     create(context) {
         const raw = (context.options[0] ?? {});
         const declared = raw.modules?.[context.filename];
-        const entry = declared?.definitionOnly ? undefined : declared;
-        const themeBindings = raw.themes?.[context.filename] ?? [];
-        const animationBindings = raw.animations?.[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();
+        const styleLocals = new Set();
+        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 = (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 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();
+            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;
@@ -133,10 +234,23 @@ exports.releaseStyles = {
             const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
             return resolved ? table?.[resolved] : undefined;
         };
-        const importedReleasedModule = (specifier) => importedFrom(specifier, raw.modules);
+        const byTarget = new Map(Object.values(raw.modules ?? {}).flatMap((module) => module.target ? [[module.target, module]] : []));
+        const importedReleasedModule = (specifier) => {
+            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) => 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;
@@ -181,19 +295,216 @@ exports.releaseStyles = {
                 node,
                 messageId,
                 fix: (fixer) => retained.length === 0
-                    ? fixer.remove(node)
+                    ? 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 constants = raw.constants?.[context.filename] ?? {};
+        const styleKey = (node) => {
+            const module = moduleOf(node);
+            if (!module)
+                return undefined;
+            const written = node.computed
+                ? node.property.type === 'Literal'
+                    ? String(node.property.value)
+                    : node.property.type === 'Identifier'
+                        ? constants[node.property.name]
+                        : 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);
+            if (value.type === 'Identifier' && styleLocals.has(value.name))
+                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;
+                }
+                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 &&
+                    !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;
                 }
@@ -214,12 +525,10 @@ exports.releaseStyles = {
                 }
                 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);
                     const local = importedBinding?.local.name ?? importedModule.binding;
-                    activeModule = { ...importedModule, binding: local };
                     if (importedModule.definitionOnly && importedBinding) {
                         const retained = node.specifiers.filter((specifier) => specifier !== importedBinding);
                         const released = `import ${local} from '${specifierFor(importedModule)}';`;
@@ -256,7 +565,7 @@ exports.releaseStyles = {
                             : path[1] === 'keyframes' || path[1] === 'viewTransition'
                                 ? 'animation'
                                 : 'static',
-                        fix: (fixer) => fixer.remove(target),
+                        fix: (fixer) => removeStatement(fixer, target),
                     });
                     return;
                 }
@@ -269,7 +578,7 @@ exports.releaseStyles = {
                     context.report({
                         node: aliased,
                         messageId: 'definition',
-                        fix: (fixer) => fixer.remove(aliased),
+                        fix: (fixer) => removeStatement(fixer, aliased),
                     });
                     return;
                 }
@@ -281,13 +590,103 @@ 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),
+                });
+            },
+            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;
+                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];
@@ -296,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)
@@ -310,6 +711,28 @@ exports.releaseStyles = {
                     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) {
                 if (!active)
                     return;
@@ -318,40 +741,49 @@ exports.releaseStyles = {
                 const expression = node.value?.type === 'JSXExpressionContainer'
                     ? node.value.expression
                     : undefined;
-                const moduleInfo = activeModule;
-                const readsModule = (callee) => Boolean(moduleInfo &&
-                    callee?.type === 'MemberExpression' &&
-                    callee.object.type === 'Identifier' &&
-                    (callee.object.name === moduleInfo.binding ||
-                        moduleInfo.aliases?.[callee.object.name]));
-                const styleKey = (callee) => {
-                    if (!readsModule(callee))
-                        return undefined;
-                    const raw = callee.computed
-                        ? callee.property.type === 'Literal'
-                            ? String(callee.property.value)
-                            : undefined
-                        : callee.property.name;
-                    if (raw === undefined)
-                        return undefined;
-                    const alias = moduleInfo.aliases?.[callee.object.name];
-                    return alias ? alias[raw] : raw;
+                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 functionStyle = (value) => {
-                    if (!moduleInfo || value?.type !== 'CallExpression')
+                const mergedClass = (elements) => {
+                    if (elements.length < 2)
                         return undefined;
-                    const key = styleKey(value.callee);
-                    const func = key ? moduleInfo.functions?.[key] : undefined;
-                    if (!key || !func || func.variables.length !== value.arguments.length)
+                    const resolved = elements.map(styleKey);
+                    if (resolved.some((part) => !part))
                         return undefined;
-                    const access = IDENTIFIER.test(key) ? `.${key}` : `['${key}']`;
-                    return {
-                        className: `${moduleInfo.binding}${access}`,
-                        declarations: func.variables.map((variable, index) => {
-                            const argument = sourceCode.getText(value.arguments[index]);
-                            return `'${variable}': ${argument}`;
-                        }),
-                    };
+                    const module = resolved[0].module;
+                    if (resolved.some((part) => part.module !== module))
+                        return undefined;
+                    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' &&
@@ -387,7 +819,7 @@ exports.releaseStyles = {
                     return;
                 }
                 if (expression?.type === 'CallExpression' &&
-                    readsModule(expression.callee)) {
+                    moduleOf(expression.callee)) {
                     context.report({
                         node,
                         messageId: 'unsupportedFunctionStyle',
@@ -396,34 +828,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();
             },
         };
     },