@plumeria/turbopack-loader 18.4.0 → 18.4.2

package/dist/index.js

@@ -105,87 +105,37 @@ const componentFunctionOf = (node) => {
     }
     return undefined;
 };
+const unwrapPatternDefault = (pattern) => pattern?.type === 'AssignmentPattern' ? pattern.left : pattern;
+const destructuredPropAliases = (fn) => {
+    const aliases = new Map();
+    const first = fn.params[0];
+    const pattern = unwrapPatternDefault(first?.pat ?? first);
+    if (pattern?.type !== 'ObjectPattern')
+        return aliases;
+    for (const item of pattern.properties ?? []) {
+        if (item.type !== 'KeyValuePatternProperty')
+            continue;
+        const local = unwrapPatternDefault(item.value);
+        const key = item.key;
+        if (!utils_1.t.isIdentifier(local))
+            continue;
+        if (!utils_1.t.isIdentifier(key) && !utils_1.t.isStringLiteral(key))
+            continue;
+        const name = String(key.value);
+        if (name !== local.value)
+            aliases.set(local.value, name);
+    }
+    return aliases;
+};
 const isStaticArgValue = (node) => node.type === 'StringLiteral' ||
     node.type === 'NumericLiteral' ||
     node.type === 'BooleanLiteral' ||
     (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 isNoOpStyle = (node) => utils_1.t.isNullLiteral(node) ||
+    (utils_1.t.isBooleanLiteral(node) && node.value === false) ||
+    (utils_1.t.isIdentifier(node) && node.value === 'undefined');
 const foldDynamicVars = (vars) => {
     const grouped = new Map();
     [...vars]
@@ -207,59 +157,6 @@ 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);
-        }
-    }
-};
 async function loader(source) {
     const callback = this.async();
     const loaderOptions = this.getOptions?.() ??
@@ -365,18 +262,22 @@ async function loader(source) {
             }
         }
         const components = [];
+        const propAliases = new Map();
+        const addComponent = (name, fn) => {
+            components.push({ name, node: fn });
+            const aliases = destructuredPropAliases(fn);
+            if (aliases.size > 0)
+                propAliases.set(name, aliases);
+        };
         for (const node of ast.body) {
             const statement = unwrapExport(node);
             if (isFunctionNode(statement)) {
-                components.push({
-                    name: statement.identifier?.value ?? 'default',
-                    node: statement,
-                });
+                addComponent(statement.identifier?.value ?? 'default', statement);
             }
             else if (statement?.type === 'CallExpression') {
                 const fn = componentFunctionOf(statement);
                 if (fn)
-                    components.push({ name: 'default', node: fn });
+                    addComponent('default', fn);
             }
             else if (utils_1.t.isVariableDeclaration(statement)) {
                 for (const decl of statement.declarations) {
@@ -384,7 +285,7 @@ async function loader(source) {
                         continue;
                     const fn = componentFunctionOf(decl.init);
                     if (fn)
-                        components.push({ name: decl.id.value, node: fn });
+                        addComponent(decl.id.value, fn);
                 }
             }
         }
@@ -484,7 +385,7 @@ async function loader(source) {
                                     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] =
@@ -584,6 +485,16 @@ async function loader(source) {
         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) => {
@@ -644,7 +555,7 @@ async function loader(source) {
                             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);
                         }
@@ -983,7 +894,16 @@ async function loader(source) {
             }
             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;
@@ -1027,7 +947,9 @@ async function loader(source) {
                         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 });
@@ -1035,6 +957,8 @@ async function loader(source) {
             }
             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)
@@ -1049,39 +973,10 @@ async function loader(source) {
                     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);
