@plumeria/compiler 18.2.25 → 18.2.27

package/dist/index.js

@@ -47,7 +47,7 @@ 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) => {
+const namedParamsOf = (params, defaults) => {
     if (params.length !== 1)
         return undefined;
     const first = params[0];
@@ -56,22 +56,43 @@ const namedParamsOf = (params) => {
         return undefined;
     const named = [];
     for (const prop of pattern.properties ?? []) {
-        if (prop.type === 'AssignmentPatternProperty' &&
-            utils_1.t.isIdentifier(prop.key) &&
-            !prop.value) {
+        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 applyVarFallback = (style, cssVar, literal) => {
+    for (const [prop, value] of Object.entries(style)) {
+        if (typeof value === 'string' && value.includes(cssVar)) {
+            style[prop] =
+                `var(${cssVar}, ${(0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(prop))})`;
+            return true;
+        }
+        if (value !== null && typeof value === 'object') {
+            if (applyVarFallback(value, cssVar, literal))
+                return true;
+        }
+    }
+    return false;
+};
 const styleFunctionsOf = (objExpr) => {
     const styleFunctions = {};
     objExpr.properties.forEach((prop) => {
@@ -81,14 +102,16 @@ const styleFunctionsOf = (objExpr) => {
         if (func.type !== 'ArrowFunctionExpression' &&
             func.type !== 'FunctionExpression')
             return;
+        const defaults = {};
         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;
+            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;
@@ -104,7 +127,8 @@ const styleFunctionsOf = (objExpr) => {
         if (actualBody && actualBody.type === 'ObjectExpression') {
             styleFunctions[prop.key.value] = {
                 params,
-                named: namedParamsOf(func.params),
+                named: namedParamsOf(func.params, defaults),
+                defaults,
                 body: actualBody,
             };
         }
@@ -432,6 +456,24 @@ function compileCSS(options) {
                 }
             }
         }
+        const components = [];
+        for (const node of ast.body) {
+            const statement = utils_1.t.isExportDeclaration(node) ? node.declaration : node;
+            if (statement.type === 'FunctionDeclaration' && statement.identifier) {
+                components.push({ name: statement.identifier.value, node: statement });
+            }
+            else if (utils_1.t.isVariableDeclaration(statement)) {
+                for (const decl of statement.declarations) {
+                    if (utils_1.t.isIdentifier(decl.id) &&
+                        (decl.init?.type === 'ArrowFunctionExpression' ||
+                            decl.init?.type === 'FunctionExpression')) {
+                        components.push({ name: decl.id.value, node: decl.init });
+                    }
+                }
+            }
+        }
+        const ownerComponentOf = (at) => components.find((c) => at.span.start >= c.node.span.start &&
+            at.span.start <= c.node.span.end)?.name;
         const processStyle = (style) => {
             (0, utils_1.extractOndemandStyles)(style, extractedSheets, scannedTables);
             const records = (0, utils_1.getStyleRecords)(style);
@@ -551,17 +593,18 @@ function compileCSS(options) {
                 if (!func)
                     return null;
                 const callArgs = expr.arguments;
-                if (callArgs.some((a) => a.spread) || callArgs.length === 0)
+                if (callArgs.some((a) => a.spread))
                     return null;
                 const tempStaticTable = { ...ctx.mergedStaticTable };
                 const runtime = [];
                 if (func.named) {
-                    const argExpr = callArgs[0].expression;
-                    if (callArgs.length !== 1 || argExpr.type !== 'ObjectExpression') {
+                    const argExpr = callArgs[0]?.expression;
+                    if (callArgs.length > 1 ||
+                        (argExpr && argExpr.type !== 'ObjectExpression')) {
                         throw new Error(`[plumeria] ${getSource(expr)} takes one object argument, because ${callee.property.value} destructures its parameter.\n`);
                     }
                     const given = new Map();
-                    argExpr.properties.forEach((prop) => {
+                    (argExpr?.properties ?? []).forEach((prop) => {
                         if (prop.type === 'Identifier') {
                             given.set(prop.value, prop);
                         }
@@ -570,10 +613,14 @@ function compileCSS(options) {
                             given.set(String(prop.key.value), prop.value);
                         }
                     });
-                    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) ?? {};
+                    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) ?? {});
                     func.named.forEach(({ key, local }) => {
                         const source = given.get(key);
                         if (!source) {
+                            if (func.defaults?.[local])
+                                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)
@@ -598,15 +645,34 @@ function compileCSS(options) {
                         runtime.push(p);
                     });
                 }
-                if (runtime.length > 0) {
-                    runtime.forEach((p) => (tempStaticTable[p] = 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);
-                    runtime.forEach((p) => {
-                        tempStaticTable[p] = `var(--${hash}-${p})`;
+                    varParams.forEach((p) => {
+                        const cssVar = `--${hash}-${p}`;
+                        tempStaticTable[p] = `var(${cssVar})`;
+                        cssVars[p] = cssVar;
                     });
                 }
-                return ((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) ?? null);
+                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)
+                    return null;
+                withDefault.forEach(([param, expr]) => {
+                    const cssVar = cssVars[param];
+                    if (!cssVar)
+                        return;
+                    const literal = expr.type === 'StringLiteral' || expr.type === 'NumericLiteral'
+                        ? expr.value
+                        : undefined;
+                    if (literal === undefined)
+                        return;
+                    applyVarFallback(style, cssVar, literal);
+                });
+                return style;
             };
             const collectConditions = (node, currentTestStrings = []) => {
                 if (node.type === 'ConditionalExpression') {
@@ -724,17 +790,24 @@ function compileCSS(options) {
                     const varName = utils_1.t.isIdentifier(expr)
                         ? expr.value
                         : expr.property.value;
-                    let propPossibilities;
-                    for (const key of Object.keys(ctx.scannedTables.componentPropsTable || {})) {
-                        if (key.startsWith(`${resourcePath}-`)) {
-                            if (ctx.scannedTables.componentPropsTable?.[key]?.[varName]) {
-                                propPossibilities =
-                                    ctx.scannedTables.componentPropsTable?.[key]?.[varName];
-                                break;
-                            }
+                    const owner = ownerComponentOf(expr);
+                    const propPossibilities = [];
+                    if (owner) {
+                        const entries = ctx.scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[varName];
+                        if (entries)
+                            propPossibilities.push(...entries);
+                    }
+                    else {
+                        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 && propPossibilities.length > 0) {
+                    if (propPossibilities.length > 0) {
                         const uniqueEntries = [];
                         propPossibilities.forEach((entry) => {
                             if (!uniqueEntries.some((x) => x.key === entry.key)) {

package/package.json

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