@plumeria/unplugin 18.4.1 → 18.5.0

package/dist/core.js

@@ -65,12 +65,37 @@ const componentFunctionOf = (node) => {
     }
     return undefined;
 };
+const unwrapPatternDefault = (pattern) => pattern?.type === 'AssignmentPattern' ? pattern.left : pattern;
+const destructuredPropAliases = (fn) => {
+    const aliases = new Map();
+    const first = fn.params[0];
+    const pattern = unwrapPatternDefault(first?.pat ?? first);
+    if (pattern?.type !== 'ObjectPattern')
+        return aliases;
+    for (const item of pattern.properties ?? []) {
+        if (item.type !== 'KeyValuePatternProperty')
+            continue;
+        const local = unwrapPatternDefault(item.value);
+        const key = item.key;
+        if (!utils_1.t.isIdentifier(local))
+            continue;
+        if (!utils_1.t.isIdentifier(key) && !utils_1.t.isStringLiteral(key))
+            continue;
+        const name = String(key.value);
+        if (name !== local.value)
+            aliases.set(local.value, name);
+    }
+    return aliases;
+};
 const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
     node.type === 'NumericLiteral' ||
     node.type === 'BooleanLiteral' ||
     (node.type === 'TemplateLiteral' && node.expressions.length === 0) ||
     utils_1.t.isIdentifier(node) ||
     utils_1.t.isMemberExpression(node);
+const isNoOpStyle = (node) => utils_1.t.isNullLiteral(node) ||
+    (utils_1.t.isBooleanLiteral(node) && node.value === false) ||
+    (utils_1.t.isIdentifier(node) && node.value === 'undefined');
 const foldDynamicVars = (vars) => {
     const grouped = new Map();
     [...vars]
@@ -247,18 +272,22 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 }
             }
             const components = [];
+            const propAliases = new Map();
+            const addComponent = (name, fn) => {
+                components.push({ name, node: fn });
+                const aliases = destructuredPropAliases(fn);
+                if (aliases.size > 0)
+                    propAliases.set(name, aliases);
+            };
             for (const node of ast.body) {
                 const statement = unwrapExport(node);
                 if (isFunctionNode(statement)) {
-                    components.push({
-                        name: statement.identifier?.value ?? 'default',
-                        node: statement,
-                    });
+                    addComponent(statement.identifier?.value ?? 'default', statement);
                 }
                 else if (statement?.type === 'CallExpression') {
                     const fn = componentFunctionOf(statement);
                     if (fn)
-                        components.push({ name: 'default', node: fn });
+                        addComponent('default', fn);
                 }
                 else if (utils_1.t.isVariableDeclaration(statement)) {
                     for (const decl of statement.declarations) {
@@ -266,7 +295,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                             continue;
                         const fn = componentFunctionOf(decl.init);
                         if (fn)
-                            components.push({ name: decl.id.value, node: fn });
+                            addComponent(decl.id.value, fn);
                     }
                 }
             }
@@ -496,9 +525,43 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
             const idSpans = new Set();
             const excludedSpans = new Set();
             const referenceIdents = (0, utils_1.collectReferenceIdentifiers)(ast);
