@plumeria/unplugin 18.3.18 → 18.4.1

package/README.md

@@ -156,6 +156,10 @@ plumeria.vite({
 | `exclude` | — | Files to skip. |
 | `devEmitToDisk` | `false` | Write CSS to disk in development so the bundler's watcher drives HMR. |
 | `styleProp` | `'classStyle'` | The JSX prop that carries styles. |
+| `withoutLogicalProperties` | `false` | Reject the logical name of a property that also has a physical name. Takes `true` or `{ sizes?: boolean }`. |
+| `withoutPhysicalProperties` | `false` | Reject the physical name of a property that also has a logical name. Takes `true` or `{ sizes?: boolean }`. |
+
+The two spelling options contradict each other, so enabling both is a configuration error. See [the docs](https://plumeria.dev/docs/api-reference/plugins/unplugin) for why the pair has to be settled and how it lines up with the lint rules.
 
 ### styleProp
 

package/dist/core.d.ts

@@ -1,5 +1,6 @@
 import type { UnpluginFactory } from 'unplugin';
-export interface PluginOptions {
+import type { PropertyPolicyOptions } from '@plumeria/utils';
+export interface PluginOptions extends PropertyPolicyOptions {
     include?: string | RegExp | Array<string | RegExp>;
     exclude?: string | RegExp | Array<string | RegExp>;
     devEmitToDisk?: boolean;

package/dist/core.js

@@ -71,81 +71,6 @@ 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)) {
-            const pattern = prop.value;
-            named.push({ key: String(prop.key.value), local: pattern.left.value });
-            defaults[pattern.left.value] = pattern.right;
-        }
-        else {
-            return undefined;
-        }
-    }
-    return named.length > 0 ? named : undefined;
-};
-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 foldDynamicVars = (vars) => {
     const grouped = new Map();
     [...vars]
@@ -167,61 +92,9 @@ const foldDynamicVars = (vars) => {
         return `"${cssVar}": ${value}`;
     });
 };
-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 unpluginFactory = (options = {}, unpluginMeta) => {
     const filter = (0, pluginutils_1.createFilter)(options.include, options.exclude);
+    const propertyPolicy = (0, utils_1.resolvePropertyPolicy)(options);
     const styleProp = options.styleProp ?? utils_1.DEFAULT_STYLE_PROP;
     const cssLookup = new Map();
     const cssFileLookup = new Map();
@@ -291,6 +164,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 tsx: true,
                 target: 'es2022',
             });
+            (0, utils_1.assertPropertyPolicy)(ast, propertyPolicy, id);
             const leadingLen = (0, utils_1.getLeadingCommentLength)(source);
             const sourceBuffer = Buffer.from(source, 'utf-8');
             const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
@@ -491,7 +365,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                         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] =
@@ -592,6 +466,16 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
             for (const key of Object.keys(createStaticImportMap)) {
                 mergedCreateStaticHashTable[key] = createStaticImportMap[key];
             }
+            const dynamicStyleTables = {
+                keyframesHashTable: mergedKeyframesTable,
+                viewTransitionHashTable: mergedViewTransitionTable,
+                createThemeHashTable: mergedCreateThemeHashTable,
+                createThemeObjectTable: scannedTables.createThemeObjectTable,
+                createHashTable: mergedCreateTable,
+                createStaticHashTable: mergedCreateStaticHashTable,
+                createStaticObjectTable: scannedTables.createStaticObjectTable,
+                variantsHashTable: mergedVariantsTable,
+            };
             const localCreateStyles = {};
             const localStyleAliases = {};
             const checkStyleAliasAssignment = (decl) => {
@@ -652,7 +536,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                 records.forEach((r) => (atomMap[r.key] = r.hash));
                                 hashMap[key] = atomMap;
                             });
-                            const styleFunctions = styleFunctionsOf(init.arguments[0].expression);
+                            const styleFunctions = (0, utils_1.styleFunctionsOf)(init.arguments[0].expression);
                             if (utils_1.t.isIdentifier(node.id)) {
                                 idSpans.add(node.id.span.start);
                             }
@@ -993,7 +877,16 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 }
                 return null;
             };
