@plumeria/compiler 10.0.6 → 10.0.8

package/dist/index.js

@@ -190,7 +190,10 @@ function compileCSS(options) {
             mergedKeyframesTable[key] = scannedTables.keyframesHashTable[key];
         }
         for (const key of Object.keys(importMap)) {
-            mergedKeyframesTable[key] = importMap[key];
+            const val = importMap[key];
+            if (typeof val === 'string') {
+                mergedKeyframesTable[key] = val;
+            }
         }
         const mergedViewTransitionTable = {};
         for (const key of Object.keys(scannedTables.viewTransitionHashTable)) {
@@ -198,14 +201,20 @@ function compileCSS(options) {
                 scannedTables.viewTransitionHashTable[key];
         }
         for (const key of Object.keys(importMap)) {
-            mergedViewTransitionTable[key] = importMap[key];
+            const val = importMap[key];
+            if (typeof val === 'string') {
+                mergedViewTransitionTable[key] = val;
+            }
         }
         const mergedCreateThemeHashTable = {};
         for (const key of Object.keys(scannedTables.createThemeHashTable)) {
             mergedCreateThemeHashTable[key] = scannedTables.createThemeHashTable[key];
         }
         for (const key of Object.keys(importMap)) {
-            mergedCreateThemeHashTable[key] = importMap[key];
+            const val = importMap[key];
+            if (typeof val === 'string') {
+                mergedCreateThemeHashTable[key] = val;
+            }
         }
         const mergedCreateStaticHashTable = {};
         for (const key of Object.keys(scannedTables.createStaticHashTable)) {
@@ -213,21 +222,30 @@ function compileCSS(options) {
                 scannedTables.createStaticHashTable[key];
         }
         for (const key of Object.keys(importMap)) {
-            mergedCreateStaticHashTable[key] = importMap[key];
+            const val = importMap[key];
+            if (typeof val === 'string') {
+                mergedCreateStaticHashTable[key] = val;
+            }
         }
         const mergedCreateTable = {};
         for (const key of Object.keys(scannedTables.createHashTable)) {
             mergedCreateTable[key] = scannedTables.createHashTable[key];
         }
         for (const key of Object.keys(importMap)) {
-            mergedCreateTable[key] = importMap[key];
+            const val = importMap[key];
+            if (typeof val === 'string') {
+                mergedCreateTable[key] = val;
+            }
         }
         const mergedVariantsTable = {};
         for (const key of Object.keys(scannedTables.variantsHashTable)) {
             mergedVariantsTable[key] = scannedTables.variantsHashTable[key];
         }
         for (const key of Object.keys(importMap)) {
-            mergedVariantsTable[key] = importMap[key];
+            const val = importMap[key];
+            if (typeof val === 'string') {
+                mergedVariantsTable[key] = val;
+            }
         }
         const ctx = {
             mergedStaticTable,
@@ -249,52 +267,103 @@ function compileCSS(options) {
         };
         const extractAndProcessConditionals = (args, isStyleName = false) => {
             const conditionals = [];
+            let groupIdCounter = 0;
             let baseStyle = {};
-            const resolveStyleObject = (expression) => {
-                const styles = extractStylesFromExpression(expression, ctx);
-                return styles.length === 1 ? styles[0] : null;
+            const resolveStyleObject = (expr) => {
+                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);
+                }
+                else if (utils_1.t.isMemberExpression(expr) &&
+                    utils_1.t.isIdentifier(expr.object) &&
+                    utils_1.t.isIdentifier(expr.property)) {
+                    const varName = expr.object.value;
+                    const propName = expr.property.value;
+                    const styleInfo = ctx.localCreateStyles[varName];
+                    if (styleInfo && styleInfo.type === 'create') {
+                        const style = styleInfo.obj[propName];
+                        if (typeof style === 'object' && style !== null) {
+                            return style;
+                        }
+                    }
+                    const hash = ctx.mergedCreateTable[varName];
+                    if (hash) {
+                        const obj = ctx.scannedTables.createObjectTable[hash];
+                        if (obj && obj[propName] && typeof obj[propName] === 'object') {
+                            return obj[propName];
+                        }
+                    }
+                }
+                else if (utils_1.t.isIdentifier(expr)) {
+                    const varName = expr.value;
+                    const styleInfo = ctx.localCreateStyles[varName];
+                    if (styleInfo && styleInfo.type === 'create') {
+                        return styleInfo.obj;
+                    }
+                    const hash = ctx.mergedCreateTable[varName];
+                    if (hash) {
+                        const obj = ctx.scannedTables.createObjectTable[hash];
+                        if (obj && typeof obj === 'object') {
+                            return obj;
+                        }
+                    }
+                }
+                return null;
             };
             const getSource = (node) => ctx.sourceBuffer
                 .subarray(node.span.start - ctx.baseByteOffset, node.span.end - ctx.baseByteOffset)
                 .toString('utf-8');
-            const collectConditions = (node, testStrings = []) => {
-                const staticStyle = resolveStyleObject(node);
-                if (staticStyle) {
-                    if (testStrings.length === 0) {
-                        baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
-                    }
-                    else {
-                        conditionals.push({
-                            test: node,
-                            testString: testStrings.join(' && '),
-                            truthy: staticStyle,
-                            falsy: {},
-                        });
-                    }
-                    return true;
-                }
+            const collectConditions = (node, currentTestStrings = []) => {
                 if (node.type === 'ConditionalExpression') {
                     const testSource = getSource(node.test);
+                    if (currentTestStrings.length === 0) {
+                        const trueStyle = resolveStyleObject(node.consequent);
+                        const falseStyle = resolveStyleObject(node.alternate);
+                        if (trueStyle && falseStyle) {
+                            conditionals.push({
+                                test: node,
+                                testString: testSource,
+                                truthy: trueStyle,
+                                falsy: falseStyle,
+                                varName: undefined,
+                            });
+                            return true;
+                        }
+                    }
                     collectConditions(node.consequent, [
-                        ...testStrings,
+                        ...currentTestStrings,
                         `(${testSource})`,
                     ]);
                     collectConditions(node.alternate, [
-                        ...testStrings,
+                        ...currentTestStrings,
                         `!(${testSource})`,
                     ]);
                     return true;
                 }
-                else if (node.type === 'BinaryExpression' &&
-                    node.operator === '&&') {
+                else if (node.type === 'BinaryExpression' && node.operator === '&&') {
                     collectConditions(node.right, [
-                        ...testStrings,
+                        ...currentTestStrings,
                         `(${getSource(node.left)})`,
                     ]);
                     return true;
                 }
                 else if (node.type === 'ParenthesisExpression') {
-                    return collectConditions(node.expression, testStrings);
+                    return collectConditions(node.expression, currentTestStrings);
+                }
+                const staticStyle = resolveStyleObject(node);
+                if (staticStyle) {
+                    if (currentTestStrings.length === 0) {
+                        baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
+                    }
+                    else {
+                        conditionals.push({
+                            test: node,
+                            testString: currentTestStrings.join(' && '),
+                            truthy: staticStyle,
+                            falsy: {},
+                            varName: undefined,
+                        });
+                    }
+                    return true;
                 }
                 return false;
             };
@@ -308,8 +377,10 @@ function compileCSS(options) {
                     const varName = node.callee.object.value;
                     const propKey = node.callee.property.value;
                     const styleInfo = ctx.localCreateStyles[varName];
-                    const atomMap = styleInfo?.obj?.[propKey];
-                    if (atomMap?.['__cssVars__']) {
+                    const atomMap = styleInfo?.obj[propKey];
+                    if (typeof atomMap === 'object' &&
+                        atomMap !== null &&
+                        '__cssVars__' in atomMap) {
                         throw new Error(`[plumeria] css.use(${getSource(node)}) cannot handle dynamic style functions. Use styleName instead.\n`);
                     }
                 }
@@ -334,6 +405,116 @@ function compileCSS(options) {
             };
             for (const arg of args) {
                 checkFunctionKey(arg.expression);
+                const expr = arg.expression;
+                if (utils_1.t.isCallExpression(expr)) {
+                    if (utils_1.t.isIdentifier(expr.callee)) {
+                        const varName = expr.callee.value;
+                        const styleInfo = ctx.localCreateStyles[varName];
+                        if (styleInfo && styleInfo.type === 'variant') {
+                            const variantObj = styleInfo.obj;
+                            const callArgs = expr.arguments;
+                            if (callArgs.length === 1 && !callArgs[0].spread) {
+                                const argExpr = callArgs[0].expression;
+                                if (argExpr.type === 'ObjectExpression') {
+                                    for (const prop of argExpr.properties) {
+                                        let groupName;
+                                        let valExpr;
+                                        if (prop.type === 'KeyValueProperty' &&
+                                            prop.key.type === 'Identifier') {
+                                            groupName = prop.key.value;
+                                            valExpr = prop.value;
+                                        }
+                                        else if (prop.type === 'Identifier') {
+                                            groupName = prop.value;
+                                            valExpr = prop;
+                                        }
+                                        if (groupName && valExpr) {
+                                            const groupVariants = variantObj[groupName];
+                                            if (!groupVariants)
+                                                continue;
+                                            const currentGroupId = ++groupIdCounter;
+                                            const valSource = getSource(valExpr);
+                                            if (valExpr.type === 'StringLiteral') {
+                                                const groupVariantsAsObj = groupVariants;
+                                                if (groupVariantsAsObj[valExpr.value])
+                                                    baseStyle = (0, utils_1.deepMerge)(baseStyle, groupVariantsAsObj[valExpr.value]);
+                                                continue;
+                                            }
+                                            Object.entries(groupVariants).forEach(([optionName, style]) => {
+                                                conditionals.push({
+                                                    test: valExpr,
+                                                    testLHS: valSource,
+                                                    testString: `${valSource} === '${optionName}'`,
+                                                    truthy: style,
+                                                    falsy: {},
+                                                    groupId: currentGroupId,
+                                                    groupName,
+                                                    valueName: optionName,
+                                                    varName,
+                                                });
+                                            });
+                                        }
+                                    }
+                                    continue;
+                                }
+                                const argSource = getSource(argExpr);
+                                if (utils_1.t.isStringLiteral(argExpr)) {
+                                    if (variantObj[argExpr.value])
+                                        baseStyle = (0, utils_1.deepMerge)(baseStyle, variantObj[argExpr.value]);
+                                    continue;
+                                }
+                                const currentGroupId = ++groupIdCounter;
+                                Object.entries(variantObj).forEach(([key, style]) => {
+                                    conditionals.push({
+                                        test: argExpr,
+                                        testLHS: argSource,
+                                        testString: `${argSource} === '${key}'`,
+                                        truthy: style,
+                                        falsy: {},
+                                        groupId: currentGroupId,
+                                        groupName: undefined,
+                                        valueName: key,
+                                        varName,
+                                    });
+                                });
+                                continue;
+                            }
+                        }
+                    }
+                    else if (utils_1.t.isMemberExpression(expr.callee)) {
+                        const callee = expr.callee;
+                        if (utils_1.t.isIdentifier(callee.object) &&
+                            utils_1.t.isIdentifier(callee.property)) {
+                            const varName = callee.object.value;
+                            const propName = callee.property.value;
+                            const styleInfo = ctx.localCreateStyles[varName];
+                            if (styleInfo && styleInfo.functions?.[propName]) {
+                                const func = styleInfo.functions[propName];
+                                const callArgs = expr.arguments;
+                                if (callArgs.length === 1 && !callArgs[0].spread) {
+                                    const argExpr = callArgs[0].expression;
+                                    const tempStaticTable = { ...ctx.mergedStaticTable };
+                                    if (argExpr.type === 'ObjectExpression') {
+                                        const argObj = (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);
+                                        func.params.forEach((p) => {
+                                            if (argObj[p] !== undefined)
+                                                tempStaticTable[p] = argObj[p];
+                                        });
+                                    }
+                                    else {
+                                        func.params.forEach((p) => {
+                                            tempStaticTable[p] = `var(--${propName}-${p})`;
+                                        });
+                                    }
+                                    const resolved = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
+                                    if (resolved)
+                                        baseStyle = (0, utils_1.deepMerge)(baseStyle, resolved);
+                                    continue;
+                                }
+                            }
+                        }
+                    }
+                }
                 if (collectConditions(arg.expression))
                     continue;
                 const extractedStyles = extractStylesFromExpression(arg.expression, ctx);
@@ -348,8 +529,11 @@ function compileCSS(options) {
                     processStyle(cond.falsy);
             }
         };
+        const processedNodes = new WeakSet();
         const processCall = (node) => {
-            node._processed = true;
+            if (processedNodes.has(node))
+                return;
+            processedNodes.add(node);
             const callee = node.callee;
             let propName;
             if (utils_1.t.isMemberExpression(callee) &&
@@ -412,12 +596,10 @@ function compileCSS(options) {
                     if (utils_1.t.isMemberExpression(callee) &&
                         utils_1.t.isIdentifier(callee.object) &&
                         utils_1.t.isIdentifier(callee.property)) {
-                        if (plumeriaAliases[callee.object.value] ===
-                            'NAMESPACE')
+                        if (plumeriaAliases[callee.object.value] === 'NAMESPACE')
                             pName = callee.property.value;
                     }
-                    else if (utils_1.t.isIdentifier(callee) &&
-                        plumeriaAliases[callee.value]) {
+                    else if (utils_1.t.isIdentifier(callee) && plumeriaAliases[callee.value]) {
                         pName = plumeriaAliases[callee.value];
                     }
                     if (pName &&
@@ -431,27 +613,26 @@ function compileCSS(options) {
                         if (pName === 'create') {
                             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, resolveVariable);
                             if (obj) {
-                                ctx.localCreateStyles[node.id.value] = { type: 'create', obj };
-                                Object.entries(obj).forEach(([_, style]) => {
-                                    if (typeof style !== 'object' || style === null)
-                                        return;
-                                    (0, utils_1.getStyleRecords)(style).forEach((r) => extractedSheets.push(r.sheet));
-                                });
+                                const styleFunctions = {};
                                 arg.properties.forEach((prop) => {
                                     if (prop.type !== 'KeyValueProperty' ||
                                         prop.key.type !== 'Identifier')
                                         return;
-                                    const isArrow = prop.value.type === 'ArrowFunctionExpression';
-                                    const isFunc = prop.value.type === 'FunctionExpression';
-                                    if (!isArrow && !isFunc)
+                                    const func = prop.value;
+                                    if (func.type !== 'ArrowFunctionExpression' &&
+                                        func.type !== 'FunctionExpression')
                                         return;
-                                    const key = prop.key.value;
-                                    const params = prop.value.params.map((p) => p.type === 'Identifier' ? p.value : (p.pat?.value ?? 'arg'));
-                                    const tempStaticTable = { ...ctx.mergedStaticTable };
-                                    params.forEach((paramName) => {
-                                        tempStaticTable[paramName] = `var(--${key}-${paramName})`;
+                                    const params = func.params.map((p) => {
+                                        if (utils_1.t.isIdentifier(p))
+                                            return p.value;
+                                        if (typeof p === 'object' &&
+                                            p !== null &&
+                                            'pat' in p &&
+                                            utils_1.t.isIdentifier(p.pat))
+                                            return p.pat.value;
+                                        return 'arg';
                                     });
-                                    let actualBody = prop.value.body;
+                                    let actualBody = func.body;
                                     if (actualBody?.type === 'ParenthesisExpression')
                                         actualBody = actualBody.expression;
                                     if (actualBody?.type === 'BlockStatement') {
@@ -461,19 +642,30 @@ function compileCSS(options) {
                                         if (actualBody?.type === 'ParenthesisExpression')
                                             actualBody = actualBody.expression;
                                     }
-                                    if (!actualBody || actualBody.type !== 'ObjectExpression')
-                                        return;
-                                    const substituted = (0, utils_1.objectExpressionToObject)(actualBody, tempStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
-                                    if (!substituted)
-                                        return;
-                                    (0, utils_1.getStyleRecords)(substituted).forEach((r) => extractedSheets.push(r.sheet));
+                                    if (actualBody && actualBody.type === 'ObjectExpression') {
+                                        styleFunctions[prop.key.value] = {
+                                            params,
+                                            body: actualBody,
+                                        };
+                                    }
                                 });
+                                ctx.localCreateStyles[node.id.value] = {
+                                    type: 'create',
+                                    obj,
+                                    functions: styleFunctions,
+                                };
                             }
                         }
                         else if (pName === 'variants') {
                             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, resolveVariable);
-                            if (obj)
-                                ctx.localCreateStyles[node.id.value] = { type: 'variant', obj };
+                            if (obj) {
+                                const { hashMap } = (0, utils_1.processVariants)(obj);
+                                ctx.localCreateStyles[node.id.value] = {
+                                    type: 'variant',
+                                    obj,
+                                    hashMap,
+                                };
+                            }
                         }
                         else if (pName === 'createTheme') {
                             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);
@@ -488,9 +680,12 @@ function compileCSS(options) {
                         }
                     }
                 }
-                if (utils_1.t.isIdentifier(node.id)) {
-                    if (node.init)
-                        traverseInternal(node.init);
+            },
+        });
+        (0, utils_1.traverse)(ast, {
+            VariableDeclarator({ node }) {
+                if (utils_1.t.isIdentifier(node.id) && node.init) {
+                    traverseInternal(node.init);
                 }
             },
             FunctionDeclaration({ node }) {
@@ -498,19 +693,21 @@ function compileCSS(options) {
                     traverseInternal(node.body);
             },
             CallExpression: (path) => {
-                if (!path.node._processed)
+                if (!processedNodes.has(path.node))
                     processCall(path.node);
             },
             JSXAttribute({ node }) {
-                if (node.name?.value !== 'styleName')
+                if (node.name.value !== 'styleName')
                     return;
                 if (!node.value || node.value.type !== 'JSXExpressionContainer')
                     return;
+                if (node.value.expression.type === 'JSXEmptyExpression')
+                    return;
                 const expr = node.value.expression;
                 const args = expr.type === 'ArrayExpression'
                     ? expr.elements
-                        .filter(Boolean)
-                        .map((el) => ({ expression: el.expression ?? el }))
+                        .filter((el) => el !== undefined)
+                        .map((el) => ({ expression: el.expression }))
                     : [{ expression: expr }];
                 extractAndProcessConditionals(args, true);
             },

package/package.json

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