@plumeria/compiler 18.4.0 → 18.4.1

package/dist/index.js

@@ -71,133 +71,16 @@ const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
     (node.type === 'TemplateLiteral' && node.expressions.length === 0) ||
     utils_1.t.isIdentifier(node) ||
     utils_1.t.isMemberExpression(node);
-const namedParamsOf = (params, defaults) => {
-    if (params.length !== 1)
-        return undefined;
-    const first = params[0];
-    const pattern = (first?.pat ?? first);
-    if (pattern?.type !== 'ObjectPattern')
-        return undefined;
-    const named = [];
-    for (const prop of pattern.properties ?? []) {
-        if (prop.type === 'AssignmentPatternProperty' && utils_1.t.isIdentifier(prop.key)) {
-            named.push({ key: prop.key.value, local: prop.key.value });
-            if (prop.value)
-                defaults[prop.key.value] = prop.value;
-        }
-        else if (prop.type === 'KeyValuePatternProperty' &&
-            utils_1.t.isIdentifier(prop.key) &&
-            utils_1.t.isIdentifier(prop.value)) {
-            named.push({ key: prop.key.value, local: prop.value.value });
-        }
-        else if (prop.type === 'KeyValuePatternProperty' &&
-            utils_1.t.isIdentifier(prop.key) &&
-            prop.value?.type === 'AssignmentPattern' &&
-            utils_1.t.isIdentifier(prop.value.left)) {
-            named.push({ key: String(prop.key.value), local: prop.value.left.value });
-            defaults[prop.value.left.value] = prop.value.right;
-        }
-        else {
-            return undefined;
-        }
-    }
-    return named.length > 0 ? named : undefined;
-};
-const isUnitlessProp = (prop) => zss_engine_1.exceptionCamelCase.includes(prop) || prop.startsWith('--');
-const collectVarProps = (style, cssVar, props) => {
-    const reference = `var(${cssVar})`;
-    for (const [prop, value] of Object.entries(style)) {
-        if (typeof value === 'string' && value.includes(reference))
-            props.push(prop);
-        else if (value !== null && typeof value === 'object')
-            collectVarProps(value, cssVar, props);
-    }
-};
-const retargetVar = (style, cssVar, next, unitless) => {
-    const reference = `var(${cssVar})`;
-    for (const [prop, value] of Object.entries(style)) {
-        if (typeof value === 'string' && value.includes(reference)) {
-            if (isUnitlessProp(prop) === unitless)
-                style[prop] = value
-                    .split(reference)
-                    .join(`var(${next})`);
-        }
-        else if (value !== null && typeof value === 'object') {
-            retargetVar(value, cssVar, next, unitless);
-        }
-    }
-};
-const splitVarByUnit = (style, cssVar) => {
-    const props = [];
-    collectVarProps(style, cssVar, props);
-    if (props.length === 0)
-        return [];
-    const lead = props[0];
-    const split = props.find((prop) => isUnitlessProp(prop) !== isUnitlessProp(lead));
-    if (!split)
-        return [{ cssVar, prop: lead }];
-    const splitVar = `${cssVar}-${(0, zss_engine_1.camelToKebabCase)(split).replace(/^-+/, '')}`;
-    retargetVar(style, cssVar, splitVar, isUnitlessProp(split));
-    return [
-        { cssVar, prop: lead },
-        { cssVar: splitVar, prop: split },
-    ];
-};
-const applyVarFallback = (style, cssVar, literal) => {
-    const reference = `var(${cssVar})`;
-    for (const [prop, value] of Object.entries(style)) {
-        if (typeof value === 'string' && value.includes(reference)) {
-            style[prop] = value
-                .split(reference)
-                .join(`var(${cssVar}, ${(0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(prop))})`);
-        }
-        else if (value !== null && typeof value === 'object') {
-            applyVarFallback(value, cssVar, literal);
-        }
-    }
-};
-const styleFunctionsOf = (objExpr) => {
-    const styleFunctions = {};
-    objExpr.properties.forEach((prop) => {
-        if (prop.type !== 'KeyValueProperty' || prop.key.type !== 'Identifier')
-            return;
-        const func = prop.value;
-        if (func.type !== 'ArrowFunctionExpression' &&
-            func.type !== 'FunctionExpression')
-            return;
-        const defaults = {};
-        const params = func.params.map((p) => {
-            const pattern = (typeof p === 'object' && p !== null && 'pat' in p ? p.pat : p);
-            if (utils_1.t.isIdentifier(pattern))
-                return pattern.value;
-            if (pattern?.type === 'AssignmentPattern' &&
-                utils_1.t.isIdentifier(pattern.left)) {
-                defaults[pattern.left.value] = pattern.right;
-                return pattern.left.value;
-            }
-            return 'arg';
-        });
-        let actualBody = func.body;
-        if (actualBody?.type === 'ParenthesisExpression')
-            actualBody = actualBody.expression;
-        if (actualBody?.type === 'BlockStatement') {
-            const first = actualBody.stmts?.[0];
-            if (first?.type === 'ReturnStatement')
-                actualBody = first.argument;
-            if (actualBody?.type === 'ParenthesisExpression')
-                actualBody = actualBody.expression;
-        }
-        if (actualBody && actualBody.type === 'ObjectExpression') {
-            styleFunctions[prop.key.value] = {
-                params,
-                named: namedParamsOf(func.params, defaults),
-                defaults,
-                body: actualBody,
-            };
-        }
-    });
-    return styleFunctions;
-};
+const dynamicTablesOf = (ctx) => ({
+    keyframesHashTable: ctx.mergedKeyframesTable,
+    viewTransitionHashTable: ctx.mergedViewTransitionTable,
+    createThemeHashTable: ctx.mergedCreateThemeHashTable,
+    createThemeObjectTable: ctx.scannedTables.createThemeObjectTable,
+    createHashTable: ctx.mergedCreateTable,
+    createStaticHashTable: ctx.mergedCreateStaticHashTable,
+    createStaticObjectTable: ctx.scannedTables.createStaticObjectTable,
+    variantsHashTable: ctx.mergedVariantsTable,
+});
 function extractStylesFromExpression(expression, ctx) {
     let expr = expression;
     if (ctx.localStyleAliases &&
@@ -379,7 +262,7 @@ function compileCSS(options) {
                                 createImportMap[localName] =
                                     scannedTables.createHashTable[uniqueKey];
                             if (scannedTables.createFunctionTable[uniqueKey])
-                                createFunctionImportMap[localName] = styleFunctionsOf(scannedTables.createFunctionTable[uniqueKey]);
+                                createFunctionImportMap[localName] = (0, utils_1.styleFunctionsOf)(scannedTables.createFunctionTable[uniqueKey]);
                             if (scannedTables.variantsHashTable[uniqueKey])
                                 variantsImportMap[localName] =
                                     scannedTables.variantsHashTable[uniqueKey];
@@ -554,7 +437,7 @@ function compileCSS(options) {
             const records = (0, utils_1.getStyleRecords)(style);
             records.forEach((r) => extractedSheets.push(r.sheet));
         };
-        const extractAndProcessConditionals = (args, isStyleProp = false) => {
+        const extractAndProcessConditionals = (args) => {
             args.forEach((arg) => {
                 if (utils_1.t.isIdentifier(arg.expression) &&
                     localStyleAliases[arg.expression.value]) {
@@ -726,36 +609,10 @@ function compileCSS(options) {
                         runtime.push(p);
                     });
                 }
-                const withDefault = Object.entries(func.defaults ?? {}).filter(([param]) => tempStaticTable[param] === undefined);
-                const cssVars = {};
-                const varParams = Array.from(new Set([...runtime, ...withDefault.map(([param]) => param)]));
-                if (varParams.length > 0) {
-                    varParams.forEach((p) => (tempStaticTable[p] = p));
-                    const probe = (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);
-                    const hash = (0, zss_engine_1.genBase36Hash)(probe ?? {}, 1, 8);
-                    varParams.forEach((p) => {
-                        const cssVar = `--${hash}-${p}`;
-                        tempStaticTable[p] = `var(${cssVar})`;
-                        cssVars[p] = cssVar;
-                    });
-                }
-                const style = (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 (!style)
+                const resolved = (0, utils_1.resolveDynamicStyle)(func, runtime, tempStaticTable, dynamicTablesOf(ctx));
+                if (!resolved)
                     return null;
-                const varGroups = new Map();
-                varParams.forEach((param) => {
-                    const cssVar = cssVars[param];
-                    if (cssVar)
-                        varGroups.set(param, splitVarByUnit(style, cssVar));
-                });
-                withDefault.forEach(([param, expr]) => {
-                    const literal = expr.type === 'StringLiteral' || expr.type === 'NumericLiteral'
-                        ? expr.value
-                        : undefined;
-                    if (literal === undefined)
-                        return;
-                    (varGroups.get(param) ?? []).forEach(({ cssVar }) => applyVarFallback(style, cssVar, literal));
-                });
+                const { style } = resolved;
                 return style;
             };
             const collectConditions = (node, currentTestStrings = []) => {
@@ -827,44 +684,7 @@ function compileCSS(options) {
                 assertResolvable(node);
                 return false;
             };
-            const checkFunctionKey = (node) => {
-                if (isStyleProp)
-                    return;
-                if (utils_1.t.isCallExpression(node) &&
-                    utils_1.t.isMemberExpression(node.callee) &&
-                    utils_1.t.isIdentifier(node.callee.object) &&
-                    utils_1.t.isIdentifier(node.callee.property)) {
-                    const varName = node.callee.object.value;
-                    const propKey = node.callee.property.value;
-                    const styleInfo = ctx.localCreateStyles[varName];
-                    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 ${styleProp} instead.\n`);
-                    }
-                }
-                if (node.type === 'ConditionalExpression') {
-                    checkFunctionKey(node.consequent);
-                    checkFunctionKey(node.alternate);
-                }
-                else if (node.type === 'BinaryExpression' &&
-                    ['&&', '||', '??'].includes(node.operator)) {
-                    checkFunctionKey(node.left);
-                    checkFunctionKey(node.right);
-                }
-                else if (node.type === 'ParenthesisExpression') {
-                    checkFunctionKey(node.expression);
-                }
-                else if (node.type === 'ArrayExpression') {
-                    for (const el of node.elements) {
-                        if (el && el.expression)
-                            checkFunctionKey(el.expression);
-                    }
-                }
-            };
             for (const arg of args) {
-                checkFunctionKey(arg.expression);
                 const expr = arg.expression;
                 if (utils_1.t.isIdentifier(expr) ||
                     (utils_1.t.isMemberExpression(expr) &&
@@ -949,7 +769,7 @@ function compileCSS(options) {
             if (propName) {
                 const args = node.arguments;
                 if (propName === 'use') {
-                    extractAndProcessConditionals(args, false);
+                    extractAndProcessConditionals(args);
                 }
                 else if (propName === 'keyframes' &&
                     args.length > 0 &&
@@ -1035,7 +855,7 @@ 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) {
-                                    const styleFunctions = styleFunctionsOf(arg);
+                                    const styleFunctions = (0, utils_1.styleFunctionsOf)(arg);
                                     ctx.localCreateStyles[node.id.value] = {
                                         type: 'create',
                                         obj,
@@ -1150,7 +970,7 @@ function compileCSS(options) {
                         .filter((el) => el !== undefined)
                         .map((el) => ({ expression: el.expression }))
                     : [{ expression: expr }];
-                extractAndProcessConditionals(args, true);
+                extractAndProcessConditionals(args);
             },
         });
         return extractedSheets;

package/package.json

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