@plumeria/compiler 18.5.0 → 18.5.2

package/dist/index.js

@@ -65,6 +65,56 @@ const componentFunctionOf = (node) => {
     }
     return undefined;
 };
+const unwrapPatternDefault = (pattern) => pattern?.type === 'AssignmentPattern' ? pattern.left : pattern;
+const resolveLocalStyleAlias = (aliases, expression) => {
+    let current = expression;
+    const seen = new Set();
+    while (utils_1.t.isIdentifier(current)) {
+        const name = current.value;
+        if (seen.has(name))
+            break;
+        seen.add(name);
+        const candidates = aliases[name];
+        if (!candidates || candidates.length === 0)
+            break;
+        const candidate = candidates.find((candidate) => candidate.context === current.ctxt);
+        if (!candidate)
+            break;
+        current = candidate.expression;
+    }
+    return current;
+};
+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 sourceOf = (node, sourceBuffer, baseByteOffset) => sourceBuffer
+    .subarray(node.span.start - baseByteOffset, node.span.end - baseByteOffset)
+    .toString('utf-8');
+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 propDefaultError = (source, fileName) => new Error(`[plumeria] A style prop default must be a defined style: "${source}". ` +
+    `Apply a conditional or dynamic style where the element is styled. (${fileName})`);
+const spreadStyleError = (source, fileName) => new Error(`[plumeria] Spread elements in a style array are not supported: "...${source}". ` +
+    `List each style explicitly. (${fileName})`);
 const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
     node.type === 'NumericLiteral' ||
     node.type === 'BooleanLiteral' ||
