@plumeria/utils 19.2.1 → 19.2.2

package/dist/dynamicKey.d.ts

@@ -14,11 +14,18 @@ export type StyleFunction = {
 export type StyleFunctions = Record<string, StyleFunction>;
 export declare const styleFunctionsOf: (objExpr: ObjectExpression) => StyleFunctions;
 export declare const isUnitlessProp: (prop: string) => boolean;
-export declare const splitVarByUnit: (style: CSSObject, cssVar: string) => Array<{
+type VarUnit = {
+    unit: string;
+    written: boolean;
+};
+type VarGroup = {
     cssVar: string;
     prop: string;
-}>;
-export declare const applyVarFallback: (style: CSSObject, cssVar: string, literal: string | number) => void;
+    unit: string;
+    written: boolean;
+};
+export declare const splitVarByUnit: (style: CSSObject, cssVar: string) => VarGroup[];
+export declare const applyVarFallback: (style: CSSObject, cssVar: string, literal: string | number, unit: VarUnit) => void;
 export type DynamicStyleTables = {
     keyframesHashTable: KeyframesHashTable;
     viewTransitionHashTable: ViewTransitionHashTable;
@@ -33,6 +40,9 @@ export type DynamicStyleResult = {
     varGroups: Map<string, Array<{
         cssVar: string;
         prop: string;
+        unit: string;
+        written: boolean;
     }>>;
 };
 export declare const resolveDynamicStyle: (func: StyleFunction, runtimeParams: string[], staticTable: StaticTable, tables: DynamicStyleTables, providedParams?: ReadonlySet<string>) => DynamicStyleResult;
+export {};

package/dist/dynamicKey.js

@@ -89,56 +89,136 @@ const styleFunctionsOf = (objExpr) => {
 exports.styleFunctionsOf = styleFunctionsOf;
 const isUnitlessProp = (prop) => zss_engine_1.exceptionCamelCase.includes(prop) || prop.startsWith('--');
 exports.isUnitlessProp = isUnitlessProp;
-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 cssUnits = [
+    'px',
+    'cm',
+    'mm',
+    'q',
+    'in',
+    'pc',
+    'pt',
+    'cap',
+    'ch',
+    'em',
+    'ex',
+    'ic',
+    'lh',
+    'rcap',
+    'rch',
+    'rem',
+    'rex',
+    'ric',
+    'rlh',
+    'vh',
+    'vw',
+    'vmin',
+    'vmax',
+    'vb',
+    'vi',
+    'svw',
+    'svh',
+    'svmin',
+    'svmax',
+    'lvw',
+    'lvh',
+    'lvmin',
+    'lvmax',
+    'dvw',
+    'dvh',
+    'dvmin',
+    'dvmax',
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+    'deg',
+    'grad',
+    'rad',
+    'turn',
+    's',
+    'ms',
+    'hz',
+    'khz',
+    'dpi',
+    'dpcm',
+    'dppx',
+    'x',
+    'fr',
+];
+const UNIT_TOKEN = /^(%|[a-z]+[a-z0-9-]*)/i;
+const unitSet = new Set(cssUnits);
+const writtenUnitAfter = (rest) => {
+    const token = UNIT_TOKEN.exec(rest)?.[0];
+    if (token === undefined)
+        return '';
+    if (token === '%')
+        return token;
+    return unitSet.has(token.toLowerCase()) ? token : '';
+};
+const unitAt = (prop, rest) => {
+    const written = writtenUnitAfter(rest);
+    if (written)
+        return { unit: written, written: true };
+    return { unit: (0, exports.isUnitlessProp)(prop) ? '' : 'px', written: false };
 };
-const retargetVar = (style, cssVar, next, unitless) => {
+const unitKey = (unit) => `${unit.written ? 'written' : 'default'}:${unit.unit}`;
+const unitSlug = (unit) => unit.unit === '%' ? 'percent' : unit.unit || 'unitless';
+const rewriteVarOccurrences = (style, cssVar, assign) => {
     const reference = `var(${cssVar})`;
     for (const [prop, value] of Object.entries(style)) {
         if (typeof value === 'string' && value.includes(reference)) {
-            if ((0, exports.isUnitlessProp)(prop) === unitless)
-                style[prop] = value
-                    .split(reference)
-                    .join(`var(${next})`);
+            let rewritten = '';
+            let rest = value;
+            let at = rest.indexOf(reference);
+            while (at !== -1) {
+                const after = rest.slice(at + reference.length);
+                const unit = unitAt(prop, after);
+                rewritten += `${rest.slice(0, at)}var(${assign(prop, unit)})`;
+                rest = unit.written ? after.slice(unit.unit.length) : after;
+                at = rest.indexOf(reference);
+            }
+            style[prop] = rewritten + rest;
         }
         else if (value !== null && typeof value === 'object') {
-            retargetVar(value, cssVar, next, unitless);
+            rewriteVarOccurrences(value, cssVar, assign);
         }
     }
 };
 const splitVarByUnit = (style, cssVar) => {
-    const props = [];
-    collectVarProps(style, cssVar, props);
-    if (props.length === 0)
-        return [];
-    const lead = props[0];
-    const split = props.find((prop) => (0, exports.isUnitlessProp)(prop) !== (0, exports.isUnitlessProp)(lead));
-    if (!split)
-        return [{ cssVar, prop: lead }];
-    const splitVar = `${cssVar}-${(0, zss_engine_1.camelToKebabCase)(split).replace(/^-+/, '')}`;
-    retargetVar(style, cssVar, splitVar, (0, exports.isUnitlessProp)(split));
-    return [
-        { cssVar, prop: lead },
-        { cssVar: splitVar, prop: split },
-    ];
+    const groups = new Map();
+    const taken = new Set();
+    rewriteVarOccurrences(style, cssVar, (prop, unit) => {
+        const key = unitKey(unit);
+        const group = groups.get(key);
+        if (group)
+            return group.cssVar;
+        let name = cssVar;
+        if (groups.size > 0) {
+            const base = `${cssVar}-${(0, zss_engine_1.camelToKebabCase)(prop).replace(/^-+/, '')}`;
+            name = taken.has(base) ? `${base}-${unitSlug(unit)}` : base;
+        }
+        taken.add(name);
+        groups.set(key, { cssVar: name, prop, ...unit });
+        return name;
+    });
+    return Array.from(groups.values());
 };
 exports.splitVarByUnit = splitVarByUnit;
-const applyVarFallback = (style, cssVar, literal) => {
+const applyVarFallback = (style, cssVar, literal, unit) => {
     const reference = `var(${cssVar})`;
     for (const [prop, value] of Object.entries(style)) {
         if (typeof value === 'string' && value.includes(reference)) {
+            const fallback = unit.written
+                ? `${literal}${unit.unit}`
+                : (0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(prop));
             style[prop] = value
                 .split(reference)
-                .join(`var(${cssVar}, ${(0, zss_engine_1.applyCssValue)(literal, (0, zss_engine_1.camelToKebabCase)(prop))})`);
+                .join(`var(${cssVar}, ${fallback})`);
         }
         else if (value !== null && typeof value === 'object') {
-            (0, exports.applyVarFallback)(value, cssVar, literal);
+            (0, exports.applyVarFallback)(value, cssVar, literal, unit);
         }
     }
 };
@@ -190,7 +270,7 @@ const resolveDynamicStyle = (func, runtimeParams, staticTable, tables, providedP
             return;
         varGroups
             .get(param)
-            .forEach(({ cssVar }) => (0, exports.applyVarFallback)(style, cssVar, literal));
+            .forEach(({ cssVar, unit, written }) => (0, exports.applyVarFallback)(style, cssVar, literal, { unit, written }));
     });
     return { style, varGroups };
 };

package/dist/transform.js

@@ -1107,20 +1107,33 @@ const transformSource = async (env) => {
                 .subarray(argStart, argEnd)
                 .toString('utf-8');
             const maybeNumber = Number(argSource);
-            groups.forEach(({ cssVar, prop }) => {
+            groups.forEach(({ cssVar, prop, unit, written }) => {
                 let valueExpr;
                 const kebabProp = (0, zss_engine_1.camelToKebabCase)(prop);
-                if (!isNaN(maybeNumber) && argSource.trim() === String(maybeNumber)) {
+                const isNumberLiteral = !isNaN(maybeNumber) && argSource.trim() === String(maybeNumber);
+                const isStringLiteral = (argSource.startsWith('"') && argSource.endsWith('"')) ||
+                    (argSource.startsWith("'") && argSource.endsWith("'"));
+                if (written) {
+                    if (isNumberLiteral) {
+                        valueExpr = JSON.stringify(`${maybeNumber}${unit}`);
+                    }
+                    else if (isStringLiteral) {
+                        valueExpr = JSON.stringify(`${argSource.slice(1, -1)}${unit}`);
+                    }
+                    else {
+                        valueExpr = `((${argSource}) + '${unit}')`;
+                    }
+                }
+                else if (isNumberLiteral) {
                     valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(maybeNumber, kebabProp));
                 }
-                else if ((argSource.startsWith('"') && argSource.endsWith('"')) ||
-                    (argSource.startsWith("'") && argSource.endsWith("'"))) {
+                else if (isStringLiteral) {
                     valueExpr = JSON.stringify((0, zss_engine_1.applyCssValue)(argSource.slice(1, -1), kebabProp));
                 }
                 else {
-                    valueExpr = (0, dynamicKey_1.isUnitlessProp)(prop)
-                        ? argSource
-                        : `(typeof (${argSource}) === 'number' ? (${argSource}) + 'px' : (${argSource}))`;
+                    valueExpr = unit
+                        ? `(typeof (${argSource}) === 'number' ? (${argSource}) + '${unit}' : (${argSource}))`
+                        : argSource;
                 }
                 vars.push({ cssVar, valueExpr });
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "19.2.1",
+  "version": "19.2.2",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",