+            const topLevelDeclarators = new Set();
+            for (const statement of ast.body) {
+                const declaration = unwrapExport(statement);
+                if (utils_1.t.isVariableDeclaration(declaration)) {
+                    declaration.declarations.forEach((decl) => topLevelDeclarators.add(decl));
+                }
+            }
+            const unwrapStyleExpression = (node) => {
+                while (node &&
+                    [
+                        'ParenthesisExpression',
+                        'TsAsExpression',
+                        'TsSatisfiesExpression',
+                        'TsNonNullExpression',
+                        'TsConstAssertion',
+                        'TsTypeAssertion',
+                    ].includes(node.type))
+                    node = node.expression;
+                return node;
+            };
+            const literalObjectArgument = (node, seen = new Set()) => {
+                node = unwrapStyleExpression(node);
+                if (utils_1.t.isObjectExpression(node))
+                    return node;
+                if (!utils_1.t.isIdentifier(node) || seen.has(node.value))
+                    return null;
+                seen.add(node.value);
+                const declaration = [...topLevelDeclarators].find((decl) => utils_1.t.isIdentifier(decl.id) &&
+                    decl.id.value === node.value);
+                return declaration?.init
+                    ? literalObjectArgument(declaration.init, seen)
+                    : null;
+            };
+            const registeredStyleCalls = new Set();
             const registerStyle = (node, declSpan, isExported) => {
                 let propName;
-                const init = node.init;
+                const init = unwrapStyleExpression(node.init);
                 if (utils_1.t.isIdentifier(node.id) &&
                     init &&
                     utils_1.t.isCallExpression(init) &&
@@ -523,6 +586,19 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     }
                 }
                 if (propName && init && utils_1.t.isCallExpression(init)) {
+                    if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+                        !topLevelDeclarators.has(node)) {
+                        throwCompilationError(`Plumeria: css.${propName} must be assigned to a top-level variable so its styles can be resolved across files. Move this declaration outside the function or block.`, node);
+                    }
+                    if (['create', 'createTheme', 'createStatic'].includes(propName)) {
+                        const argumentIndex = propName === 'createTheme' ? 1 : 0;
+                        const argument = init.arguments[argumentIndex];
+                        const object = argument && literalObjectArgument(argument.expression);
+                        if (!object)
+                            throwCompilationError(`Plumeria: css.${propName} needs a style object it can read at build time. Pass an object literal or a top-level constant containing one.`, init);
+                        argument.expression = object;
+                        registeredStyleCalls.add(init.span.start);
+                    }
                     if (propName === 'create' &&
                         utils_1.t.isObjectExpression(init.arguments[0].expression)) {
                         const obj = (0, utils_1.objectExpressionToObject)(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
@@ -720,6 +796,10 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                         }
                     }
                     if (propName) {
+                        if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+                            !registeredStyleCalls.has(node.span.start)) {
+                            throwCompilationError(`Plumeria: css.${propName} must be assigned to a named top-level variable. Destructuring, assignment statements, and default-exported calls cannot be compiled.`, node);
+                        }
                         const args = node.arguments;
                         if (propName === 'keyframes' && args.length > 0) {
                             const expr = args[0].expression;
@@ -827,6 +907,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 return sourceBuffer.subarray(start, end).toString('utf-8');
             };
             const resolveStyleObject = (expr) => {
+                expr = (0, utils_1.unwrapExpression)(expr);
                 if (utils_1.t.isObjectExpression(expr)) {
                     return (0, utils_1.objectExpressionToObject)(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                 }
@@ -902,7 +983,12 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     return null;
                 const tempStaticTable = { ...mergedStaticTable };
                 const runtime = [];
-                const resolveObjectArg = (argExpr) => (0, utils_1.objectExpressionToObject)(argExpr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                const resolveObjectArg = (argExpr) => (0, utils_1.objectExpressionToObject)({
+                    ...argExpr,
+                    properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
+                        (prop.type === 'KeyValueProperty' &&
+                            isStaticArgValue(prop.value))),
+                }, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                 if (func.named) {
                     const argExpr = callArgs[0]?.expression;
                     if (callArgs.length > 1 ||
@@ -1121,6 +1207,9 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     return buildDecision(node, prefix, off, { n: 0 }, scoped);
                 };
                 const collectConditions = (node, currentTestStrings = [], argOrder) => {
+                    node = (0, utils_1.unwrapExpression)(node);
+                    if (isNoOpStyle(node))
+                        return true;
                     let branchStyle = resolveStyleObject(node);
                     if (!branchStyle) {
                         const dynamic = resolveDynamicCall(node);
@@ -1201,17 +1290,20 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                         ? expr.value
                         : expr.property.value;
                     const source = utils_1.t.isIdentifier(expr) ? varName : getSource(expr);
-                    markStylePropApplied(varName, expr);
                     const owner = ownerComponentOf(expr);
+                    const propName = (utils_1.t.isIdentifier(expr) && owner
+                        ? propAliases.get(owner)?.get(varName)
+                        : undefined) ?? varName;
+                    markStylePropApplied(propName, expr);
                     let possibilities = owner
-                        ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[varName]
+                        ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[propName]
                         : undefined;
                     if (!possibilities) {
                         const candidates = [];
                         for (const key of Object.keys(scannedTables.componentPropsTable || {})) {
                             if (!key.startsWith(`${resourcePath}-`))
                                 continue;
-                            const entries = scannedTables.componentPropsTable?.[key]?.[varName];
+                            const entries = scannedTables.componentPropsTable?.[key]?.[propName];
                             if (entries)
                                 candidates.push(...entries);
                         }
@@ -1266,6 +1358,8 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 };
                 for (const arg of args) {
                     const expr = arg.expression;
+                    if (isNoOpStyle(expr))
+                        continue;
                     if (pushPropPossibilities(expr, []))
                         continue;
                     if (utils_1.t.isCallExpression(expr) && utils_1.t.isIdentifier(expr.callee)) {
@@ -1938,45 +2032,54 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                 node.value &&
                                 node.value.type === 'JSXExpressionContainer') {
                                 const expr = node.value.expression;
-                                const carrierFor = (subNode) => {
+                                const carrierFor = (subNode, calls) => {
                                     const vars = [];
                                     let unresolved = false;
-                                    (0, utils_1.traverse)(subNode, {
-                                        CallExpression({ node: call }) {
-                                            if (!isStyleFunctionCall(call))
-                                                return;
-                                            const resolved = resolveDynamicCall(call, true);
-                                            if (!resolved) {
-                                                unresolved = true;
-                                                return;
-                                            }
-                                            vars.push(...resolved.vars);
-                                        },
-                                    });
+                                    for (const expression of calls ?? [subNode])
+                                        (0, utils_1.traverse)(expression, {
+                                            CallExpression({ node: call }) {
+                                                if (!isStyleFunctionCall(call))
+                                                    return;
+                                                const resolved = resolveDynamicCall(call, true);
+                                                if (!resolved) {
+                                                    unresolved = true;
+                                                    return;
+                                                }
+                                                vars.push(...resolved.vars);
+                                            },
+                                        });
                                     if (unresolved)
                                         return null;
                                     return `{ ${foldDynamicVars(vars).join(', ')} }`;
                                 };
                                 const replaceWithKey = (subNode) => {
-                                    const entry = list.find((x) => x.spanStart === subNode.span.start &&
-                                        x.filePath === resourcePath);
-                                    if (entry) {
-                                        let content = JSON.stringify(entry.key);
+                                    const entries = list.filter((entry) => entry.spanStart === subNode.span.start &&
+                                        entry.filePath === resourcePath);
+                                    if (!entries.length)
+                                        return false;
+                                    let content = '""';
+                                    for (const entry of [...entries].reverse()) {
+                                        let value = JSON.stringify(entry.key);
                                         if (entry.hasVars) {
-                                            const carrier = carrierFor(subNode);
+                                            const carrier = carrierFor(subNode, entry.dynamicCalls);
                                             if (!carrier)
                                                 return false;
-                                            content = `{ key: ${content}, vars: ${carrier} }`;
+                                            value = `{ key: ${value}, vars: ${carrier} }`;
                                         }
-                                        replacements.push({
-                                            start: subNode.span.start - baseByteOffset,
-                                            end: subNode.span.end - baseByteOffset,
-                                            content,
-                                        });
+                                        const condition = entry.conditions
+                                            ?.map(({ test, truthy }) => `${truthy ? '' : '!'}(${getSource(test)})`)
+                                            .join(' && ');
+                                        content = condition
+                                            ? `((${condition}) ? ${value} : ${content})`
+                                            : value;
                                         processStyleRecords(entry.styleObj);
-                                        return true;
                                     }
-                                    return false;
+                                    replacements.push({
+                                        start: subNode.span.start - baseByteOffset,
+                                        end: subNode.span.end - baseByteOffset,
+                                        content,
+                                    });
+                                    return true;
                                 };
                                 (0, utils_1.traverse)(expr, {
                                     MemberExpression({ node: subNode }) {
@@ -2090,10 +2193,13 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                         });
                     }
                     else {
+                        const keptClass = existingClassExpr
+                            ? `className={${existingClassExpr}}`
+                            : '';
                         replacements.push({
                             start: node.span.start - baseByteOffset,
                             end: node.span.end - baseByteOffset,
-                            content: styleAttr || '',
+                            content: `${keptClass}${styleAttr}`,
                         });
                     }
                 },

package/dist/core.mjs

@@ -2,7 +2,7 @@ import { createFilter } from '@rollup/pluginutils';
 import { parseSync } from '@swc/core';
 import * as path from 'path';
 import { applyCssValue, genBase36Hash, camelToKebabCase, isAtRule, } from 'zss-engine';
-import { traverse, resolvePropertyPolicy, assertPropertyPolicy, collectReferenceIdentifiers, getStyleRecords, getStateWeights, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveFileError, resolveImportPath, getLeadingCommentLength, optimizer, styleFunctionsOf, isUnitlessProp, resolveDynamicStyle, themeHashOf, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
+import { traverse, resolvePropertyPolicy, assertPropertyPolicy, collectReferenceIdentifiers, getStyleRecords, getStateWeights, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, unwrapExpression, extractOndemandStyles, deepMerge, scanAll, resolveFileError, resolveImportPath, getLeadingCommentLength, optimizer, styleFunctionsOf, isUnitlessProp, resolveDynamicStyle, themeHashOf, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
 export const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
 export const EXTENSION_PATTERN = /\.(ts|tsx|js|jsx)$/;
 const unwrapExport = (node) => {
@@ -29,12 +29,37 @@ const componentFunctionOf = (node) => {
     }
     return undefined;
 };
+const unwrapPatternDefault = (pattern) => pattern?.type === 'AssignmentPattern' ? pattern.left : pattern;
+const destructuredPropAliases = (fn) => {
+    const aliases = new Map();
+    const first = fn.params[0];
+    const pattern = unwrapPatternDefault(first?.pat ?? first);
+    if (pattern?.type !== 'ObjectPattern')
+        return aliases;
+    for (const item of pattern.properties ?? []) {
+        if (item.type !== 'KeyValuePatternProperty')
+            continue;
+        const local = unwrapPatternDefault(item.value);
+        const key = item.key;
+        if (!t.isIdentifier(local))
+            continue;
+        if (!t.isIdentifier(key) && !t.isStringLiteral(key))
+            continue;
+        const name = String(key.value);
+        if (name !== local.value)
+            aliases.set(local.value, name);
+    }
+    return aliases;
+};
 const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
     node.type === 'NumericLiteral' ||
     node.type === 'BooleanLiteral' ||
     (node.type === 'TemplateLiteral' && node.expressions.length === 0) ||
     t.isIdentifier(node) ||
     t.isMemberExpression(node);
+const isNoOpStyle = (node) => t.isNullLiteral(node) ||
+    (t.isBooleanLiteral(node) && node.value === false) ||
+    (t.isIdentifier(node) && node.value === 'undefined');
 const foldDynamicVars = (vars) => {
     const grouped = new Map();
     [...vars]
@@ -211,18 +236,22 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 }
             }
             const components = [];
+            const propAliases = new Map();
+            const addComponent = (name, fn) => {
+                components.push({ name, node: fn });
+                const aliases = destructuredPropAliases(fn);
+                if (aliases.size > 0)
+                    propAliases.set(name, aliases);
+            };
             for (const node of ast.body) {
                 const statement = unwrapExport(node);
                 if (isFunctionNode(statement)) {
-                    components.push({
-                        name: statement.identifier?.value ?? 'default',
-                        node: statement,
-                    });
+                    addComponent(statement.identifier?.value ?? 'default', statement);
                 }
                 else if (statement?.type === 'CallExpression') {
                     const fn = componentFunctionOf(statement);
                     if (fn)
-                        components.push({ name: 'default', node: fn });
+                        addComponent('default', fn);
                 }
                 else if (t.isVariableDeclaration(statement)) {
                     for (const decl of statement.declarations) {
@@ -230,7 +259,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                             continue;
                         const fn = componentFunctionOf(decl.init);
                         if (fn)
-                            components.push({ name: decl.id.value, node: fn });
+                            addComponent(decl.id.value, fn);
                     }
                 }
             }
@@ -460,9 +489,43 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
             const idSpans = new Set();
             const excludedSpans = new Set();
             const referenceIdents = collectReferenceIdentifiers(ast);
+            const topLevelDeclarators = new Set();
+            for (const statement of ast.body) {
+                const declaration = unwrapExport(statement);
+                if (t.isVariableDeclaration(declaration)) {
+                    declaration.declarations.forEach((decl) => topLevelDeclarators.add(decl));
+                }
+            }
+            const unwrapStyleExpression = (node) => {
+                while (node &&
+                    [
+                        'ParenthesisExpression',
+                        'TsAsExpression',
+                        'TsSatisfiesExpression',
+                        'TsNonNullExpression',
+                        'TsConstAssertion',
+                        'TsTypeAssertion',
+                    ].includes(node.type))
+                    node = node.expression;
+                return node;
+            };
+            const literalObjectArgument = (node, seen = new Set()) => {
+                node = unwrapStyleExpression(node);
+                if (t.isObjectExpression(node))
+                    return node;
+                if (!t.isIdentifier(node) || seen.has(node.value))
+                    return null;
+                seen.add(node.value);
+                const declaration = [...topLevelDeclarators].find((decl) => t.isIdentifier(decl.id) &&
+                    decl.id.value === node.value);
+                return declaration?.init
+                    ? literalObjectArgument(declaration.init, seen)
+                    : null;
+            };
+            const registeredStyleCalls = new Set();
             const registerStyle = (node, declSpan, isExported) => {
                 let propName;
-                const init = node.init;
+                const init = unwrapStyleExpression(node.init);
                 if (t.isIdentifier(node.id) &&
                     init &&
                     t.isCallExpression(init) &&
@@ -487,6 +550,19 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     }
                 }
                 if (propName && init && t.isCallExpression(init)) {
+                    if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+                        !topLevelDeclarators.has(node)) {
+                        throwCompilationError(`Plumeria: css.${propName} must be assigned to a top-level variable so its styles can be resolved across files. Move this declaration outside the function or block.`, node);
+                    }
+                    if (['create', 'createTheme', 'createStatic'].includes(propName)) {
+                        const argumentIndex = propName === 'createTheme' ? 1 : 0;
+                        const argument = init.arguments[argumentIndex];
+                        const object = argument && literalObjectArgument(argument.expression);
+                        if (!object)
+                            throwCompilationError(`Plumeria: css.${propName} needs a style object it can read at build time. Pass an object literal or a top-level constant containing one.`, init);
+                        argument.expression = object;
+                        registeredStyleCalls.add(init.span.start);
+                    }
                     if (propName === 'create' &&
                         t.isObjectExpression(init.arguments[0].expression)) {
                         const obj = objectExpressionToObject(init.arguments[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
@@ -684,6 +760,10 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                         }
                     }
                     if (propName) {
+                        if (['create', 'createTheme', 'createStatic'].includes(propName) &&
+                            !registeredStyleCalls.has(node.span.start)) {
+                            throwCompilationError(`Plumeria: css.${propName} must be assigned to a named top-level variable. Destructuring, assignment statements, and default-exported calls cannot be compiled.`, node);
+                        }
                         const args = node.arguments;
                         if (propName === 'keyframes' && args.length > 0) {
                             const expr = args[0].expression;
@@ -791,6 +871,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 return sourceBuffer.subarray(start, end).toString('utf-8');
             };
             const resolveStyleObject = (expr) => {
+                expr = unwrapExpression(expr);
                 if (t.isObjectExpression(expr)) {
                     return objectExpressionToObject(expr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                 }
@@ -866,7 +947,12 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     return null;
                 const tempStaticTable = { ...mergedStaticTable };
                 const runtime = [];
-                const resolveObjectArg = (argExpr) => objectExpressionToObject(argExpr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+                const resolveObjectArg = (argExpr) => objectExpressionToObject({
+                    ...argExpr,
+                    properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
+                        (prop.type === 'KeyValueProperty' &&
+                            isStaticArgValue(prop.value))),
+                }, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
                 if (func.named) {
                     const argExpr = callArgs[0]?.expression;
                     if (callArgs.length > 1 ||
@@ -1085,6 +1171,9 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     return buildDecision(node, prefix, off, { n: 0 }, scoped);
                 };
                 const collectConditions = (node, currentTestStrings = [], argOrder) => {
+                    node = unwrapExpression(node);
+                    if (isNoOpStyle(node))
+                        return true;
                     let branchStyle = resolveStyleObject(node);
                     if (!branchStyle) {
                         const dynamic = resolveDynamicCall(node);
@@ -1165,17 +1254,20 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                         ? expr.value
                         : expr.property.value;
                     const source = t.isIdentifier(expr) ? varName : getSource(expr);
-                    markStylePropApplied(varName, expr);
                     const owner = ownerComponentOf(expr);
+                    const propName = (t.isIdentifier(expr) && owner
+                        ? propAliases.get(owner)?.get(varName)
+                        : undefined) ?? varName;
+                    markStylePropApplied(propName, expr);
                     let possibilities = owner
-                        ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[varName]
+                        ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[propName]
                         : undefined;
                     if (!possibilities) {
                         const candidates = [];
                         for (const key of Object.keys(scannedTables.componentPropsTable || {})) {
                             if (!key.startsWith(`${resourcePath}-`))
                                 continue;
-                            const entries = scannedTables.componentPropsTable?.[key]?.[varName];
+                            const entries = scannedTables.componentPropsTable?.[key]?.[propName];
                             if (entries)
                                 candidates.push(...entries);
                         }
@@ -1230,6 +1322,8 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 };
                 for (const arg of args) {
                     const expr = arg.expression;
+                    if (isNoOpStyle(expr))
+                        continue;
                     if (pushPropPossibilities(expr, []))
                         continue;
                     if (t.isCallExpression(expr) && t.isIdentifier(expr.callee)) {
@@ -1902,45 +1996,54 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                                 node.value &&
                                 node.value.type === 'JSXExpressionContainer') {
                                 const expr = node.value.expression;
-                                const carrierFor = (subNode) => {
+                                const carrierFor = (subNode, calls) => {
                                     const vars = [];
                                     let unresolved = false;
-                                    traverse(subNode, {
-                                        CallExpression({ node: call }) {
-                                            if (!isStyleFunctionCall(call))
-                                                return;
-                                            const resolved = resolveDynamicCall(call, true);
-                                            if (!resolved) {
-                                                unresolved = true;
-                                                return;
-                                            }
-                                            vars.push(...resolved.vars);
-                                        },
-                                    });
+                                    for (const expression of calls ?? [subNode])
+                                        traverse(expression, {
+                                            CallExpression({ node: call }) {
+                                                if (!isStyleFunctionCall(call))
+                                                    return;
+                                                const resolved = resolveDynamicCall(call, true);
+                                                if (!resolved) {
+                                                    unresolved = true;
+                                                    return;
+                                                }
+                                                vars.push(...resolved.vars);
+                                            },
+                                        });
                                     if (unresolved)
                                         return null;
                                     return `{ ${foldDynamicVars(vars).join(', ')} }`;
                                 };
                                 const replaceWithKey = (subNode) => {
-                                    const entry = list.find((x) => x.spanStart === subNode.span.start &&
-                                        x.filePath === resourcePath);
-                                    if (entry) {
-                                        let content = JSON.stringify(entry.key);
+                                    const entries = list.filter((entry) => entry.spanStart === subNode.span.start &&
+                                        entry.filePath === resourcePath);
+                                    if (!entries.length)
+                                        return false;
+                                    let content = '""';
+                                    for (const entry of [...entries].reverse()) {
+                                        let value = JSON.stringify(entry.key);
                                         if (entry.hasVars) {
-                                            const carrier = carrierFor(subNode);
+                                            const carrier = carrierFor(subNode, entry.dynamicCalls);
                                             if (!carrier)
                                                 return false;
-                                            content = `{ key: ${content}, vars: ${carrier} }`;
+                                            value = `{ key: ${value}, vars: ${carrier} }`;
                                         }
-                                        replacements.push({
-                                            start: subNode.span.start - baseByteOffset,
-                                            end: subNode.span.end - baseByteOffset,
-                                            content,
-                                        });
+                                        const condition = entry.conditions
+                                            ?.map(({ test, truthy }) => `${truthy ? '' : '!'}(${getSource(test)})`)
+                                            .join(' && ');
+                                        content = condition
+                                            ? `((${condition}) ? ${value} : ${content})`
+                                            : value;
                                         processStyleRecords(entry.styleObj);
-                                        return true;
                                     }
-                                    return false;
+                                    replacements.push({
+                                        start: subNode.span.start - baseByteOffset,
+                                        end: subNode.span.end - baseByteOffset,
+                                        content,
+                                    });
+                                    return true;
                                 };
                                 traverse(expr, {
                                     MemberExpression({ node: subNode }) {
@@ -2054,10 +2157,13 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                         });
                     }
                     else {
+                        const keptClass = existingClassExpr
+                            ? `className={${existingClassExpr}}`
+                            : '';
                         replacements.push({
                             start: node.span.start - baseByteOffset,
                             end: node.span.end - baseByteOffset,
-                            content: styleAttr || '',
+                            content: `${keptClass}${styleAttr}`,
                         });
                     }
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/unplugin",
-  "version": "18.4.1",
+  "version": "18.5.0",
   "description": "Universal Plumeria plugin for various build tools",
   "author": "Refirst 11",
   "license": "MIT",
@@ -94,7 +94,7 @@
   "dependencies": {
     "@rollup/pluginutils": "^5.4.0",
     "unplugin": "^3.0.0",
-    "@plumeria/utils": "^18.4.1"
+    "@plumeria/utils": "^18.5.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.47",