@plumeria/compiler 18.3.17 → 18.4.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-interface CompilerOptions {
+import type { PropertyPolicyOptions } from '@plumeria/utils';
+interface CompilerOptions extends PropertyPolicyOptions {
     include: string[];
     exclude: string[];
     cwd?: string;

package/dist/index.js

@@ -103,6 +103,46 @@ 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)) {
@@ -256,6 +296,7 @@ function extractStylesFromExpression(expression, ctx) {
 }
 function compileCSS(options) {
     const { include, exclude, cwd = process.cwd(), styleProp = utils_1.DEFAULT_STYLE_PROP, } = options;
+    const propertyPolicy = (0, utils_1.resolvePropertyPolicy)(options);
     const allSheets = new Set();
     const files = rs.globSync(include, {
         cwd,
@@ -272,6 +313,7 @@ function compileCSS(options) {
             tsx: true,
             target: 'es2022',
         });
+        (0, utils_1.assertPropertyPolicy)(ast, propertyPolicy, resourcePath);
         const leadingLen = (0, utils_2.getLeadingCommentLength)(source);
         const sourceBuffer = Buffer.from(source, 'utf-8');
         const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
@@ -700,16 +742,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.17",
+  "version": "18.4.0",
   "description": "Plumeria swc based compiler for statically extracting css",
   "author": "Refirst 11",
   "license": "MIT",
@@ -21,12 +21,12 @@
     "dist/"
   ],
   "dependencies": {
-    "@plumeria/utils": "^18.3.17"
+    "@plumeria/utils": "^18.4.0"
   },
   "devDependencies": {
     "@rust-gear/glob": "1.1.1",
     "@swc/core": "1.15.47",
-    "zss-engine": "2.7.0"
+    "zss-engine": "2.8.0"
   },
   "publishConfig": {
     "access": "public",