@plumeria/unplugin 18.3.17 → 18.4.0

package/README.md

@@ -156,6 +156,10 @@ plumeria.vite({
 | `exclude` | — | Files to skip. |
 | `devEmitToDisk` | `false` | Write CSS to disk in development so the bundler's watcher drives HMR. |
 | `styleProp` | `'classStyle'` | The JSX prop that carries styles. |
+| `withoutLogicalProperties` | `false` | Reject the logical name of a property that also has a physical name. Takes `true` or `{ sizes?: boolean }`. |
+| `withoutPhysicalProperties` | `false` | Reject the physical name of a property that also has a logical name. Takes `true` or `{ sizes?: boolean }`. |
+
+The two spelling options contradict each other, so enabling both is a configuration error. See [the docs](https://plumeria.dev/docs/api-reference/plugins/unplugin) for why the pair has to be settled and how it lines up with the lint rules.
 
 ### styleProp
 

package/dist/core.d.ts

@@ -1,5 +1,6 @@
 import type { UnpluginFactory } from 'unplugin';
-export interface PluginOptions {
+import type { PropertyPolicyOptions } from '@plumeria/utils';
+export interface PluginOptions extends PropertyPolicyOptions {
     include?: string | RegExp | Array<string | RegExp>;
     exclude?: string | RegExp | Array<string | RegExp>;
     devEmitToDisk?: boolean;

package/dist/core.js

@@ -167,6 +167,46 @@ const foldDynamicVars = (vars) => {
         return `"${cssVar}": ${value}`;
     });
 };
+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)) {
@@ -180,20 +220,9 @@ const applyVarFallback = (style, cssVar, literal) => {
         }
     }
 };
-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;
-};
 const unpluginFactory = (options = {}, unpluginMeta) => {
     const filter = (0, pluginutils_1.createFilter)(options.include, options.exclude);
+    const propertyPolicy = (0, utils_1.resolvePropertyPolicy)(options);
     const styleProp = options.styleProp ?? utils_1.DEFAULT_STYLE_PROP;
     const cssLookup = new Map();
     const cssFileLookup = new Map();
@@ -263,6 +292,7 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 tsx: true,
                 target: 'es2022',
             });
+            (0, utils_1.assertPropertyPolicy)(ast, propertyPolicy, id);
             const leadingLen = (0, utils_1.getLeadingCommentLength)(source);
             const sourceBuffer = Buffer.from(source, 'utf-8');
             const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
@@ -1050,47 +1080,49 @@ const unpluginFactory = (options = {}, unpluginMeta) => {
                 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/dist/core.mjs

@@ -2,7 +2,7 @@ import { createFilter } from '@rollup/pluginutils';
 import { parseSync } from '@swc/core';
 import * as path from 'path';
 import { applyCssValue, genBase36Hash, exceptionCamelCase, camelToKebabCase, isAtRule, } from 'zss-engine';
-import { traverse, collectReferenceIdentifiers, getStyleRecords, getStateWeights, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveFileError, resolveImportPath, getLeadingCommentLength, optimizer, themeHashOf, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
+import { traverse, resolvePropertyPolicy, assertPropertyPolicy, collectReferenceIdentifiers, getStyleRecords, getStateWeights, collectLocalConsts, objectExpressionToObject, t, getRootIdentifier, extractOndemandStyles, deepMerge, scanAll, resolveFileError, resolveImportPath, getLeadingCommentLength, optimizer, themeHashOf, getFileDependencies, resolveExport, resolveComponentKey, resolveThemeSelector, DEFAULT_STYLE_PROP, } from '@plumeria/utils';
 export const TARGET_EXTENSIONS = ['ts', 'tsx', 'js', 'jsx'];
 export const EXTENSION_PATTERN = /\.(ts|tsx|js|jsx)$/;
 const unwrapExport = (node) => {
@@ -131,6 +131,46 @@ const foldDynamicVars = (vars) => {
         return `"${cssVar}": ${value}`;
     });
 };
+const isUnitlessProp = (prop) => 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}-${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)) {
@@ -144,20 +184,9 @@ const applyVarFallback = (style, cssVar, literal) => {
         }
     }
 };
-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;
-};
 export const unpluginFactory = (options = {}, unpluginMeta) => {
     const filter = createFilter(options.include, options.exclude);
+    const propertyPolicy = resolvePropertyPolicy(options);
     const styleProp = options.styleProp ?? DEFAULT_STYLE_PROP;
     const cssLookup = new Map();
     const cssFileLookup = new Map();
@@ -227,6 +256,7 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 tsx: true,
                 target: 'es2022',
             });
+            assertPropertyPolicy(ast, propertyPolicy, id);
             const leadingLen = getLeadingCommentLength(source);
             const sourceBuffer = Buffer.from(source, 'utf-8');
             const leadingBytes = Buffer.byteLength(source.slice(0, leadingLen), 'utf-8');
@@ -1014,47 +1044,49 @@ export const unpluginFactory = (options = {}, unpluginMeta) => {
                 const style = 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 = camelToKebabCase(targetProp);
-                    const isUnitless = exceptionCamelCase.includes(targetProp) ||
-                        targetProp.startsWith('--');
                     const maybeNumber = Number(argSource);
-                    if (!isNaN(maybeNumber) && argSource.trim() === String(maybeNumber)) {
-                        valueExpr = JSON.stringify(applyCssValue(maybeNumber, kebabProp));
-                    }
-                    else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
-                        (argSource.startsWith("'") && argSource.endsWith("'"))) {
-                        valueExpr = JSON.stringify(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 = camelToKebabCase(prop);
+                        if (!isNaN(maybeNumber) &&
+                            argSource.trim() === String(maybeNumber)) {
+                            valueExpr = JSON.stringify(applyCssValue(maybeNumber, kebabProp));
+                        }
+                        else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
+                            (argSource.startsWith("'") && argSource.endsWith("'"))) {
+                            valueExpr = JSON.stringify(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/unplugin",
-  "version": "18.3.17",
+  "version": "18.4.0",
   "description": "Universal Plumeria plugin for various build tools",
   "author": "Refirst 11",
   "license": "MIT",
@@ -94,12 +94,12 @@
   "dependencies": {
     "@rollup/pluginutils": "^5.4.0",
     "unplugin": "^3.0.0",
-    "@plumeria/utils": "^18.3.17"
+    "@plumeria/utils": "^18.4.0"
   },
   "devDependencies": {
     "@swc/core": "1.15.47",
     "vite": "^8.0.13",
-    "zss-engine": "2.7.0"
+    "zss-engine": "2.8.0"
   },
   "publishConfig": {
     "access": "public",