-            const resolveDynamicCall = (expr) => {
+            const isStyleFunctionCall = (expr) => {
+                if (!utils_1.t.isCallExpression(expr) || !utils_1.t.isMemberExpression(expr.callee))
+                    return false;
+                const callee = expr.callee;
+                if (!utils_1.t.isIdentifier(callee.object) || !utils_1.t.isIdentifier(callee.property))
+                    return false;
+                return Boolean(localCreateStyles[callee.object.value]?.functions?.[callee.property.value] ??
+                    createFunctionImportMap[callee.object.value]?.[callee.property.value]);
+            };
+            const resolveDynamicCall = (expr, forceRuntime = false) => {
                 if (!utils_1.t.isCallExpression(expr) || !utils_1.t.isMemberExpression(expr.callee))
                     return null;
                 const callee = expr.callee;
@@ -1037,7 +930,9 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                             throwCompilationError(`Plumeria: ${getSource(expr)} leaves "${key}" unset, and a dynamic style function has no value to fall back on.`, expr);
                             return;
                         }
-                        if (isStaticArgValue(source) && argObj[key] !== undefined)
+                        if (!forceRuntime &&
+                            isStaticArgValue(source) &&
+                            argObj[key] !== undefined)
                             tempStaticTable[local] = argObj[key];
                         else
                             runtime.push({ param: local, source });
@@ -1045,6 +940,8 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 }
                 else if (callArgs.length === 1 &&
                     callArgs[0].expression.type === 'ObjectExpression') {
+                    if (forceRuntime)
+                        return null;
                     const argObj = resolveObjectArg(callArgs[0].expression) ?? {};
                     func.params.forEach((p) => {
                         if (argObj[p] !== undefined)
@@ -1059,39 +956,10 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                         runtime.push({ param: p, source: callArg.expression });
                     });
                 }
-                const withDefault = Object.entries(func.defaults ?? {}).filter(([param]) => tempStaticTable[param] === undefined);
-                const cssVars = {};
-                const varParams = Array.from(new Set([
-                    ...runtime.map(({ param }) => param),
-                    ...withDefault.map(([param]) => param),
-                ]));
-                if (varParams.length > 0) {
-                    varParams.forEach((param) => (tempStaticTable[param] = param));
-                    const probe = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                    const hash = (0, zss_engine_1.genBase36Hash)(probe ?? {}, 1, 8);
-                    varParams.forEach((param) => {
-                        const cssVar = `--${hash}-${param}`;
-                        tempStaticTable[param] = `var(${cssVar})`;
-                        cssVars[param] = cssVar;
-                    });
-                }
-                const style = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                if (!style)
+                const resolved = (0, utils_1.resolveDynamicStyle)(func, runtime.map(({ param }) => param), tempStaticTable, dynamicStyleTables);
+                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, varGroups } = resolved;
                 const vars = [];
                 runtime.forEach(({ param, source }) => {
                     const groups = varGroups.get(param);
@@ -1115,7 +983,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                             valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), kebabProp));
                         }
                         else {
-                            valueExpr = isUnitlessProp(prop)
+                            valueExpr = (0, utils_1.isUnitlessProp)(prop)
                                 ? argSource
                                 : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
                         }
@@ -1133,6 +1001,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 });
                 const conditionals = [];
                 const dynamicVars = [];
+                const propVarSpreads = [];
                 let groupIdCounter = 0;
                 let sourceOrder = 0;
                 const baseChunks = [];
@@ -1351,9 +1220,23 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     }
                     if (!possibilities || possibilities.length === 0)
                         return false;
-                    const testLHS = gates.length
-                        ? `((${gates.join(' && ')}) ? ${source} : "")`
+                    const carriesVars = possibilities.some((entry) => entry.hasVars);
+                    if (carriesVars && !isStyleProp) {
+                        throwCompilationError(`Plumeria: "${varName}" carries a dynamic function key, and css.use() returns only a class name. ` +
+                            `Apply it to ${styleProp} on the element instead.`, expr);
+                    }
+                    const gate = gates.length ? `(${gates.join(' && ')}) && ` : '';
+                    if (carriesVars) {
+                        const spread = `...(${gate}${source} && ${source}.vars)`;
+                        if (!propVarSpreads.includes(spread))
+                            propVarSpreads.push(spread);
+                    }
+                    const token = carriesVars
+                        ? `((${source} && ${source}.key) || ${source})`
                         : source;
