@plumeria/utils 2.2.2 → 2.2.4

package/dist/transform.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, CreateStyleType, CreateTheme, CreateValues } from 'zss-engine';
-declare function createCSS<T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): string;
-declare const createVars: <const T extends CreateValues>(object: T) => Record<string, CreateValues>;
-declare const createTheme: <const T extends CreateTheme>(object: T) => Record<string, Record<string, string | number | object>>;
+declare function createCSS<T extends Record<string, CSSProperties>>(rule: CreateStyleType<T>): string;
+declare const createVars: <const T extends CreateValues>(rule: T) => Record<string, CreateValues>;
+declare const createTheme: <const T extends CreateTheme>(rule: T) => Record<string, Record<string, string | number | Record<string, string | number>>>;
 export { createCSS, createVars, createTheme };

package/dist/transform.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = exports.createVars = void 0;
 exports.createCSS = createCSS;
 const zss_engine_1 = require("zss-engine");
-function compileToSingleCSS(object) {
+function compileToSingleCSS(rule) {
     const baseSheets = [];
     const querySheets = [];
     const processedHashes = new Set();
-    Object.entries(object).forEach(([key, styleObj]) => {
+    Object.entries(rule).forEach(([key, styleRule]) => {
         const flat = {};
         const nonFlat = {};
-        (0, zss_engine_1.splitAtomicAndNested)(styleObj, flat, nonFlat);
+        (0, zss_engine_1.splitAtomicAndNested)(styleRule, flat, nonFlat);
         const finalFlat = (0, zss_engine_1.overrideLonghand)(flat);
         const records = [];
         Object.entries(finalFlat).forEach(([prop, value]) => {
@@ -62,23 +62,28 @@ function compileToSingleCSS(object) {
                     nonFlatBase[atRule] = nestedObj;
                 }
             });
-            [nonFlatBase, nonFlatQuery].forEach((targetNonFlat) => {
-                if (Object.keys(targetNonFlat).length === 0)
-                    return;
-                const nonFlatObj = { [key]: targetNonFlat };
+            Object.entries(nonFlatBase).forEach(([selector, style]) => {
+                const nonFlatObj = { [key]: { [selector]: style } };
                 const nonFlatHash = (0, zss_engine_1.genBase36Hash)(nonFlatObj, 1, 7);
                 const { styleSheet } = (0, zss_engine_1.transpile)(nonFlatObj, nonFlatHash);
-                const isQuery = styleSheet.includes('@media') || styleSheet.includes('@container');
-                const finalSheet = isQuery
-                    ? styleSheet.replace(`.${nonFlatHash}`, `.${nonFlatHash}:not(#\\#):not(#\\#)`)
-                    : styleSheet;
-                Object.entries(targetNonFlat).forEach(([atRule, nestedObj]) => {
-                    Object.keys(nestedObj).forEach((prop) => {
-                        records.push({
-                            key: atRule + prop,
-                            hash: nonFlatHash,
-                            sheet: finalSheet,
-                        });
+                records.push({
+                    key: selector,
+                    hash: nonFlatHash,
+                    sheet: styleSheet,
+                });
+            });
+            Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
+                Object.entries(nestedStyles).forEach(([pseudoSelector, style]) => {
+                    const nonFlatObj = {
+                        [key]: { [atRule]: { [pseudoSelector]: style } },
+                    };
+                    const nonFlatHash = (0, zss_engine_1.genBase36Hash)(nonFlatObj, 1, 7);
+                    const { styleSheet } = (0, zss_engine_1.transpile)(nonFlatObj, nonFlatHash);
+                    const finalSheet = styleSheet.replace(`.${nonFlatHash}`, `.${nonFlatHash}:not(#\\#):not(#\\#)`);
+                    records.push({
+                        key: atRule + pseudoSelector,
+                        hash: nonFlatHash,
+                        sheet: finalSheet,
                     });
                 });
             });
@@ -97,37 +102,41 @@ function compileToSingleCSS(object) {
     });
     return [...baseSheets, ...querySheets].filter(Boolean).join('');
 }
-function createCSS(object) {
-    const compiledCSS = compileToSingleCSS(object);
+function createCSS(rule) {
+    const compiledCSS = compileToSingleCSS(rule);
     return compiledCSS;
 }
-const createVars = (object) => {
+const createVars = (rule) => {
     const styles = {
         ':root': {},
     };
-    Object.entries(object).forEach(([key, value]) => {
+    Object.entries(rule).forEach(([key, value]) => {
         styles[':root'][`--${key}`] = value;
     });
     return styles;
 };
 exports.createVars = createVars;
-const createTheme = (object) => {
+const createTheme = (rule) => {
     const styles = {};
-    Object.entries(object).forEach(([key, value]) => {
-        const kebabKey = (0, zss_engine_1.camelToKebabCase)(key);
-        Object.entries(value).forEach(([subKey, subValue]) => {
-            if (subKey.startsWith('@media')) {
-                styles[':root'] ||= {};
-                styles[':root'][subKey] ||= {};
-                styles[':root'][subKey][`--${kebabKey}`] = subValue;
+    for (const key in rule) {
+        const varKey = `--${(0, zss_engine_1.camelToKebabCase)(key)}`;
+        const themeMap = rule[key];
+        for (const themeKey in themeMap) {
+            const value = themeMap[themeKey];
+            const isQuery = themeKey.startsWith('@media') || themeKey.startsWith('@container');
+            const selector = isQuery || themeKey === 'default'
+                ? ':root'
+                : `:root[data-theme="${themeKey}"]`;
+            const target = (styles[selector] ||= {});
+            if (isQuery) {
+                const queryObj = (target[themeKey] ||= {});
+                queryObj[varKey] = value;
             }
             else {
-                const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
-                styles[themeSelector] ||= {};
-                styles[themeSelector][`--${kebabKey}`] = subValue;
+                target[varKey] = value;
             }
-        });
-    });
+        }
+    }
     return styles;
 };
 exports.createTheme = createTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "@swc/core": "1.15.2"
   },
   "devDependencies": {
-    "zss-engine": "1.2.2"
+    "zss-engine": "2.0.0"
   },
   "publishConfig": {
     "access": "public",