@plumeria/utils 19.6.1 → 19.7.0

package/dist/compile.js

@@ -41,6 +41,7 @@ const path = __importStar(require("path"));
 const rs = __importStar(require("@rust-gear/glob"));
 const index_1 = require("./index");
 const index_2 = require("./index");
+const dynamicKey_1 = require("./dynamicKey");
 const unwrapExport = (node) => {
     if (node?.type === 'ExportDeclaration')
         return node.declaration;
@@ -626,6 +627,7 @@ function compileCSS(options) {
                 const tempStaticTable = { ...ctx.mergedStaticTable };
                 const providedParams = new Set();
                 const runtime = [];
+                const definite = new Set();
                 const resolveObjectArg = (argExpr) => (0, index_1.objectExpressionToObject)({
                     ...argExpr,
                     properties: argExpr.properties.filter((prop) => prop.type === 'Identifier' ||
@@ -662,8 +664,11 @@ function compileCSS(options) {
                             tempStaticTable[local] = argObj[key];
                             providedParams.add(local);
                         }
-                        else
+                        else {
                             runtime.push(local);
+                            if ((0, dynamicKey_1.isDefinedArgument)(source))
+                                definite.add(local);
+                        }
                     });
                 }
                 else if (callArgs.length === 1 &&
@@ -677,14 +682,16 @@ function compileCSS(options) {
                     });
                 }
                 else {
-                    callArgs.forEach((_callArg, i) => {
+                    callArgs.forEach((callArg, i) => {
                         const p = func.params[i];
                         if (!p)
                             return;
                         runtime.push(p);
+                        if ((0, dynamicKey_1.isDefinedArgument)(callArg.expression))
+                            definite.add(p);
                     });
                 }
-                const resolved = (0, index_1.resolveDynamicStyle)(func, runtime, tempStaticTable, dynamicTablesOf(ctx), providedParams);
+                const resolved = (0, index_1.resolveDynamicStyle)(func, runtime, tempStaticTable, dynamicTablesOf(ctx), providedParams, definite);
                 const { style } = resolved;
                 return style;
             };

package/dist/dynamicKey.d.ts

@@ -35,6 +35,14 @@ export type DynamicStyleTables = {
     createStaticHashTable: CreateStaticHashTable;
     createStaticObjectTable: CreateStaticObjectTable;
 };
+export type DerivedPiece = string | {
+    param: string;
+    fallback?: string;
+};
+export type DerivedVar = {
+    name: string;
+    pieces: DerivedPiece[];
+};
 export type DynamicStyleResult = {
     style: CSSObject;
     varGroups: Map<string, Array<{
@@ -43,6 +51,8 @@ export type DynamicStyleResult = {
         unit: string;
         written: boolean;
     }>>;
+    derived: DerivedVar[];
 };
-export declare const resolveDynamicStyle: (func: StyleFunction, runtimeParams: string[], staticTable: StaticTable, tables: DynamicStyleTables, providedParams?: ReadonlySet<string>) => DynamicStyleResult;
+export declare const isDefinedArgument: (expression: Expression) => boolean;
+export declare const resolveDynamicStyle: (func: StyleFunction, runtimeParams: string[], staticTable: StaticTable, tables: DynamicStyleTables, providedParams?: ReadonlySet<string>, definiteParams?: ReadonlySet<string>) => DynamicStyleResult;
 export {};

package/dist/dynamicKey.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveDynamicStyle = exports.applyVarFallback = exports.splitVarByUnit = exports.isUnitlessProp = exports.styleFunctionsOf = void 0;
+exports.resolveDynamicStyle = exports.isDefinedArgument = exports.applyVarFallback = exports.splitVarByUnit = exports.isUnitlessProp = exports.styleFunctionsOf = void 0;
 const zss_engine_1 = require("zss-engine");
 const zss_engine_2 = require("zss-engine");
 const parser_1 = require("./parser");
@@ -229,55 +229,222 @@ const applyVarFallback = (style, cssVar, literal, unit) => {
     }
 };
 exports.applyVarFallback = applyVarFallback;
-const resolveDynamicStyle = (func, runtimeParams, staticTable, tables, providedParams) => {
+const ARITHMETIC = new Set(['+', '-', '*', '/', '%', '**']);
+const isSign = (node) => parser_1.t.isUnaryExpression(node) && (node.operator === '-' || node.operator === '+');
+const isDefinedArgument = (expression) => {
+    const node = (0, parser_1.unwrapExpression)(expression);
+    if (parser_1.t.isStringLiteral(node) ||
+        parser_1.t.isNumericLiteral(node) ||
+        parser_1.t.isBooleanLiteral(node) ||
+        parser_1.t.isNullLiteral(node) ||
+        parser_1.t.isTemplateLiteral(node))
+        return true;
+    return isSign(node) && parser_1.t.isNumericLiteral((0, parser_1.unwrapExpression)(node.argument));
+};
+exports.isDefinedArgument = isDefinedArgument;
+const defaultError = (param, node, literal) => {
+    const kind = literal === null || parser_1.t.isNullLiteral(node)
+        ? 'null'
+        : typeof literal === 'boolean'
+            ? 'a boolean'
+            : literal !== undefined
+                ? 'an object'
+                : undefined;
+    return new Error(kind
+        ? `[plumeria] The default of "${param}" is ${kind}, which a dynamic style function cannot fall back on. Use a string or a number, or pass the value from the call.`
+        : `[plumeria] Cannot resolve the default of "${param}" at build time (${(0, parser_1.expressionLabel)(node)}). A dynamic style function falls back on it when the argument is undefined, so it has to be a string or a number plumeria can read. Pass the value from the call instead.`);
+};
+const replaceNodes = (node, replacements) => {
+    if (!node || typeof node !== 'object')
+        return node;
+    const replacement = replacements.get(node);
+    if (replacement)
+        return replacement;
+    if (Array.isArray(node))
+        return node.map((item) => replaceNodes(item, replacements));
+    const copy = {};
+    for (const key of Object.keys(node))
+        copy[key] =
+            key === 'span' ? node[key] : replaceNodes(node[key], replacements);
+    return copy;
+};
+const literalSource = (value) => {
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    const text = String(value);
+    return text.startsWith('-') ? `(${text})` : text;
+};
+const deriveArithmetic = (body, runtimeParams, varParams, defaults, evaluate) => {
+    const derived = [];
+    const names = new Map();
+    const replacements = new Map();
+    const render = (expression) => {
+        const node = (0, parser_1.unwrapExpression)(expression);
+        if (parser_1.t.isIdentifier(node) && runtimeParams.has(node.value)) {
+            const fallback = defaults.get(node.value);
+            return [
+                fallback === undefined
+                    ? { param: node.value }
+                    : { param: node.value, fallback: literalSource(fallback) },
+            ];
+        }
+        if (parser_1.t.isBinaryExpression(node) && ARITHMETIC.has(node.operator)) {
+            const left = render(node.left);
+            const right = render(node.right);
+            if (!left || !right)
+                return null;
+            return ['(', ...left, ` ${node.operator} `, ...right, ')'];
+        }
+        if (isSign(node)) {
+            const argument = render(node.argument);
+            return argument && ['(', node.operator, '(', ...argument, ')', ')'];
+        }
+        if ((0, parser_1.readsParams)(node, runtimeParams))
+            return null;
+        const value = evaluate(node);
+        return typeof value === 'number' ? [literalSource(value)] : null;
+    };
+    const register = (node, pieces) => {
+        const first = pieces.find((piece) => typeof piece !== 'string');
+        if (!first) {
+            replacements.set(node, {
+                type: 'NumericLiteral',
+                span: node.span,
+                value: evaluate(node),
+            });
+            return;
+        }
+        const key = JSON.stringify(pieces);
+        let name = names.get(key);
+        if (!name) {
+            name = `${first.param}-${derived.length + 1}`;
+            names.set(key, name);
+            derived.push({ name, pieces });
+        }
+        replacements.set(node, {
+            type: 'Identifier',
+            span: node.span,
+            value: name,
+            optional: false,
+        });
+    };
+    const visit = (expression) => {
+        const node = (0, parser_1.unwrapExpression)(expression);
+        if (parser_1.t.isObjectExpression(node)) {
+            node.properties.forEach((prop) => {
+                if (prop.type === 'KeyValueProperty')
+                    visit(prop.value);
+            });
+            return;
+        }
+        if (parser_1.t.isTemplateLiteral(node)) {
+            node.expressions.forEach(visit);
+            return;
+        }
+        const arithmetic = parser_1.t.isBinaryExpression(node) && ARITHMETIC.has(node.operator);
+        if (!arithmetic && !isSign(node))
+            return;
+        if (!(0, parser_1.readsParams)(node, varParams))
+            return;
+        const pieces = render(node);
+        if (pieces) {
+            register(node, pieces.slice(1, -1));
+            return;
+        }
+        if (arithmetic && node.operator === '+') {
+            visit(node.left);
+            visit(node.right);
+        }
+    };
+    visit(body);
+    return {
+        body: replacements.size > 0 ? replaceNodes(body, replacements) : body,
+        derived,
+    };
+};
+const resolveDynamicStyle = (func, runtimeParams, staticTable, tables, providedParams, definiteParams) => {
     if (func.unsupportedParams)
         throw new Error('[plumeria] Dynamic styles require named parameters or object destructuring; array and rest parameters are not supported.');
     const tempStaticTable = Object.create(staticTable);
-    const resolveBody = () => (0, parser_1.objectExpressionToObject)(func.body, tempStaticTable, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable);
+    const evaluate = (expr, table) => (0, parser_1.objectExpressionToObject)({
+        type: 'ObjectExpression',
+        span: func.body.span,
+        properties: [
+            {
+                type: 'KeyValueProperty',
+                key: {
+                    type: 'Identifier',
+                    span: func.body.span,
+                    value: 'value',
+                    optional: false,
+                },
+                value: expr,
+            },
+        ],
+    }, table, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable).value;
     const withDefault = Object.entries(func.defaults ?? {}).filter(([param]) => providedParams
         ? !providedParams.has(param)
         : tempStaticTable[param] === undefined);
+    const defaultLiterals = new Map();
+    withDefault.forEach(([param, expr]) => {
+        const node = (0, parser_1.unwrapExpression)(expr);
+        if (parser_1.t.isIdentifier(node) && node.value === 'undefined')
+            return;
+        const definite = definiteParams?.has(param) || !(0, parser_1.readsParams)(func.body, new Set([param]));
+        let literal;
+        try {
+            literal = evaluate(expr, staticTable);
+        }
+        catch (error) {
+            if (definite)
+                return;
+            throw error;
+        }
+        if (typeof literal === 'string' || typeof literal === 'number') {
+            defaultLiterals.set(param, literal);
+            return;
+        }
+        if (!definite)
+            throw defaultError(param, node, literal);
+    });
+    const holeDefaults = new Map([...defaultLiterals].filter(([param]) => !definiteParams?.has(param)));
     const cssVars = {};
     const varParams = Array.from(new Set([...runtimeParams, ...withDefault.map(([param]) => param)]));
-    if (varParams.length > 0) {
-        varParams.forEach((param) => (tempStaticTable[param] = param));
+    const runtimeSet = new Set(runtimeParams);
+    const constantTable = Object.create(staticTable);
+    defaultLiterals.forEach((literal, param) => {
+        if (!runtimeSet.has(param))
+            constantTable[param] = literal;
+    });
+    const { body, derived } = deriveArithmetic(func.body, runtimeSet, new Set(varParams), holeDefaults, (node) => {
+        try {
+            return evaluate(node, constantTable);
+        }
+        catch {
+            return undefined;
+        }
+    });
+    const resolveBody = () => (0, parser_1.objectExpressionToObject)(body, tempStaticTable, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable);
+    const varNames = [...varParams, ...derived.map(({ name }) => name)];
+    if (varNames.length > 0) {
+        varNames.forEach((name) => (tempStaticTable[name] = name));
         const hash = (0, zss_engine_2.genBase36Hash)(resolveBody(), 1, 8);
-        varParams.forEach((param) => {
-            const cssVar = `--${hash}-${param}`;
-            tempStaticTable[param] = `var(${cssVar})`;
-            cssVars[param] = cssVar;
+        varNames.forEach((name) => {
+            const cssVar = `--${hash}-${name}`;
+            tempStaticTable[name] = `var(${cssVar})`;
+            cssVars[name] = cssVar;
         });
     }
     const style = resolveBody();
     const varGroups = new Map();
-    varParams.forEach((param) => {
-        const cssVar = cssVars[param];
-        varGroups.set(param, (0, exports.splitVarByUnit)(style, cssVar));
+    varNames.forEach((name) => {
+        varGroups.set(name, (0, exports.splitVarByUnit)(style, cssVars[name]));
     });
-    withDefault.forEach(([param, expr]) => {
-        const resolved = (0, parser_1.objectExpressionToObject)({
-            type: 'ObjectExpression',
-            span: func.body.span,
-            properties: [
-                {
-                    type: 'KeyValueProperty',
-                    key: {
-                        type: 'Identifier',
-                        span: func.body.span,
-                        value: 'value',
-                        optional: false,
-                    },
-                    value: expr,
-                },
-            ],
-        }, staticTable, tables.keyframesHashTable, tables.viewTransitionHashTable, tables.createThemeHashTable, tables.createThemeObjectTable, tables.createHashTable, tables.createStaticHashTable, tables.createStaticObjectTable);
-        const literal = resolved.value;
-        if (typeof literal !== 'string' && typeof literal !== 'number')
-            return;
+    defaultLiterals.forEach((literal, param) => {
         varGroups
             .get(param)
             .forEach(({ cssVar, unit, written }) => (0, exports.applyVarFallback)(style, cssVar, literal, { unit, written }));
     });
-    return { style, varGroups };
+    return { style, varGroups, derived };
 };
 exports.resolveDynamicStyle = resolveDynamicStyle;

package/dist/parser.d.ts

@@ -2,6 +2,7 @@ import type { CSSObject, Tables, StaticTable, KeyframesHashTable, ViewTransition
 import type { Module, Expression, CallExpression, Identifier, KeyValueProperty, StringLiteral, NumericLiteral, BooleanLiteral, ObjectExpression, MemberExpression, TemplateLiteral, BinaryExpression, UnaryExpression, ParenthesisExpression, VariableDeclaration, VariableDeclarator, ExportDeclaration, ConditionalExpression, JSXExpression, ArrowFunctionExpression, FunctionExpression } from '@swc/core';
 export declare function unwrapExpression(node: any): any;
 export declare const getRootIdentifier: (node: Expression) => string | null;
+export declare const expressionLabel: (node: Expression) => string;
 export declare function resolveOriginError(node: Expression, rootName: string | null, localImports: Record<string, {
     actualPath: string;
     importedName: string;
@@ -45,6 +46,7 @@ export declare function traverse(node: Module | JSXExpression, visitor: {
 export declare function objectExpressionToObject(node: ObjectExpression, staticTable: StaticTable, keyframesHashTable: KeyframesHashTable, viewTransitionHashTable: ViewTransitionHashTable, createThemeHashTable: CreateThemeHashTable, createThemeObjectTable: CreateThemeObjectTable, createHashTable: CreateHashTable, createStaticHashTable: CreateStaticHashTable, createStaticObjectTable: CreateStaticObjectTable, resolveVariable?: (name: string) => any): CSSObject;
 export declare function collectLocalConstNodes(ast: Module): Map<string, any>;
 export declare function collectLocalConsts(ast: Module): Record<string, any>;
+export declare function readsParams(node: any, params: Set<string>): boolean;
 export declare function resolveThemeSelector(node: Expression, staticTable: StaticTable, createStaticHashTable: CreateStaticHashTable, createStaticObjectTable: CreateStaticObjectTable): string;
 export declare function resolveFileError(actualPath: string, importedName: string): {
     filePath: string;

package/dist/parser.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.appendSheet = exports.t = exports.getRootIdentifier = void 0;
+exports.appendSheet = exports.t = exports.expressionLabel = exports.getRootIdentifier = void 0;
 exports.unwrapExpression = unwrapExpression;
 exports.resolveOriginError = resolveOriginError;
 exports.resolveComponentKey = resolveComponentKey;
@@ -41,6 +41,7 @@ exports.traverse = traverse;
 exports.objectExpressionToObject = objectExpressionToObject;
 exports.collectLocalConstNodes = collectLocalConstNodes;
 exports.collectLocalConsts = collectLocalConsts;
+exports.readsParams = readsParams;
 exports.resolveThemeSelector = resolveThemeSelector;
 exports.resolveFileError = resolveFileError;
 exports.fileTableKeys = fileTableKeys;
@@ -127,12 +128,13 @@ const expressionLabel = (node) => {
     if (exports.t.isMemberExpression(node)) {
         const property = node.property;
         if (property.type === 'Identifier')
-            return `${expressionLabel(node.object)}.${property.value}`;
+            return `${(0, exports.expressionLabel)(node.object)}.${property.value}`;
         if (property.type === 'Computed')
-            return `${expressionLabel(node.object)}[${expressionLabel(property.expression)}]`;
+            return `${(0, exports.expressionLabel)(node.object)}[${(0, exports.expressionLabel)(property.expression)}]`;
     }
     return EXPRESSION_KINDS[node.type] ?? 'an expression';
 };
+exports.expressionLabel = expressionLabel;
 const getNamespaceMember = (node, rootName) => {
     node = unwrapExpression(node);
     if (exports.t.isCallExpression(node)) {
@@ -299,6 +301,12 @@ function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTra
         const key = getPropertyKey(prop.key, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
         if (!key)
             return;
+        if (typeof key === 'string' &&
+            (key.startsWith(':') || key.startsWith('['))) {
+            const name = (0, zss_engine_1.findSameNameNesting)(key);
+            if (name)
+                throw new Error(`[plumeria] "${name}()" cannot be nested inside another "${name}()": "${key}". Rewrite the selector without nesting.`);
+        }
         const val = unwrapExpression(prop.value);
         if (exports.t.isIdentifier(val) || exports.t.isMemberExpression(val)) {
             if (resolveVariable && exports.t.isMemberExpression(val)) {
@@ -309,7 +317,7 @@ function objectExpressionToObject(node, staticTable, keyframesHashTable, viewTra
                         [root]: resolved,
                     }));
                     if (member === undefined)
-                        throw new Error(`[plumeria] Unknown style member: ${expressionLabel(val)} does not exist.`);
+                        throw new Error(`[plumeria] Unknown style member: ${(0, exports.expressionLabel)(val)} does not exist.`);
                     obj[key] = member;
                     return;
                 }
@@ -715,7 +723,7 @@ function evaluateTemplateLiteral(node, staticTable, keyframesHashTable, viewTran
             const expr = node.expressions[i];
             const evaluatedExpr = evaluateExpression(expr, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
             if (evaluatedExpr === null || typeof evaluatedExpr === 'object')
-                throw new Error(`[plumeria] Template value cannot be resolved to a primitive: ${expressionLabel(expr)} inside \${} must resolve to a string or number at build time.`);
+                throw new Error(`[plumeria] Template value cannot be resolved to a primitive: ${(0, exports.expressionLabel)(expr)} inside \${} must resolve to a string or number at build time.`);
             result += String(evaluatedExpr);
         }
     }
@@ -872,7 +880,7 @@ function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitio
         if (resolvedStatic !== undefined) {
             return resolvedStatic;
         }
-        throw new Error(`[plumeria] Cannot resolve static member expression: ${expressionLabel(node)}. Its object must be a const or a value created by css.createStatic or css.createTheme.`);
+        throw new Error(`[plumeria] Cannot resolve static member expression: ${(0, exports.expressionLabel)(node)}. Its object must be a const or a value created by css.createStatic or css.createTheme.`);
     }
     if (exports.t.isBinaryExpression(node)) {
         return evaluateBinaryExpression(node, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
@@ -892,12 +900,12 @@ function evaluateExpression(node, staticTable, keyframesHashTable, viewTransitio
             if (node.operator === '~')
                 return ~value;
         }
-        throw new Error(`[plumeria] Unsupported unary operand for ${node.operator}: ${expressionLabel(node.argument)} must resolve to a number at build time.`);
+        throw new Error(`[plumeria] Unsupported unary operand for ${node.operator}: ${(0, exports.expressionLabel)(node.argument)} must resolve to a number at build time.`);
     }
     if (exports.t.isParenthesisExpression(node)) {
         return evaluateExpression(node.expression, staticTable, keyframesHashTable, viewTransitionHashTable, createThemeHashTable, createThemeObjectTable, createStaticHashTable, createStaticObjectTable);
     }
-    throw new Error(`[plumeria] Unsupported expression type: ${expressionLabel(node)}. Style values must be literals, consts, or arithmetic and template expressions of them.`);
+    throw new Error(`[plumeria] Unsupported expression type: ${(0, exports.expressionLabel)(node)}. Style values must be literals, consts, or arithmetic and template expressions of them.`);
 }
 function resolveKeyframesTableMemberExpression(node, keyframesHashTable) {
     if (exports.t.isIdentifier(node)) {
@@ -1858,22 +1866,27 @@ function runScan(scanCwd, styleProp) {
                 if (callArgs.some((a) => a.spread))
                     return null;
                 const runtime = [];
+                const definite = new Set();
                 if (func.named) {
                     const argExpr = callArgs[0]?.expression;
                     if (callArgs.length > 1 ||
                         (argExpr && argExpr.type !== 'ObjectExpression'))
                         return null;
-                    const given = new Set();
+                    const given = new Map();
                     (argExpr?.properties ?? []).forEach((prop) => {
                         if (prop.type === 'Identifier')
-                            given.add(prop.value);
+                            given.set(prop.value, prop);
                         else if (prop.type === 'KeyValueProperty' &&
                             (exports.t.isIdentifier(prop.key) || exports.t.isStringLiteral(prop.key)))
-                            given.add(String(prop.key.value));
+                            given.set(String(prop.key.value), prop.value);
                     });
                     for (const { key, local } of func.named) {
-                        if (given.has(key))
+                        const source = given.get(key);
+                        if (source) {
                             runtime.push(local);
+                            if ((0, dynamicKey_1.isDefinedArgument)(source))
+                                definite.add(local);
+                        }
                         else if (!func.defaults?.[local])
                             return null;
                     }
@@ -1883,14 +1896,20 @@ function runScan(scanCwd, styleProp) {
                     return null;
                 }
                 else {
-                    callArgs.forEach((_, i) => {
+                    callArgs.forEach((callArg, i) => {
                         const param = func.params[i];
-                        if (param)
-                            runtime.push(param);
+                        if (!param)
+                            return;
+                        runtime.push(param);
+                        if ((0, dynamicKey_1.isDefinedArgument)(callArg.expression))
+                            definite.add(param);
                     });
                 }
-                const resolved = (0, dynamicKey_1.resolveDynamicStyle)(func, runtime, dynamicStaticTable, dynamicStyleTables, new Set());
-                const hasVars = runtime.some((param) => (resolved.varGroups.get(param) ?? []).length > 0);
+                const resolved = (0, dynamicKey_1.resolveDynamicStyle)(func, runtime, dynamicStaticTable, dynamicStyleTables, new Set(), definite);
+                const hasVars = [
+                    ...runtime,
+                    ...resolved.derived.map(({ name }) => name),
+                ].some((param) => (resolved.varGroups.get(param) ?? []).length > 0);
                 return { style: resolved.style, hasVars };
             };
             const resolveCallStylePropInScan = (expr) => {

package/dist/stylePropFilter.js

@@ -5,7 +5,7 @@ const CORE = '@plumeria/core';
 const isIdentifierStart = (c) => (c >= 65 && c <= 90) || (c >= 97 && c <= 122) || c === 95 || c === 36;
 const isNameChar = (c) => isIdentifierStart(c) || (c >= 48 && c <= 57) || c === 46 || c === 45;
 const isSpace = (c) => c === 32 || (c >= 9 && c <= 13);
-const EXPRESSION_BEFORE = new Set(Array.from('(,=:[!&|?{};+-*%<>~^', (c) => c.charCodeAt(0)));
+const EXPRESSION_BEFORE = new Set(Array.from('(,=:[!&|?{};+-*%<>~^/', (c) => c.charCodeAt(0)));
 const EXPRESSION_WORDS = new Set([
     'return',
     'yield',
@@ -202,7 +202,7 @@ const writesAttribute = (source, name) => {
             if (end === -1)
                 return true;
             i = end;
-            previous = 96;
+            previous = source.charCodeAt(i) === 123 ? 123 : 96;
             continue;
         }
         if (c === 123) {
@@ -217,7 +217,7 @@ const writesAttribute = (source, name) => {
                 if (end === -1)
                     return true;
                 i = end;
-                previous = 96;
+                previous = source.charCodeAt(i) === 123 ? 123 : 96;
                 continue;
             }
             if (kind === 'attribute') {
@@ -237,6 +237,7 @@ const writesAttribute = (source, name) => {
             source.charCodeAt(previousEnd - 2) === previous;
         const expressionStart = previous === 0 ||
             (EXPRESSION_BEFORE.has(previous) && !afterUpdate) ||
+            (previous === 46 && source.startsWith('...', previousEnd - 3)) ||
             (isNameChar(previous) &&
                 EXPRESSION_WORDS.has(wordBefore(source, previousEnd)));
         if (c === 47 && expressionStart) {

package/dist/transform.js

@@ -1200,18 +1200,40 @@ const transformSource = async (env) => {
                 runtime.push({ param: p, source: callArg.expression });
             });
         }
-        const resolved = (0, dynamicKey_1.resolveDynamicStyle)(func, runtime.map(({ param }) => param), tempStaticTable, dynamicStyleTables, providedParams);
-        const { style, varGroups } = resolved;
-        const vars = [];
+        const resolved = (0, dynamicKey_1.resolveDynamicStyle)(func, runtime.map(({ param }) => param), tempStaticTable, dynamicStyleTables, providedParams, new Set(runtime
+            .filter(({ source }) => (0, dynamicKey_1.isDefinedArgument)(source))
+            .map(({ param }) => param)));
+        const { style, varGroups, derived } = resolved;
+        const argSources = new Map();
         runtime.forEach(({ param, source }) => {
-            const groups = varGroups.get(param);
-            if (!groups?.length)
-                return;
             const argStart = source.span.start - baseByteOffset;
             const argEnd = source.span.end - baseByteOffset;
-            const argSource = sourceBuffer
-                .subarray(argStart, argEnd)
-                .toString('utf-8');
+            argSources.set(param, sourceBuffer.subarray(argStart, argEnd).toString('utf-8'));
+        });
+        const runtimeSources = runtime.map(({ param }) => ({
+            name: param,
+            argSource: argSources.get(param),
+        }));
+        derived.forEach(({ name, pieces }) => {
+            runtimeSources.push({
+                name,
+                argSource: pieces
+                    .map((piece) => {
+                    if (typeof piece === 'string')
+                        return piece;
+                    const argument = `(${argSources.get(piece.param)})`;
+                    return piece.fallback === undefined
+                        ? argument
+                        : `(${argument} === undefined ? ${piece.fallback} : ${argument})`;
+                })
+                    .join(''),
+            });
+        });
+        const vars = [];
+        runtimeSources.forEach(({ name, argSource }) => {
+            const groups = varGroups.get(name);
+            if (!groups?.length)
+                return;
             const maybeNumber = Number(argSource);
             groups.forEach(({ cssVar, prop, unit, written }) => {
                 let valueExpr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "19.6.1",
+  "version": "19.7.0",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "@swc/core": "1.15.47",
     "lightningcss": "^1.32.0",
     "postcss": "8.5.26",
-    "zss-engine": "2.8.0"
+    "zss-engine": "2.8.2"
   },
   "publishConfig": {
     "access": "public",