+                    const testLHS = gates.length
+                        ? `((${gates.join(' && ')}) ? ${token} : "")`
+                        : token;
                     const currentGroupId = ++groupIdCounter;
                     const currentOrder = sourceOrder++;
                     const seen = new Set();
@@ -1592,6 +1475,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                         isOptimizable,
                         baseStyle,
                         dynamicVars,
+                        propVarSpreads,
                     };
                 }
                 const stateSources = baseChunks.map(({ order, style }) => ({ order, style: style }));
@@ -1847,7 +1731,13 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                     classParts.push(`(${JSON.stringify(results)}[${masterKeyExpr || '""'}] || ${baseConflictClass ? JSON.stringify(baseConflictClass) : '""'})`);
                 }
                 classParts.push(...dynamicClassParts);
-                return { classParts, isOptimizable, baseStyle, dynamicVars };
+                return {
+                    classParts,
+                    isOptimizable,
+                    baseStyle,
+                    dynamicVars,
+                    propVarSpreads,
+                };
             };
             (0, utils_1.traverse)(ast, {
                 JSXOpeningElement({ node }) {
@@ -2048,14 +1938,40 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                 node.value &&
                                 node.value.type === 'JSXExpressionContainer') {
                                 const expr = node.value.expression;
+                                const carrierFor = (subNode) => {
+                                    const vars = [];
+                                    let unresolved = false;
+                                    (0, utils_1.traverse)(subNode, {
+                                        CallExpression({ node: call }) {
+                                            if (!isStyleFunctionCall(call))
+                                                return;
+                                            const resolved = resolveDynamicCall(call, true);
+                                            if (!resolved) {
+                                                unresolved = true;
+                                                return;
+                                            }
+                                            vars.push(...resolved.vars);
+                                        },
+                                    });
+                                    if (unresolved)
+                                        return null;
+                                    return `{ ${foldDynamicVars(vars).join(', ')} }`;
+                                };
                                 const replaceWithKey = (subNode) => {
                                     const entry = list.find((x) => x.spanStart === subNode.span.start &&
                                         x.filePath === resourcePath);
                                     if (entry) {
+                                        let content = JSON.stringify(entry.key);
+                                        if (entry.hasVars) {
+                                            const carrier = carrierFor(subNode);
+                                            if (!carrier)
+                                                return false;
+                                            content = `{ key: ${content}, vars: ${carrier} }`;
+                                        }
                                         replacements.push({
                                             start: subNode.span.start - baseByteOffset,
                                             end: subNode.span.end - baseByteOffset,
-                                            content: JSON.stringify(entry.key),
+                                            content,
                                         });
                                         processStyleRecords(entry.styleObj);
                                         return true;
@@ -2073,6 +1989,11 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                                             excludeSubtreeSpans(subNode);
                                         }
                                     },
+                                    CallExpression({ node: subNode }) {
+                                        if (replaceWithKey(subNode)) {
+                                            excludeSubtreeSpans(subNode);
+                                        }
+                                    },
                                 });
                             }
                         }
@@ -2148,9 +2069,12 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                             }
                         }
                     }
-                    const { classParts, isOptimizable, baseStyle, dynamicVars } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
-                    const dynamicStyleParts = foldDynamicVars(dynamicVars);
-                    const styleParts = [...existingStyleParts, ...dynamicStyleParts];
+                    const { classParts, isOptimizable, baseStyle, dynamicVars, propVarSpreads, } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
+                    const styleParts = [
+                        ...existingStyleParts,
+                        ...foldDynamicVars(dynamicVars),
+                        ...propVarSpreads,
+                    ];
                     const styleAttr = styleParts.length > 0 || existingStyleExpr
                         ? ` style={{ ${[existingStyleExpr, ...styleParts].filter(Boolean).join(', ')} }}`
                         : '';

package/dist/core.mjs

@@ -1,8 +1,8 @@
 import { createFilter } from '@rollup/pluginutils';
 import { parseSync } from '@swc/core';
 import * as path from 'path';
