@plumeria/turbopack-loader 18.3.16 → 18.3.18

package/dist/index.js

@@ -205,30 +205,58 @@ const foldDynamicVars = (vars) => {
         return `"${cssVar}": ${value}`;
     });
 };
-const findVarProp = (style, cssVar) => {
+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(cssVar))
-            return prop;
-        if (value !== null && typeof value === 'object') {
-            const nested = findVarProp(value, cssVar);
-            if (nested)
-                return nested;
+        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);
         }
     }
-    return undefined;
 };
-const replaceVarValue = (style, cssVar, next) => {
+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(cssVar)) {
-            style[prop] = next;
-            return true;
+        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))})`);
         }
-        if (value !== null && typeof value === 'object') {
-            if (replaceVarValue(value, cssVar, next))
-                return true;
+        else if (value !== null && typeof value === 'object') {
+            applyVarFallback(value, cssVar, literal);
         }
     }
-    return false;
 };
 async function loader(source) {
     const callback = this.async();
@@ -1036,47 +1064,48 @@ async function loader(source) {
             const style = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, mergedVariantsTable);
             if (!style)
                 return null;
-            withDefault.forEach(([param, expr]) => {
+            const varGroups = new Map();
+            varParams.forEach((param) => {
                 const cssVar = cssVars[param];
-                const targetProp = cssVar ? findVarProp(style, cssVar) : undefined;
-                if (!targetProp)
-                    return;
+                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;
-                replaceVarValue(style, cssVar, `var(${cssVar}, ${(0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(targetProp))})`);
+                (varGroups.get(param) ?? []).forEach(({ cssVar }) => applyVarFallback(style, cssVar, literal));
             });
             const vars = [];
             runtime.forEach(({ param, source }) => {
-                const cssVar = cssVars[param];
-                const targetProp = cssVar ? findVarProp(style, cssVar) : undefined;
-                if (!targetProp)
+                const groups = varGroups.get(param);
+                if (!groups?.length)
                     return;
                 const argStart = source.span.start - baseByteOffset;
                 const argEnd = source.span.end - baseByteOffset;
                 const argSource = sourceBuffer
                     .subarray(argStart, argEnd)
                     .toString('utf-8');
-                let valueExpr;
-                const kebabProp = (0, zss_engine_1.camelToKebabCase)(targetProp);
-                const isUnitless = zss_engine_1.exceptionCamelCase.includes(targetProp) ||
-                    targetProp.startsWith('--');
                 const maybeNumber = Number(argSource);
-                if (!isNaN(maybeNumber) && argSource.trim() === String(maybeNumber)) {
-                    valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, kebabProp));
-                }
-                else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
-                    (argSource.startsWith("'") && argSource.endsWith("'"))) {
-                    valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), kebabProp));
-                }
-                else {
-                    valueExpr = isUnitless
-                        ? argSource
-                        : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
-                }
-                vars.push({ cssVar, valueExpr });
+                groups.forEach(({ cssVar, prop }) => {
+                    let valueExpr;
+                    const kebabProp = (0, zss_engine_1.camelToKebabCase)(prop);
+                    if (!isNaN(maybeNumber) && argSource.trim() === String(maybeNumber)) {
+                        valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, kebabProp));
+                    }
+                    else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
+                        (argSource.startsWith("'") && argSource.endsWith("'"))) {
+                        valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), kebabProp));
+                    }
+                    else {
+                        valueExpr = isUnitlessProp(prop)
+                            ? argSource
+                            : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
+                    }
+                    vars.push({ cssVar, valueExpr });
+                });
             });
             return { style, vars };
         };

package/package.json

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