@@ -83,10 +133,9 @@ const dynamicTablesOf = (ctx) => ({
 });
 function extractStylesFromExpression(expression, ctx) {
     let expr = expression;
-    if (ctx.localStyleAliases &&
-        utils_1.t.isIdentifier(expr) &&
-        ctx.localStyleAliases[expr.value]) {
-        expr = ctx.localStyleAliases[expr.value];
+    expr = (0, utils_1.unwrapExpression)(expr);
+    if (ctx.localStyleAliases) {
+        expr = resolveLocalStyleAlias(ctx.localStyleAliases, expr);
     }
     const results = [];
     if (utils_1.t.isMemberExpression(expr)) {
@@ -155,6 +204,25 @@ function extractStylesFromExpression(expression, ctx) {
             }
         }
     }
+    else if (expr.type === 'ArrayExpression') {
+        const spreads = [];
+        const elementStyles = [];
+        for (const element of expr.elements ?? []) {
+            if (!element)
+                continue;
+            if (element.spread) {
+                spreads.push(element.expression);
+                continue;
+            }
+            elementStyles.push(...extractStylesFromExpression(element.expression, ctx));
+        }
+        for (const spread of spreads) {
+            if (elementStyles.length > 0 ||
+                extractStylesFromExpression(spread, ctx).length > 0)
+                throw spreadStyleError(sourceOf(spread, ctx.sourceBuffer, ctx.baseByteOffset), path.basename(ctx.resourcePath));
+        }
+        results.push(...elementStyles);
+    }
     else if (utils_1.t.isConditionalExpression(expr)) {
         const condExpr = expr;
         results.push(...extractStylesFromExpression(condExpr.consequent, ctx));
@@ -181,7 +249,7 @@ function compileCSS(options) {
         exclude: exclude,
         sort: true,
     });
-    const scannedTables = (0, utils_1.scanAll)();
+    const scannedTables = (0, utils_1.scanAll)(cwd);
     const processFile = (filePath) => {
         const resourcePath = path.resolve(cwd, filePath);
         const source = fs.readFileSync(resourcePath, 'utf-8');
@@ -354,6 +422,7 @@ function compileCSS(options) {
             mergedVariantsTable[key] = variantsImportMap[key];
         }
         const ctx = {
+            resourcePath,
             mergedStaticTable,
             mergedKeyframesTable,
             mergedViewTransitionTable,
@@ -370,15 +439,17 @@ function compileCSS(options) {
         };
         const componentParamNames = new Set();
         const addFirstParamName = (fn) => {
-            const p = fn.params[0];
+            const first = fn.params[0];
+            const p = unwrapPatternDefault(first?.pat ?? first);
             if (utils_1.t.isIdentifier(p)) {
                 componentParamNames.add(p.value);
             }
-            else if (typeof p === 'object' &&
-                p !== null &&
-                'pat' in p &&
-                utils_1.t.isIdentifier(p.pat)) {
-                componentParamNames.add(p.pat.value);
+            else if (p?.type === 'ObjectPattern') {
+                for (const item of p.properties ?? []) {
+                    if (item.type === 'RestElement' && utils_1.t.isIdentifier(item.argument)) {
+                        componentParamNames.add(item.argument.value);
+                    }
+                }
             }
         };
         for (const node of ast.body) {
@@ -402,18 +473,43 @@ function compileCSS(options) {
             }
         }
         const components = [];
+        const propAliases = new Map();
+        const propDefaults = new Map();
+        const declaredProps = new Map();
+        const addComponent = (name, fn) => {
+            components.push({ name, node: fn });
+            const first = fn.params[0];
+            const pattern = unwrapPatternDefault(first?.pat ?? first);
+            const defaults = new Map();
+            for (const item of pattern?.properties ?? []) {
+                if (item.type === 'AssignmentPatternProperty' && item.value)
+                    defaults.set(item.key.value, item.value);
+                if (item.type === 'KeyValuePatternProperty' &&
+                    item.value?.type === 'AssignmentPattern')
+                    defaults.set(item.key.value, item.value.right);
+            }
+            propDefaults.set(name, defaults);
+            const aliases = destructuredPropAliases(fn);
+            if (aliases.size > 0)
+                propAliases.set(name, aliases);
+            const declared = new Set();
+            for (const item of pattern?.properties ?? []) {
+                const key = item.key;
+                if (utils_1.t.isIdentifier(key) || utils_1.t.isStringLiteral(key))
+                    declared.add(String(key.value));
+            }
+            if (declared.size > 0)
+                declaredProps.set(name, declared);
+        };
         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) {
@@ -421,7 +517,7 @@ function compileCSS(options) {
                         continue;
                     const fn = componentFunctionOf(decl.init);
                     if (fn)
-                        components.push({ name: decl.id.value, node: fn });
+                        addComponent(decl.id.value, fn);
                 }
             }
         }
@@ -434,14 +530,26 @@ function compileCSS(options) {
         };
         const extractAndProcessConditionals = (args) => {
             args.forEach((arg) => {
-                if (utils_1.t.isIdentifier(arg.expression) &&
-                    localStyleAliases[arg.expression.value]) {
-                    arg.expression = localStyleAliases[arg.expression.value];
-                }
+                arg.expression = resolveLocalStyleAlias(localStyleAliases, arg.expression);
             });
             const conditionals = [];
             let baseStyle = {};
             const resolveStyleObject = (expr) => {
+                expr = resolveLocalStyleAlias(localStyleAliases, (0, utils_1.unwrapExpression)(expr));
+                if (expr.type === 'ArrayExpression') {
+                    let merged = {};
+                    for (const element of expr.elements ?? []) {
+                        if (!element)
+                            continue;
+                        if (element.spread)
+                            throw spreadStyleError(getSource(element.expression), path.basename(resourcePath));
+                        const style = resolveStyleObject(element.expression);
+                        if (!style)
+                            return null;
+                        merged = (0, utils_1.deepMerge)(merged, style);
+                    }
+                    return merged;
+                }
                 if (utils_1.t.isObjectExpression(expr)) {
                     return (0, utils_1.objectExpressionToObject)(expr, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
                 }
@@ -490,9 +598,7 @@ function compileCSS(options) {
                 }
                 return null;
             };
-            const getSource = (node) => ctx.sourceBuffer
-                .subarray(node.span.start - ctx.baseByteOffset, node.span.end - ctx.baseByteOffset)
-                .toString('utf-8');
+            const getSource = (node) => sourceOf(node, ctx.sourceBuffer, ctx.baseByteOffset);
             const assertResolvable = (node) => {
                 if (utils_1.t.isIdentifier(node) && node.value === 'undefined')
                     return;
@@ -555,7 +661,14 @@ function compileCSS(options) {
                 if (callArgs.some((a) => a.spread))
                     return null;
                 const tempStaticTable = { ...ctx.mergedStaticTable };
+                const providedParams = new Set();
                 const runtime = [];
+                const resolveObjectArg = (argExpr) => (0, utils_1.objectExpressionToObject)({
+                    ...argExpr,
+                    properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
+                        (prop.type === 'KeyValueProperty' &&
+                            isStaticArgValue(prop.value))),
+                }, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
                 if (func.named) {
                     const argExpr = callArgs[0]?.expression;
                     if (callArgs.length > 1 ||
@@ -572,9 +685,9 @@ function compileCSS(options) {
                             given.set(String(prop.key.value), prop.value);
                         }
                     });
-                    const argObj = !argExpr
-                        ? {}
-                        : ((0, utils_1.objectExpressionToObject)(argExpr, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable) ?? {});
+                    const argObj = argExpr
+                        ? (resolveObjectArg(argExpr) ?? {})
+                        : {};
                     func.named.forEach(({ key, local }) => {
                         const source = given.get(key);
                         if (!source) {
@@ -582,18 +695,22 @@ function compileCSS(options) {
                                 return;
                             throw new Error(`[plumeria] ${getSource(expr)} leaves "${key}" unset, and a dynamic style function has no value to fall back on.\n`);
                         }
-                        if (isStaticArgValue(source) && argObj[key] !== undefined)
+                        if (isStaticArgValue(source) && argObj[key] !== undefined) {
                             tempStaticTable[local] = argObj[key];
+                            providedParams.add(local);
+                        }
                         else
                             runtime.push(local);
                     });
                 }
                 else if (callArgs.length === 1 &&
                     callArgs[0].expression.type === 'ObjectExpression') {
-                    const argObj = (0, utils_1.objectExpressionToObject)(callArgs[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
+                    const argObj = resolveObjectArg(callArgs[0].expression) ?? {};
                     func.params.forEach((p) => {
-                        if (argObj[p] !== undefined)
+                        if (argObj[p] !== undefined) {
                             tempStaticTable[p] = argObj[p];
+                            providedParams.add(p);
+                        }
                     });
                 }
                 else {
@@ -604,13 +721,88 @@ function compileCSS(options) {
                         runtime.push(p);
                     });
                 }
-                const resolved = (0, utils_1.resolveDynamicStyle)(func, runtime, tempStaticTable, dynamicTablesOf(ctx));
+                const resolved = (0, utils_1.resolveDynamicStyle)(func, runtime, tempStaticTable, dynamicTablesOf(ctx), providedParams);
                 if (!resolved)
                     return null;
                 const { style } = resolved;
                 return style;
             };
+            const collectPropStyles = (expr) => {
+                const isParamMember = utils_1.t.isMemberExpression(expr) &&
+                    utils_1.t.isIdentifier(expr.object) &&
+                    componentParamNames.has(expr.object.value) &&
+                    utils_1.t.isIdentifier(expr.property);
+                if (!utils_1.t.isIdentifier(expr) && !isParamMember)
+                    return false;
+                const paramObject = isParamMember
+                    ? expr.object.value
+                    : undefined;
+                const isPropsMember = Boolean(paramObject &&
+                    ctx.localCreateStyles[paramObject] === undefined &&
+                    ctx.mergedCreateTable[paramObject] === undefined);
+                const varName = utils_1.t.isIdentifier(expr)
+                    ? expr.value
+                    : expr.property.value;
+                const owner = ownerComponentOf(expr);
+                const propName = (utils_1.t.isIdentifier(expr) && owner
+                    ? propAliases.get(owner)?.get(varName)
+                    : undefined) ?? varName;
+                const possibilities = [];
+                if (owner) {
+                    const entries = ctx.scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[propName];
+                    if (entries)
+                        possibilities.push(...entries);
+                }
+                if (possibilities.length === 0) {
+                    const filePrefix = `${resourcePath}-`;
+                    for (const key of Object.keys(ctx.scannedTables.componentPropsTable || {})) {
+                        if (!key.startsWith(filePrefix))
+                            continue;
+                        const entries = ctx.scannedTables.componentPropsTable?.[key]?.[propName];
+                        if (entries)
+                            possibilities.push(...entries);
+                    }
+                }
+                const fallback = owner && propDefaults.get(owner)?.get(propName);
+                if (fallback && !isNoOpStyle((0, utils_1.unwrapExpression)(fallback))) {
+                    const style = resolveStyleObject(fallback);
+                    if (!style)
+                        throw propDefaultError(getSource(fallback), path.basename(resourcePath));
+                    processStyle(style);
+                }
+                if (possibilities.length > 0) {
+                    const uniqueEntries = [];
+                    possibilities.forEach((entry) => {
+                        if (!uniqueEntries.some((x) => x.key === entry.key)) {
+                            uniqueEntries.push(entry);
+                        }
+                    });
+                    uniqueEntries.forEach((entry) => {
+                        if (entry.styleObj && Object.keys(entry.styleObj).length > 0) {
+                            processStyle(entry.styleObj);
+                        }
+                    });
+                    return true;
+                }
+                if (fallback)
+                    return true;
+                return Boolean(isPropsMember || (owner && declaredProps.get(owner)?.has(propName)));
+            };
             const collectConditions = (node, currentTestStrings = []) => {
+                node = resolveLocalStyleAlias(localStyleAliases, (0, utils_1.unwrapExpression)(node));
+                if (node.type === 'ArrayExpression') {
+                    let handled = true;
+                    for (const element of node.elements ?? []) {
+                        if (!element)
+                            continue;
+                        if (element.spread)
+                            throw spreadStyleError(getSource(element.expression), path.basename(resourcePath));
+                        handled =
+                            collectConditions(element.expression, currentTestStrings) &&
+                                handled;
+                    }
+                    return handled;
+                }
                 if (node.type === 'ConditionalExpression') {
                     const testSource = getSource(node.test);
                     if (currentTestStrings.length === 0) {
@@ -647,6 +839,8 @@ function compileCSS(options) {
                 else if (node.type === 'ParenthesisExpression') {
                     return collectConditions(node.expression, currentTestStrings);
                 }
+                if (collectPropStyles(node))
+                    return true;
                 const staticStyle = resolveStyleObject(node) ?? resolveDynamicCall(node);
                 if (staticStyle) {
                     if (currentTestStrings.length === 0) {
@@ -681,46 +875,8 @@ function compileCSS(options) {
             };
             for (const arg of args) {
                 const expr = arg.expression;
-                if (utils_1.t.isIdentifier(expr) ||
-                    (utils_1.t.isMemberExpression(expr) &&
-                        utils_1.t.isIdentifier(expr.object) &&
-                        componentParamNames.has(expr.object.value) &&
-                        utils_1.t.isIdentifier(expr.property))) {
-                    const varName = utils_1.t.isIdentifier(expr)
-                        ? expr.value
-                        : expr.property.value;
-                    const owner = ownerComponentOf(expr);
-                    const propPossibilities = [];
-                    if (owner) {
-                        const entries = ctx.scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[varName];
-                        if (entries)
-                            propPossibilities.push(...entries);
-                    }
-                    if (propPossibilities.length === 0) {
-                        const filePrefix = `${resourcePath}-`;
-                        for (const key of Object.keys(ctx.scannedTables.componentPropsTable || {})) {
-                            if (!key.startsWith(filePrefix))
-                                continue;
-                            const entries = ctx.scannedTables.componentPropsTable?.[key]?.[varName];
-                            if (entries)
-                                propPossibilities.push(...entries);
-                        }
-                    }
-                    if (propPossibilities.length > 0) {
-                        const uniqueEntries = [];
-                        propPossibilities.forEach((entry) => {
-                            if (!uniqueEntries.some((x) => x.key === entry.key)) {
-                                uniqueEntries.push(entry);
-                            }
-                        });
-                        uniqueEntries.forEach((entry) => {
-                            if (entry.styleObj && Object.keys(entry.styleObj).length > 0) {
-                                processStyle(entry.styleObj);
-                            }
-                        });
-                        continue;
-                    }
-                }
+                if (collectPropStyles(expr))
+                    continue;
                 const dynamicStyle = resolveDynamicCall(expr);
                 if (dynamicStyle) {
                     baseStyle = (0, utils_1.deepMerge)(baseStyle, dynamicStyle);
@@ -789,6 +945,10 @@ function compileCSS(options) {
                         throw new Error(`[plumeria] createTheme needs a selector it can read at build time. ` +
                             `Pass a string literal such as ".dark", or a name this file declares as one. (${path.basename(resourcePath)})`);
                     }
+                    if (selector.startsWith('@') && !(0, zss_engine_1.isAtRule)(selector)) {
+                        throw new Error(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports ` +
+                            `nesting at-rules such as @media, @container, @supports, @layer, and @scope. (${path.basename(resourcePath)})`);
+                    }
                     const obj = (0, utils_1.objectExpressionToObject)(args[1].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
                     const hash = (0, utils_1.themeHashOf)(selector, obj);
                     ctx.scannedTables.createThemeObjectTable[hash] = obj;
@@ -817,7 +977,7 @@ function compileCSS(options) {
         (0, utils_1.traverse)(ast, {
             VariableDeclarator({ node }) {
                 if (utils_1.t.isIdentifier(node.id) && node.init) {
-                    const init = node.init;
+                    const init = (0, utils_1.unwrapExpression)(node.init);
                     if (utils_1.t.isCallExpression(init)) {
                         const callee = init.callee;
                         let pName;
@@ -832,17 +992,18 @@ function compileCSS(options) {
                             pName = plumeriaAliases[callee.value];
                         }
                         const isTheme = pName === 'createTheme';
+                        const definitionArg = pName === 'createTheme'
+                            ? init.arguments[1]?.expression
+                            : init.arguments[0]?.expression;
+                        const unwrappedDefinitionArg = definitionArg
+                            ? (0, utils_1.unwrapExpression)(definitionArg)
+                            : undefined;
                         if (pName &&
-                            init.arguments.length > 0 &&
-                            ((!isTheme &&
-                                init.arguments.length === 1 &&
-                                utils_1.t.isObjectExpression(init.arguments[0].expression)) ||
-                                (isTheme &&
-                                    init.arguments.length >= 2 &&
-                                    utils_1.t.isObjectExpression(init.arguments[1].expression)))) {
-                            const arg = isTheme
-                                ? init.arguments[1].expression
-                                : init.arguments[0].expression;
+                            unwrappedDefinitionArg &&
+                            utils_1.t.isObjectExpression(unwrappedDefinitionArg) &&
+                            ((!isTheme && init.arguments.length === 1) ||
+                                (isTheme && init.arguments.length >= 2))) {
+                            const arg = unwrappedDefinitionArg;
                             const resolveVariable = (name) => ctx.localCreateStyles[name]?.obj ||
                                 (ctx.mergedCreateThemeHashTable[name]
                                     ? ctx.scannedTables.createAtomicMapTable[ctx.mergedCreateThemeHashTable[name]]
@@ -865,6 +1026,10 @@ function compileCSS(options) {
                                     throw new Error(`[plumeria] createTheme needs a selector it can read at build time. ` +
                                         `Pass a string literal such as ".dark", or a name this file declares as one. (${path.basename(resourcePath)})`);
                                 }
+                                if (selector.startsWith('@') && !(0, zss_engine_1.isAtRule)(selector)) {
+                                    throw new Error(`[plumeria] Unsupported at-rule: "${selector}". createTheme only supports ` +
+                                        `nesting at-rules such as @media, @container, @supports, @layer, and @scope. (${path.basename(resourcePath)})`);
+                                }
                                 const obj = (0, utils_1.objectExpressionToObject)(arg, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
                                 const hash = (0, utils_1.themeHashOf)(selector, obj);
                                 const uKey = `${resourcePath}-${node.id.value}`;
@@ -902,7 +1067,10 @@ function compileCSS(options) {
                         const objName = init.object.value;
                         if (ctx.localCreateStyles[objName] !== undefined ||
                             ctx.mergedCreateTable[objName] !== undefined) {
-                            localStyleAliases[node.id.value] = init;
+                            (localStyleAliases[node.id.value] ??= []).push({
+                                expression: init,
+                                context: node.id.ctxt,
+                            });
                         }
                     }
                 }
@@ -944,9 +1112,7 @@ function compileCSS(options) {
                     if (value.expression.type === 'JSXEmptyExpression')
                         return;
                     let expr = value.expression;
-                    if (utils_1.t.isIdentifier(expr) && localStyleAliases[expr.value]) {
-                        expr = localStyleAliases[expr.value];
-                    }
+                    expr = resolveLocalStyleAlias(localStyleAliases, expr);
                     extractStylesFromExpression(expr, ctx).forEach(processStyle);
                 });
             },
@@ -960,11 +1126,23 @@ function compileCSS(options) {
                 if (node.value.expression.type === 'JSXEmptyExpression')
                     return;
                 const expr = node.value.expression;
-                const args = expr.type === 'ArrayExpression'
-                    ? expr.elements
-                        .filter((el) => el !== undefined)
-                        .map((el) => ({ expression: el.expression }))
-                    : [{ expression: expr }];
+                const args = [];
+                const addArgs = (node) => {
+                    node = (0, utils_1.unwrapExpression)(node);
+                    if (node.type === 'ArrayExpression') {
+                        for (const element of node.elements ?? []) {
+                            if (!element)
+                                continue;
+                            if (element.spread)
+                                throw spreadStyleError(sourceOf(element.expression, sourceBuffer, baseByteOffset), path.basename(resourcePath));
+                            addArgs(element.expression);
+                        }
+                    }
+                    else {
+                        args.push({ expression: node });
+                    }
+                };
+                addArgs(expr);
                 extractAndProcessConditionals(args);
             },
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/compiler",
-  "version": "18.5.0",
+  "version": "18.5.2",
   "description": "Plumeria swc based compiler for statically extracting css",
   "author": "Refirst 11",
   "license": "MIT",
@@ -21,7 +21,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@plumeria/utils": "^18.5.0"
+    "@plumeria/utils": "^18.5.2"
   },
   "devDependencies": {
     "@rust-gear/glob": "1.1.1",