-import { applyCssValue, genBase36Hash, exceptionCamelCase, camelToKebabCase, isAtRule, } from 'zss-engine';
-import { traverse, collectReferenceIdentifiers, getStyleRecords, getStateWeights, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveFileError, resolveImportPath, getLeadingCommentLength, optimizer, themeHashOf, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
+import { applyCssValue, genBase36Hash, camelToKebabCase, isAtRule, } from 'zss-engine';
+import { traverse, resolvePropertyPolicy, assertPropertyPolicy, collectReferenceIdentifiers, getStyleRecords, getStateWeights, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveFileError, resolveImportPath, getLeadingCommentLength, optimizer, styleFunctionsOf, isUnitlessProp, resolveDynamicStyle, themeHashOf, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
 export const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
 export const EXTENSION_PATTERN = /\.(ts|tsx|js|jsx)$/;
 const unwrapExport = (node) => {
@@ -35,81 +35,6 @@ const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
     (node.type === 'TemplateLiteral' && node.expressions.length === 0) ||
     t.isIdentifier(node) ||
     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' && 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' &&
-            t.isIdentifier(prop.key) &&
-            t.isIdentifier(prop.value)) {
-            named.push({ key: prop.key.value, local: prop.value.value });
-        }
-        else if (prop.type === 'KeyValuePatternProperty' &&
-            t.isIdentifier(prop.key) &&
-            prop.value?.type === 'AssignmentPattern' &&
-            t.isIdentifier(prop.value.left)) {
-            const pattern = prop.value;
-            named.push({ key: String(prop.key.value), local: pattern.left.value });
-            defaults[pattern.left.value] = pattern.right;
-        }
-        else {
-            return undefined;
-        }
-    }
-    return named.length > 0 ? named : undefined;
-};
-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 (t.isIdentifier(pattern))
-                return pattern.value;
-            if (pattern?.type === 'AssignmentPattern' &&
-                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 foldDynamicVars = (vars) => {
     const grouped = new Map();
     [...vars]
@@ -131,61 +56,9 @@ const foldDynamicVars = (vars) => {
         return `"${cssVar}": ${value}`;
     });
 };
