@plumeria/turbopack-loader 18.3.17 → 18.4.0

package/dist/index.d.ts

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

package/dist/index.js

@@ -63,6 +63,8 @@ async function generateProductionCss(virtualFilePath, options) {
             exclude: options.exclude ?? DEFAULT_EXCLUDE,
             cwd: process.cwd(),
             styleProp: options.styleProp ?? utils_1.DEFAULT_STYLE_PROP,
+            withoutLogicalProperties: options.withoutLogicalProperties,
+            withoutPhysicalProperties: options.withoutPhysicalProperties,
         });
         const optimized = await (0, utils_1.optimizer)(css);
         const tempPath = `${virtualFilePath}.${process.pid}.tmp`;
@@ -205,17 +207,45 @@ 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(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(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)) {
+            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 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})`;
@@ -236,6 +266,7 @@ async function loader(source) {
         (typeof this.query === 'object' ? this.query : undefined) ??
         {};
     const styleProp = loaderOptions.styleProp ?? utils_1.DEFAULT_STYLE_PROP;
+    const propertyPolicy = (0, utils_1.resolvePropertyPolicy)(loaderOptions);
     const resourcePath = this.resourcePath;
     const isProduction = process.env.NODE_ENV === 'production';
     const VIRTUAL_FILE_PATH = path.resolve(__dirname, '..', 'zero-virtual.css');
@@ -251,6 +282,7 @@ async function loader(source) {
             tsx: true,
             target: 'es2022',
         });
+        (0, utils_1.assertPropertyPolicy)(ast, propertyPolicy, resourcePath);
         const leadingLen = (0, utils_1.getLeadingCommentLength)(source);
         const sourceBuffer = Buffer.from(source, 'utf-8');
         const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
@@ -1036,47 +1068,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;
-                applyVarFallback(style, cssVar, literal);
+                (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.17",
+  "version": "18.4.0",
   "description": "Plumeria Turbopack-loader",
   "author": "Refirst 11",
   "license": "MIT",
@@ -29,12 +29,12 @@
     "zero-virtual.css"
   ],
   "dependencies": {
-    "@plumeria/compiler": "^18.3.17",
-    "@plumeria/utils": "^18.3.17"
+    "@plumeria/compiler": "^18.4.0",
+    "@plumeria/utils": "^18.4.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.47",
-    "zss-engine": "2.7.0"
+    "zss-engine": "2.8.0"
   },
   "publishConfig": {
     "access": "public",