@plumeria/turbopack-loader 18.1.5 → 18.1.6

package/dist/index.js

@@ -79,6 +79,70 @@ const ensureProductionCss = (virtualFilePath, options) => {
     }
     return productionCss;
 };
+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) => {
+    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) &&
+            !prop.value) {
+            named.push({ key: prop.key.value, local: prop.key.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 {
+            return undefined;
+        }
+    }
+    return named.length > 0 ? named : undefined;
+};
+const foldDynamicVars = (vars) => {
+    const grouped = new Map();
+    [...vars]
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+        .forEach((entry) => {
+        const list = grouped.get(entry.cssVar);
+        if (list)
+            list.push(entry);
+        else
+            grouped.set(entry.cssVar, [entry]);
+    });
+    return [...grouped].map(([cssVar, entries]) => {
+        let value = 'undefined';
+        entries.forEach((entry) => {
+            value = entry.test
+                ? `((${entry.test}) ? ${entry.valueExpr} : ${value})`
+                : entry.valueExpr;
+        });
+        return `"${cssVar}": ${value}`;
+    });
+};
+const findVarProp = (style, cssVar) => {
+    for (const [prop, value] of Object.entries(style)) {
+        if (typeof value === 'string' && value.includes(cssVar))
+            return prop;
+        if (value !== null && typeof value === 'object') {
+            const nested = findVarProp(value, cssVar);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
 async function loader(source) {
     const callback = this.async();
     const loaderOptions = this.getOptions?.() ??
@@ -372,6 +436,7 @@ async function loader(source) {
             }
         };
         const replacements = [];
+        const dynamicFnCalls = [];
         const processedDecls = new Set();
         const idSpans = new Set();
         const excludedSpans = new Set();
@@ -449,6 +514,7 @@ async function loader(source) {
                             if (actualBody && actualBody.type === 'ObjectExpression') {
                                 styleFunctions[prop.key.value] = {
                                     params,
+                                    named: namedParamsOf(func.params),
                                     body: actualBody,
                                 };
                             }
@@ -787,7 +853,110 @@ async function loader(source) {
             }
             return null;
         };
-        const buildClassParts = (args, dynamicClassParts = [], existingClass = '') => {
+        const resolveDynamicCall = (expr) => {
+            if (!utils_1.t.isCallExpression(expr) || !utils_1.t.isMemberExpression(expr.callee))
+                return null;
+            const callee = expr.callee;
+            if (!utils_1.t.isIdentifier(callee.object) || !utils_1.t.isIdentifier(callee.property))
+                return null;
+            const styleInfo = localCreateStyles[callee.object.value];
+            const func = styleInfo?.functions?.[callee.property.value];
+            if (!func)
+                return null;
+            const callArgs = expr.arguments;
+            if (callArgs.some((a) => a.spread) || callArgs.length === 0)
+                return null;
+            const tempStaticTable = { ...mergedStaticTable };
+            const runtime = [];
+            const resolveObjectArg = (argExpr) => (0, utils_1.objectExpressionToObject)(argExpr, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
+            if (func.named) {
+                const argExpr = callArgs[0].expression;
+                if (callArgs.length !== 1 || argExpr.type !== 'ObjectExpression') {
+                    throwCompilationError(`Plumeria: ${getSource(expr)} takes one object argument, because ${callee.property.value} destructures its parameter.`, expr);
+                }
+                const given = new Map();
+                argExpr.properties.forEach((prop) => {
+                    if (prop.type === 'Identifier') {
+                        given.set(prop.value, prop);
+                    }
+                    else if (prop.type === 'KeyValueProperty' &&
+                        (utils_1.t.isIdentifier(prop.key) || utils_1.t.isStringLiteral(prop.key))) {
+                        given.set(String(prop.key.value), prop.value);
+                    }
+                });
+                const argObj = resolveObjectArg(argExpr) ?? {};
+                func.named.forEach(({ key, local }) => {
+                    const source = given.get(key);
+                    if (!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)
+                        tempStaticTable[local] = argObj[key];
+                    else
+                        runtime.push({ param: local, source });
+                });
+            }
+            else if (callArgs.length === 1 &&
+                callArgs[0].expression.type === 'ObjectExpression') {
+                const argObj = resolveObjectArg(callArgs[0].expression) ?? {};
+                func.params.forEach((p) => {
+                    if (argObj[p] !== undefined)
+                        tempStaticTable[p] = argObj[p];
+                });
+            }
+            else {
+                callArgs.forEach((callArg, i) => {
+                    const p = func.params[i];
+                    if (!p)
+                        return;
+                    runtime.push({ param: p, source: callArg.expression });
+                });
+            }
+            const cssVars = {};
+            if (runtime.length > 0) {
+                runtime.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);
+                runtime.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)
+                return null;
+            const vars = [];
+            runtime.forEach(({ param, source }) => {
+                const cssVar = cssVars[param];
+                const targetProp = cssVar ? findVarProp(style, cssVar) : undefined;
+                if (!targetProp)
+                    return;
+                const argStart = source.span.start - baseByteOffset;
+                const argEnd = source.span.end - baseByteOffset;
+                const argSource = sourceBuffer
+                    .subarray(argStart, argEnd)
+                    .toString('utf-8');
+                let valueExpr;
+                const maybeNumber = Number(argSource);
+                if (!isNaN(maybeNumber) && argSource.trim() === String(maybeNumber)) {
+                    valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, targetProp));
+                }
+                else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
+                    (argSource.startsWith("'") && argSource.endsWith("'"))) {
+                    valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), targetProp));
+                }
+                else {
+                    valueExpr = zss_engine_1.exceptionCamelCase.includes(targetProp)
+                        ? argSource
+                        : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
+                }
+                vars.push({ cssVar, valueExpr });
+            });
+            return { style, vars };
+        };
+        const buildClassParts = (args, dynamicClassParts = [], existingClass = '', isStyleProp = false) => {
             args.forEach((arg) => {
                 const expr = arg.expression;
                 if (utils_1.t.isIdentifier(expr) && localStyleAliases[expr.value]) {
@@ -795,6 +964,7 @@ async function loader(source) {
                 }
             });
             const conditionals = [];
+            const dynamicVars = [];
             let groupIdCounter = 0;
             let sourceOrder = 0;
             const baseChunks = [];
@@ -910,9 +1080,26 @@ async function loader(source) {
                 const off = !scoped && groupKeys.has('') ? `${prefix}off` : '';
                 return buildDecision(node, prefix, off, { n: 0 }, scoped);
             };
-            const collectConditions = (node, currentTestStrings = []) => {
-                const staticStyle = resolveStyleObject(node);
-                if (staticStyle) {
+            const collectConditions = (node, currentTestStrings = [], argOrder) => {
+                let branchStyle = resolveStyleObject(node);
+                if (!branchStyle) {
+                    const dynamic = resolveDynamicCall(node);
+                    if (dynamic) {
+                        if (!isStyleProp) {
+                            throwCompilationError(`Plumeria: css.use(${getSource(node)}) does not support dynamic function keys.`, node);
+                        }
+                        branchStyle = dynamic.style;
+                        dynamic.vars.forEach((v) => dynamicVars.push({
+                            ...v,
+                            test: currentTestStrings.length
+                                ? currentTestStrings.join(' && ')
+                                : undefined,
+                            order: argOrder,
+                        }));
+                    }
+                }
+                if (branchStyle) {
+                    const staticStyle = branchStyle;
                     if (currentTestStrings.length === 0) {
                         baseStyle = (0, utils_1.deepMerge)(baseStyle, staticStyle);
                         baseChunks.push({ order: sourceOrder++, style: staticStyle });
@@ -946,25 +1133,16 @@ async function loader(source) {
                             return true;
                         }
                     }
-                    collectConditions(node.consequent, [
-                        ...currentTestStrings,
-                        `(${testSource})`,
-                    ]);
-                    collectConditions(node.alternate, [
-                        ...currentTestStrings,
-                        `!(${testSource})`,
-                    ]);
+                    collectConditions(node.consequent, [...currentTestStrings, `(${testSource})`], argOrder);
+                    collectConditions(node.alternate, [...currentTestStrings, `!(${testSource})`], argOrder);
                     return true;
                 }
                 else if (node.type === 'BinaryExpression' && node.operator === '&&') {
-                    collectConditions(node.right, [
-                        ...currentTestStrings,
-                        `(${getSource(node.left)})`,
-                    ]);
+                    collectConditions(node.right, [...currentTestStrings, `(${getSource(node.left)})`], argOrder);
                     return true;
                 }
                 else if (node.type === 'ParenthesisExpression') {
-                    return collectConditions(node.expression, currentTestStrings);
+                    return collectConditions(node.expression, currentTestStrings, argOrder);
                 }
                 assertResolvable(node);
                 return false;
@@ -1209,7 +1387,7 @@ async function loader(source) {
                     }));
                     continue;
                 }
-                const handled = collectConditions(expr);
+                const handled = collectConditions(expr, [], arg.order);
                 if (handled)
                     continue;
                 assertResolvable(expr);
@@ -1218,7 +1396,12 @@ async function loader(source) {
             }
             if (!isOptimizable ||
                 (args.length === 0 && Object.keys(baseStyle).length === 0)) {
-                return { classParts: [...dynamicClassParts], isOptimizable, baseStyle };
+                return {
+                    classParts: [...dynamicClassParts],
+                    isOptimizable,
+                    baseStyle,
+                    dynamicVars,
+                };
             }
             const participation = {};
             const registerParticipation = (style, sourceId) => {
@@ -1466,7 +1649,7 @@ async function loader(source) {
                 classParts.push(`(${JSON.stringify(results)}[${masterKeyExpr || '""'}] || ${baseConflictClass ? JSON.stringify(baseConflictClass) : '""'})`);
             }
             classParts.push(...dynamicClassParts);
-            return { classParts, isOptimizable, baseStyle };
+            return { classParts, isOptimizable, baseStyle, dynamicVars };
         };
         (0, utils_1.traverse)(ast, {
             JSXOpeningElement({ node }) {
@@ -1700,13 +1883,13 @@ async function loader(source) {
                 if (!node.value || node.value.type !== 'JSXExpressionContainer')
                     return;
                 const expr = node.value.expression;
-                let args = expr.type === 'ArrayExpression'
+                const args = expr.type === 'ArrayExpression'
                     ? expr.elements
                         .filter((el) => el !== undefined)
                         .map((el) => ({ expression: el.expression }))
                     : [{ expression: expr }];
                 const dynamicClassParts = [];
-                const dynamicStyleParts = [];
+                const existingStyleParts = [];
                 let attributes = [];
                 for (const [, val] of jsxOpeningElementMap) {
                     const found = val.attributes
@@ -1760,99 +1943,21 @@ async function loader(source) {
                         if (innerExpr.type === 'ObjectExpression') {
                             const stripped = innerSource.slice(1, -1).trim();
                             if (stripped)
-                                dynamicStyleParts.push(stripped);
+                                existingStyleParts.push(stripped);
                         }
                         else {
                             existingStyleExpr = `...(${innerSource})`;
                         }
                     }
                 }
-                args = args.filter((arg) => {
-                    const expr = arg.expression;
-                    if (!utils_1.t.isCallExpression(expr) || !utils_1.t.isMemberExpression(expr.callee))
-                        return true;
-                    const callee = expr.callee;
-                    if (!utils_1.t.isIdentifier(callee.object) ||
-                        !utils_1.t.isIdentifier(callee.property))
-                        return true;
-                    const varName = callee.object.value;
-                    const propKey = callee.property.value;
-                    const styleInfo = localCreateStyles[varName];
-                    if (styleInfo?.functions?.[propKey]) {
-                        const func = styleInfo.functions[propKey];
-                        const callArgs = expr.arguments;
-                        const hasSpread = callArgs.some((a) => a.spread);
-                        if (!hasSpread && callArgs.length >= 1) {
-                            const tempStaticTable = { ...mergedStaticTable };
-                            const cssVarInfo = {};
-                            if (callArgs.length === 1 &&
-                                callArgs[0].expression.type === 'ObjectExpression') {
-                                const argObj = (0, utils_1.objectExpressionToObject)(callArgs[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                                func.params.forEach((p) => {
-                                    if (argObj[p] !== undefined)
-                                        tempStaticTable[p] = argObj[p];
-                                });
-                            }
-                            else {
-                                callArgs.forEach((_callArg, i) => {
-                                    const p = func.params[i];
-                                    if (!p)
-                                        return;
-                                    const cssVar = `--${propKey}-${p}`;
-                                    tempStaticTable[p] = `var(${cssVar})`;
-                                    cssVarInfo[p] = { cssVar, propKey: '' };
-                                });
-                            }
-                            const substituted = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
-                            if (substituted) {
-                                const records = processStyleRecords(substituted);
-                                const hashes = records.map((r) => r.hash).join(' ');
-                                if (hashes)
-                                    dynamicClassParts.push(JSON.stringify(hashes));
-                                if (Object.keys(cssVarInfo).length > 0) {
-                                    Object.entries(cssVarInfo).forEach(([paramName, info]) => {
-                                        const targetProp = Object.keys(substituted).find((k) => typeof substituted[k] === 'string' &&
-                                            substituted[k].includes(info.cssVar));
-                                        if (targetProp) {
-                                            const paramIndex = func.params.indexOf(paramName);
-                                            const srcArg = paramIndex >= 0 && callArgs[paramIndex]
-                                                ? callArgs[paramIndex].expression
-                                                : callArgs[0].expression;
-                                            const argStart = srcArg.span.start - baseByteOffset;
-                                            const argEnd = srcArg.span.end - baseByteOffset;
-                                            const argSource = sourceBuffer
-                                                .subarray(argStart, argEnd)
-                                                .toString('utf-8');
-                                            let valueExpr;
-                                            const maybeNumber = Number(argSource);
-                                            if (!isNaN(maybeNumber) &&
-                                                argSource.trim() === String(maybeNumber)) {
-                                                valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, targetProp));
-                                            }
-                                            else if ((argSource.startsWith('"') &&
-                                                argSource.endsWith('"')) ||
-                                                (argSource.startsWith("'") && argSource.endsWith("'"))) {
-                                                valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), targetProp));
-                                            }
-                                            else {
-                                                valueExpr = zss_engine_1.exceptionCamelCase.includes(targetProp)
-                                                    ? argSource
-                                                    : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
-                                            }
-                                            dynamicStyleParts.push(`"${info.cssVar}": ${valueExpr}`);
-                                        }
-                                    });
-                                }
-                                return false;
-                            }
-                        }
-                    }
-                    return true;
-                });
-                const styleAttr = dynamicStyleParts.length > 0 || existingStyleExpr
-                    ? ` style={{ ${[existingStyleExpr, ...dynamicStyleParts].filter(Boolean).join(', ')} }}`
+                const { classParts, isOptimizable, baseStyle, dynamicVars } = buildClassParts(args, dynamicClassParts, existingClassExpr, true);
+                const styleParts = [
+                    ...existingStyleParts,
+                    ...foldDynamicVars(dynamicVars),
+                ];
+                const styleAttr = styleParts.length > 0 || existingStyleExpr
+                    ? ` style={{ ${[existingStyleExpr, ...styleParts].filter(Boolean).join(', ')} }}`
                     : '';
-                const { classParts, isOptimizable, baseStyle } = buildClassParts(args, dynamicClassParts, existingClassExpr);
                 if (isOptimizable &&
                     (args.length > 0 ||
                         Object.keys(baseStyle).length > 0 ||
@@ -1880,6 +1985,9 @@ async function loader(source) {
                     utils_1.t.isIdentifier(callee.property)) {
                     const objectName = callee.object.value;
                     const propertyName = callee.property.value;
+                    if (localCreateStyles[objectName]?.functions?.[propertyName]) {
+                        dynamicFnCalls.push(node);
+                    }
                     const alias = plumeriaAliases[objectName];
                     if (alias === 'NAMESPACE' && propertyName === 'use') {
                         isUseCall = true;
@@ -1953,6 +2061,16 @@ async function loader(source) {
                 });
             }
         });
+        dynamicFnCalls.forEach((call) => {
+            const start = call.span.start - baseByteOffset;
+            const end = call.span.end - baseByteOffset;
+            const isResolved = replacements.some((r) => r.start <= start && r.end >= end);
+            if (!isResolved) {
+                throwCompilationError(`Plumeria: ${getSource(call)} is only supported in the ${styleProp} prop. ` +
+                    `A dynamic style function resolves to a class name and a CSS variable on the element itself, ` +
+                    `so it cannot be passed through another prop or read as a value.`, call);
+            }
+        });
         const buffer = Buffer.from(source);
         let offset = 0;
         const parts = [];

package/package.json

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