@@ -1104,7 +999,7 @@ async function loader(source) {
                         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}))`;
                     }
@@ -1122,6 +1017,7 @@ async function loader(source) {
             });
             const conditionals = [];
             const dynamicVars = [];
+            const propVarSpreads = [];
             let groupIdCounter = 0;
             let sourceOrder = 0;
             const baseChunks = [];
@@ -1238,6 +1134,8 @@ async function loader(source) {
                 return buildDecision(node, prefix, off, { n: 0 }, scoped);
             };
             const collectConditions = (node, currentTestStrings = [], argOrder) => {
+                if (isNoOpStyle(node))
+                    return true;
                 let branchStyle = resolveStyleObject(node);
                 if (!branchStyle) {
                     const dynamic = resolveDynamicCall(node);
@@ -1317,17 +1215,20 @@ async function loader(source) {
                     ? expr.value
                     : expr.property.value;
                 const source = utils_1.t.isIdentifier(expr) ? varName : getSource(expr);
-                markStylePropApplied(varName, expr);
                 const owner = ownerComponentOf(expr);
+                const propName = (utils_1.t.isIdentifier(expr) && owner
+                    ? propAliases.get(owner)?.get(varName)
+                    : undefined) ?? varName;
+                markStylePropApplied(propName, expr);
                 let possibilities = owner
-                    ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[varName]
+                    ? scannedTables.componentPropsTable?.[`${resourcePath}-${owner}`]?.[propName]
                     : undefined;
                 if (!possibilities) {
                     const candidates = [];
                     for (const key of Object.keys(scannedTables.componentPropsTable || {})) {
                         if (!key.startsWith(`${resourcePath}-`))
                             continue;
-                        const entries = scannedTables.componentPropsTable?.[key]?.[varName];
+                        const entries = scannedTables.componentPropsTable?.[key]?.[propName];
                         if (entries)
                             candidates.push(...entries);
                     }
@@ -1336,9 +1237,23 @@ async function loader(source) {
                 }
                 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();
@@ -1368,6 +1283,8 @@ async function loader(source) {
             };
             for (const arg of args) {
                 const expr = arg.expression;
+                if (isNoOpStyle(expr))
+                    continue;
                 if (pushPropPossibilities(expr, []))
                     continue;
                 if (utils_1.t.isCallExpression(expr) && utils_1.t.isIdentifier(expr.callee)) {
@@ -1577,6 +1494,7 @@ async function loader(source) {
                     isOptimizable,
                     baseStyle,
                     dynamicVars,
+                    propVarSpreads,
                 };
             }
             const stateSources = baseChunks.map(({ order, style }) => ({ order, style: style }));
@@ -1832,7 +1750,13 @@ async function loader(source) {
                 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 }) {
@@ -2033,14 +1957,40 @@ async function loader(source) {
                             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;
@@ -2058,6 +2008,11 @@ async function loader(source) {
                                         excludeSubtreeSpans(subNode);
                                     }
                                 },
+                                CallExpression({ node: subNode }) {
+                                    if (replaceWithKey(subNode)) {
+                                        excludeSubtreeSpans(subNode);
+                                    }
+                                },
                             });
                         }
                     }
@@ -2133,10 +2088,11 @@ async function loader(source) {
                         }
                     }
                 }
-                const { classParts, isOptimizable, baseStyle, dynamicVars } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
+                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(', ')} }}`
@@ -2153,10 +2109,13 @@ async function loader(source) {
                     });
                 }
                 else {
+                    const keptClass = existingClassExpr
+                        ? `className={${existingClassExpr}}`
+                        : '';
                     replacements.push({
                         start: node.span.start - baseByteOffset,
                         end: node.span.end - baseByteOffset,
-                        content: styleAttr || '',
+                        content: `${keptClass}${styleAttr}`,
                     });
                 }
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/turbopack-loader",
-  "version": "18.4.0",
+  "version": "18.4.2",
   "description": "Plumeria Turbopack-loader",
   "author": "Refirst 11",
   "license": "MIT",
@@ -29,8 +29,8 @@
     "zero-virtual.css"
   ],
   "dependencies": {
-    "@plumeria/compiler": "^18.4.0",
-    "@plumeria/utils": "^18.4.0"
+    "@plumeria/compiler": "^18.4.2",
+    "@plumeria/utils": "^18.4.2"
   },
   "devDependencies": {
     "@swc/core": "1.15.47",