-const isUnitlessProp = (prop) => 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}-${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}, ${applyCssValue(literal, camelToKebabCase(prop))})`);
-        }
-        else if (value !== null && typeof value === 'object') {
-            applyVarFallback(value, cssVar, literal);
-        }
-    }
-};
 export const unpluginFactory = (options = {}, unpluginMeta) => {
     const filter = createFilter(options.include, options.exclude);
+    const propertyPolicy = resolvePropertyPolicy(options);
     const styleProp = options.styleProp ?? DEFAULT_STYLE_PROP;
     const cssLookup = new Map();
     const cssFileLookup = new Map();
@@ -255,6 +128,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 tsx: true,
                 target: 'es2022',
             });
+            assertPropertyPolicy(ast, propertyPolicy, id);
             const leadingLen = getLeadingCommentLength(source);
             const sourceBuffer = Buffer.from(source, 'utf-8');
             const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
@@ -556,6 +430,16 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
             for (const key of Object.keys(createStaticImportMap)) {
                 mergedCreateStaticHashTable[key] = createStaticImportMap[key];
             }
+            const dynamicStyleTables = {
+                keyframesHashTable: mergedKeyframesTable,
+                viewTransitionHashTable: mergedViewTransitionTable,
+                createThemeHashTable: mergedCreateThemeHashTable,
+                createThemeObjectTable: scannedTables.createThemeObjectTable,
+                createHashTable: mergedCreateTable,
+                createStaticHashTable: mergedCreateStaticHashTable,
+                createStaticObjectTable: scannedTables.createStaticObjectTable,
+                variantsHashTable: mergedVariantsTable,
+            };
             const localCreateStyles = {};
             const localStyleAliases = {};
             const checkStyleAliasAssignment = (decl) => {
@@ -957,7 +841,16 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 }
                 return null;
             };
-            const resolveDynamicCall = (expr) => {
+            const isStyleFunctionCall = (expr) => {
+                if (!t.isCallExpression(expr) || !t.isMemberExpression(expr.callee))
+                    return false;
+                const callee = expr.callee;
+                if (!t.isIdentifier(callee.object) || !t.isIdentifier(callee.property))
+                    return false;
+                return Boolean(localCreateStyles[callee.object.value]?.functions?.[callee.property.value] ??
+                    createFunctionImportMap[callee.object.value]?.[callee.property.value]);
+            };
+            const resolveDynamicCall = (expr, forceRuntime = false) => {
                 if (!t.isCallExpression(expr) || !t.isMemberExpression(expr.callee))
                     return null;
                 const callee = expr.callee;
@@ -1001,7 +894,9 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                             throwCompilationError(`Plumeria: ${getSource(expr)} leaves "${key}" unset, and a dynamic style function has no value to fall back on.`, expr);
                             return;
                         }
-                        if (isStaticArgValue(source) && argObj[key] !== undefined)
+                        if (!forceRuntime &&
+                            isStaticArgValue(source) &&
+                            argObj[key] !== undefined)
                             tempStaticTable[local] = argObj[key];
                         else
                             runtime.push({ param: local, source });
@@ -1009,6 +904,8 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 }
                 else if (callArgs.length === 1 &&
                     callArgs[0].expression.type === 'ObjectExpression') {
+                    if (forceRuntime)
+                        return null;
                     const argObj = resolveObjectArg(callArgs[0].expression) ?? {};
                     func.params.forEach((p) => {
                         if (argObj[p] !== undefined)
@@ -1023,39 +920,10 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                         runtime.push({ param: p, source: callArg.expression });
                     });
                 }
-                const withDefault = Object.entries(func.defaults ?? {}).filter(([param]) => tempStaticTable[param] === undefined);
-                const cssVars = {};
-                const varParams = Array.from(new Set([
-                    ...runtime.map(({ param }) => param),
-                    ...withDefault.map(([param]) => param),
-                ]));
-                if (varParams.length > 0) {
-                    varParams.forEach((param) => (tempStaticTable[param] = param));
-                    const probe = objectExpressionToObject(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                    const hash = genBase36Hash(probe ?? {}, 1, 8);
-                    varParams.forEach((param) => {
-                        const cssVar = `--${hash}-${param}`;
-                        tempStaticTable[param] = `var(${cssVar})`;
-                        cssVars[param] = cssVar;
-                    });
-                }
-                const style = objectExpressionToObject(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                if (!style)
+                const resolved = resolveDynamicStyle(func, runtime.map(({ param }) => param), tempStaticTable, dynamicStyleTables);
+                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, varGroups } = resolved;
                 const vars = [];
                 runtime.forEach(({ param, source }) => {
                     const groups = varGroups.get(param);
@@ -1097,6 +965,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 });
                 const conditionals = [];
                 const dynamicVars = [];
+                const propVarSpreads = [];
                 let groupIdCounter = 0;
                 let sourceOrder = 0;
                 const baseChunks = [];
@@ -1315,9 +1184,23 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     }
                     if (!possibilities || possibilities.length === 0)
                         return false;
-                    const testLHS = gates.length
-                        ? `((${gates.join(' && ')}) ? ${source} : "")`
+                    const carriesVars = possibilities.some((entry) => entry.hasVars);
+                    if (carriesVars && !isStyleProp) {
+                        throwCompilationError(`Plumeria: "${varName}" carries a dynamic function key, and css.use() returns only a class name. ` +
+                            `Apply it to ${styleProp} on the element instead.`, expr);
+                    }
+                    const gate = gates.length ? `(${gates.join(' && ')}) && ` : '';
+                    if (carriesVars) {
+                        const spread = `...(${gate}${source} && ${source}.vars)`;
+                        if (!propVarSpreads.includes(spread))
+                            propVarSpreads.push(spread);
+                    }
+                    const token = carriesVars
+                        ? `((${source} && ${source}.key) || ${source})`
                         : source;
+                    const testLHS = gates.length
+                        ? `((${gates.join(' && ')}) ? ${token} : "")`
+                        : token;
                     const currentGroupId = ++groupIdCounter;
                     const currentOrder = sourceOrder++;
                     const seen = new Set();
@@ -1556,6 +1439,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                         isOptimizable,
                         baseStyle,
                         dynamicVars,
+                        propVarSpreads,
                     };
                 }
                 const stateSources = baseChunks.map(({ order, style }) => ({ order, style: style }));
@@ -1811,7 +1695,13 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                     classParts.push(`(${JSON.stringify(results)}[${masterKeyExpr || '""'}] || ${baseConflictClass ? JSON.stringify(baseConflictClass) : '""'})`);
                 }
                 classParts.push(...dynamicClassParts);
-                return { classParts, isOptimizable, baseStyle, dynamicVars };
+                return {
+                    classParts,
+                    isOptimizable,
+                    baseStyle,
+                    dynamicVars,
+                    propVarSpreads,
+                };
             };
             traverse(ast, {
                 JSXOpeningElement({ node }) {
@@ -2012,14 +1902,40 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                                 node.value &&
                                 node.value.type === 'JSXExpressionContainer') {
                                 const expr = node.value.expression;
+                                const carrierFor = (subNode) => {
+                                    const vars = [];
+                                    let unresolved = false;
+                                    traverse(subNode, {
+                                        CallExpression({ node: call }) {
+                                            if (!isStyleFunctionCall(call))
+                                                return;
+                                            const resolved = resolveDynamicCall(call, true);
+                                            if (!resolved) {
+                                                unresolved = true;
+                                                return;
+                                            }
+                                            vars.push(...resolved.vars);
+                                        },
+                                    });
+                                    if (unresolved)
+                                        return null;
+                                    return `{ ${foldDynamicVars(vars).join(', ')} }`;
+                                };
                                 const replaceWithKey = (subNode) => {
                                     const entry = list.find((x) => x.spanStart === subNode.span.start &&
                                         x.filePath === resourcePath);
                                     if (entry) {
+                                        let content = JSON.stringify(entry.key);
+                                        if (entry.hasVars) {
+                                            const carrier = carrierFor(subNode);
+                                            if (!carrier)
+                                                return false;
+                                            content = `{ key: ${content}, vars: ${carrier} }`;
+                                        }
                                         replacements.push({
                                             start: subNode.span.start - baseByteOffset,
                                             end: subNode.span.end - baseByteOffset,
-                                            content: JSON.stringify(entry.key),
+                                            content,
                                         });
                                         processStyleRecords(entry.styleObj);
                                         return true;
@@ -2037,6 +1953,11 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                                             excludeSubtreeSpans(subNode);
                                         }
                                     },
+                                    CallExpression({ node: subNode }) {
+                                        if (replaceWithKey(subNode)) {
+                                            excludeSubtreeSpans(subNode);
+                                        }
+                                    },
                                 });
                             }
                         }
@@ -2112,9 +2033,12 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                             }
                         }
                     }
-                    const { classParts, isOptimizable, baseStyle, dynamicVars } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
-                    const dynamicStyleParts = foldDynamicVars(dynamicVars);
-                    const styleParts = [...existingStyleParts, ...dynamicStyleParts];
+                    const { classParts, isOptimizable, baseStyle, dynamicVars, propVarSpreads, } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
+                    const styleParts = [
+                        ...existingStyleParts,
+                        ...foldDynamicVars(dynamicVars),
+                        ...propVarSpreads,
+                    ];
                     const styleAttr = styleParts.length > 0 || existingStyleExpr
                         ? ` style={{ ${[existingStyleExpr, ...styleParts].filter(Boolean).join(', ')} }}`
                         : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/unplugin",
-  "version": "18.3.18",
+  "version": "18.4.1",
   "description": "Universal Plumeria plugin for various build tools",
   "author": "Refirst 11",
   "license": "MIT",
@@ -94,12 +94,12 @@
   "dependencies": {
     "@rollup/pluginutils": "^5.4.0",
     "unplugin": "^3.0.0",
-    "@plumeria/utils": "^18.3.18"
+    "@plumeria/utils": "^18.4.1"
   },
   "devDependencies": {
     "@swc/core": "1.15.47",
     "vite": "^8.0.13",
-    "zss-engine": "2.7.0"
+    "zss-engine": "2.8.0"
   },
   "publishConfig": {
     "access": "public",