@plumeria/compiler 18.3.16 → 18.3.18

package/dist/index.js

@@ -103,19 +103,58 @@ const namedParamsOf = (params, defaults) => {
     }
     return named.length > 0 ? named : undefined;
 };
+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(cssVar)) {
-            style[prop] =
-                `var(${cssVar}, ${(0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(prop))})`;
-            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 (applyVarFallback(value, cssVar, literal))
-                return true;
+        else if (value !== null && typeof value === 'object') {
+            applyVarFallback(value, cssVar, literal);
         }
     }
-    return false;
 };
 const styleFunctionsOf = (objExpr) => {
     const styleFunctions = {};
@@ -701,16 +740,19 @@ function compileCSS(options) {
                 const style = (0, utils_1.objectExpressionToObject)(func.body, tempStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, ctx.mergedVariantsTable);
                 if (!style)
                     return null;
-                withDefault.forEach(([param, expr]) => {
+                const varGroups = new Map();
+                varParams.forEach((param) => {
                     const cssVar = cssVars[param];
-                    if (!cssVar)
-                        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;
-                    applyVarFallback(style, cssVar, literal);
+                    (varGroups.get(param) ?? []).forEach(({ cssVar }) => applyVarFallback(style, cssVar, literal));
                 });
                 return style;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/compiler",
-  "version": "18.3.16",
+  "version": "18.3.18",
   "description": "Plumeria swc based compiler for statically extracting css",
   "author": "Refirst 11",
   "license": "MIT",
@@ -21,7 +21,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@plumeria/utils": "^18.3.16"
+    "@plumeria/utils": "^18.3.18"
   },
   "devDependencies": {
     "@rust-gear/glob": "1.1.1",