@plumeria/utils 12.0.8 → 13.0.1

package/dist/create.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'zss-engine';
+import type { CSSProperties } from 'zss-engine';
 export interface StyleRecord {
     key: string;
     hash: string;

package/dist/create.js

@@ -10,7 +10,7 @@ function getStyleRecords(styleRule) {
     const finalFlat = (0, zss_engine_1.overrideLonghand)(flat);
     const records = [];
     Object.entries(finalFlat).forEach(([prop, value]) => {
-        if (prop.startsWith('@media') || prop.startsWith('@container')) {
+        if ((0, zss_engine_1.isAtRule)(prop)) {
             Object.entries(value).forEach(([innerProp, innerValue]) => {
                 const atomicMap = new Map();
                 const notSuffix = innerProp.startsWith('--') ? '' : notNormalize;
@@ -49,7 +49,7 @@ function getStyleRecords(styleRule) {
         const nonFlatBase = {};
         const nonFlatQuery = {};
         Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
-            if (atRule.startsWith('@media') || atRule.startsWith('@container')) {
+            if ((0, zss_engine_1.isAtRule)(atRule)) {
                 nonFlatQuery[atRule] = nestedObj;
             }
             else {

package/dist/createTheme.d.ts

@@ -1,3 +1,7 @@
 import type { CreateTheme } from './types';
-declare const createTheme: <const T extends CreateTheme>(rule: T, hash?: string) => Record<string, Record<string, string | number | Record<string, string | number>>>;
+declare const createTheme: <const T extends CreateTheme>(themeSelector: string, rule: T) => {
+    ':where(:root)': {
+        [x: string]: string | number | Record<string, string | number>;
+    };
+};
 export { createTheme };

package/dist/createTheme.js

@@ -2,29 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const zss_engine_1 = require("zss-engine");
-const createTheme = (rule, hash) => {
-    const styles = {};
+const createTheme = (themeSelector, rule) => {
+    const rootTarget = {};
+    const themeTarget = {};
     for (const key in rule) {
-        const varKey = hash
-            ? `--${hash}-${(0, zss_engine_1.camelToKebabCase)(key)}`
-            : `--${(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 {
-                target[varKey] = value;
-            }
-        }
+        const valueObj = rule[key];
+        const hash = (0, zss_engine_1.genBase36Hash)({ [key]: valueObj }, 1, 8);
+        const cssVarName = `--${hash}-${(0, zss_engine_1.camelToKebabCase)(key)}`;
+        rootTarget[cssVarName] = valueObj.default;
+        themeTarget[cssVarName] = valueObj.theme;
     }
-    return styles;
+    if ((0, zss_engine_1.isAtRule)(themeSelector)) {
+        return {
+            ':where(:root)': {
+                ...rootTarget,
+                [themeSelector]: themeTarget,
+            },
+        };
+    }
+    const formattedSelector = themeSelector.startsWith('@') ||
+        themeSelector.startsWith('.') ||
+        themeSelector.startsWith('#') ||
+        themeSelector.startsWith(':') ||
+        themeSelector.startsWith('[')
+        ? themeSelector
+        : '.' + themeSelector;
+    return {
+        ':where(:root)': rootTarget,
+        [formattedSelector]: themeTarget,
+    };
 };
 exports.createTheme = createTheme;

package/dist/parser.d.ts

@@ -1,4 +1,4 @@
-import type { CSSObject, Tables, StaticTable, KeyframesHashTable, ViewTransitionHashTable, CreateThemeObjectTable, CreateHashTable, VariantsHashTable, CreateThemeHashTable, CreateStaticHashTable, CreateStaticObjectTable } from './types';
+import type { CSSObject, Tables, StaticTable, KeyframesHashTable, ViewTransitionHashTable, CreateHashTable, VariantsHashTable, CreateThemeHashTable, CreateThemeObjectTable, CreateStaticHashTable, CreateStaticObjectTable } from './types';
 import { Module, CallExpression, Identifier, KeyValueProperty, StringLiteral, NumericLiteral, BooleanLiteral, ObjectExpression, MemberExpression, TemplateLiteral, BinaryExpression, UnaryExpression, VariableDeclaration, VariableDeclarator, ExportDeclaration, ConditionalExpression } from '@swc/core';
 export declare const t: {
     isObjectExpression: (node: any) => node is ObjectExpression;

package/dist/parser.js

@@ -511,8 +511,10 @@ function resolveCreateThemeTableMemberExpressionByNode(node, createThemeHashTabl
                     key = node.property.expression.value;
                 }
                 if (key && themeObj[key] !== undefined) {
+                    const value = themeObj[key];
+                    const atomicHash = (0, zss_engine_1.genBase36Hash)({ [key]: value }, 1, 8);
                     const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
-                    return `var(--${hash}-${cssVarName})`;
+                    return `var(--${atomicHash}-${cssVarName})`;
                 }
             }
         }
@@ -555,6 +557,7 @@ function scanAll() {
         viewTransitionHashTable: {},
         viewTransitionObjectTable: {},
         createThemeObjectTable: {},
+        createThemeSelectorTable: {},
         createHashTable: {},
         createObjectTable: {},
         createAtomicMapTable: {},
@@ -600,6 +603,10 @@ function scanAll() {
                         localTables.createThemeObjectTable[key] =
                             cached.createThemeObjectTable[key];
                     }
+                    for (const key of Object.keys(cached.createThemeSelectorTable)) {
+                        localTables.createThemeSelectorTable[key] =
+                            cached.createThemeSelectorTable[key];
+                    }
                     for (const key of Object.keys(cached.createStaticHashTable)) {
                         localTables.createStaticHashTable[`${filePath}-${key}`] =
                             cached.createStaticHashTable[key];
@@ -651,6 +658,7 @@ function scanAll() {
                     viewTransitionHashTable: {},
                     viewTransitionObjectTable: {},
                     createThemeHashTable: {},
+                    createThemeSelectorTable: {},
                     createThemeObjectTable: {},
                     createHashTable: {},
                     createObjectTable: {},
@@ -683,6 +691,7 @@ function scanAll() {
                 const localViewTransitionHashTable = {};
                 const localViewTransitionObjectTable = {};
                 const localCreateThemeObjectTable = {};
+                const localCreateThemeSelectorTable = {};
                 const localCreateHashTable = {};
                 const localCreateObjectTable = {};
                 const localCreateAtomicMapTable = {};
@@ -797,9 +806,14 @@ function scanAll() {
                                     method = originalName;
                                 }
                             }
+                            const isCreateTheme = method === 'createTheme';
                             if (method &&
                                 decl.init.arguments.length > 0 &&
-                                exports.t.isObjectExpression(decl.init.arguments[0].expression)) {
+                                ((!isCreateTheme &&
+                                    exports.t.isObjectExpression(decl.init.arguments[0].expression)) ||
+                                    (isCreateTheme &&
+                                        decl.init.arguments.length >= 2 &&
+                                        exports.t.isObjectExpression(decl.init.arguments[1].expression)))) {
                                 const name = decl.id.value;
                                 const init = decl.init;
                                 const resolveVariable = (name) => {
@@ -809,7 +823,10 @@ function scanAll() {
                                     }
                                     return undefined;
                                 };
-                                const obj = objectExpressionToObject(init.arguments[0].expression, localStaticTable, localKeyframesHashTable, localViewTransitionHashTable, localCreateThemeHashTable, localCreateThemeObjectTable, localCreateHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, localVariantsHashTable, resolveVariable);
+                                const objExpression = isCreateTheme
+                                    ? init.arguments[1].expression
+                                    : init.arguments[0].expression;
+                                const obj = objectExpressionToObject(objExpression, localStaticTable, localKeyframesHashTable, localViewTransitionHashTable, localCreateThemeHashTable, localCreateThemeObjectTable, localCreateHashTable, localCreateStaticHashTable, localCreateStaticObjectTable, localVariantsHashTable, resolveVariable);
                                 const uniqueKey = `${filePath}-${name}`;
                                 const isPassOneMethod = method === 'createStatic' ||
                                     method === 'createTheme' ||
@@ -843,16 +860,23 @@ function scanAll() {
                                     localViewTransitionObjectTable[hash] = obj;
                                 }
                                 else if (method === 'createTheme') {
+                                    let selector = '';
+                                    const selectorExpr = init.arguments[0].expression;
+                                    if (exports.t.isStringLiteral(selectorExpr)) {
+                                        selector = selectorExpr.value;
+                                    }
                                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                                     localTables.createThemeObjectTable[hash] = obj;
                                     localCreateThemeObjectTable[hash] = obj;
                                     localCreateThemeHashTable[name] = hash;
                                     localTables.createThemeHashTable[uniqueKey] = hash;
-                                    localTables.createThemeObjectTable[hash] = obj;
+                                    localCreateThemeSelectorTable[hash] = selector;
+                                    localTables.createThemeSelectorTable[hash] = selector;
                                     const hashMap = {};
-                                    for (const [key] of Object.entries(obj)) {
+                                    for (const [key, value] of Object.entries(obj)) {
+                                        const atomicHash = (0, zss_engine_1.genBase36Hash)({ [key]: value }, 1, 8);
                                         const cssVarName = (0, zss_engine_1.camelToKebabCase)(key);
-                                        hashMap[key] = `var(--${hash}-${cssVarName})`;
+                                        hashMap[key] = `var(--${atomicHash}-${cssVarName})`;
                                     }
                                     localCreateAtomicMapTable[hash] = hashMap;
                                     localTables.createAtomicMapTable[hash] = hashMap;
@@ -893,6 +917,7 @@ function scanAll() {
                         viewTransitionHashTable: localViewTransitionHashTable,
                         viewTransitionObjectTable: localViewTransitionObjectTable,
                         createThemeHashTable: localCreateThemeHashTable,
+                        createThemeSelectorTable: localCreateThemeSelectorTable,
                         createThemeObjectTable: localCreateThemeObjectTable,
                         createHashTable: localCreateHashTable,
                         createObjectTable: localCreateObjectTable,
@@ -1014,21 +1039,20 @@ function extractOndemandStyles(obj, extractedSheets, t) {
             .forEach((themeVarName) => {
             const hash = t.createThemeHashTable[themeVarName];
             const definition = t.createThemeObjectTable[hash];
-            if (definition && typeof definition === 'object') {
-                const filteredDefinition = {};
-                let hasUsed = false;
+            const selector = t.createThemeSelectorTable[hash];
+            if (definition && typeof definition === 'object' && selector) {
                 Object.keys(definition).forEach((key) => {
-                    const varName = `--${hash}-${(0, zss_engine_1.camelToKebabCase)(key)}`;
+                    const value = definition[key];
+                    const atomicHash = (0, zss_engine_1.genBase36Hash)({ [key]: value }, 1, 8);
+                    const varName = `--${atomicHash}-${(0, zss_engine_1.camelToKebabCase)(key)}`;
                     if (usedVariables.has(varName)) {
-                        filteredDefinition[key] = definition[key];
-                        hasUsed = true;
+                        const styles = (0, createTheme_1.createTheme)(selector, {
+                            [key]: value,
+                        });
+                        const { styleSheet } = (0, zss_engine_1.transpile)(styles, undefined, '--global');
+                        addSheet(styleSheet);
                     }
                 });
-                if (hasUsed) {
-                    const styles = (0, createTheme_1.createTheme)(filteredDefinition, hash);
-                    const { styleSheet } = (0, zss_engine_1.transpile)(styles, undefined, '--global');
-                    addSheet(styleSheet);
-                }
             }
         });
     }

package/dist/types.d.ts

@@ -18,6 +18,7 @@ export type CreateAtomicMapTable = Record<string, Record<string, Record<string,
 export type CreateStaticHashTable = Record<string, string>;
 export type CreateStaticObjectTable = Record<string, CSSObject>;
 export type CreateThemeHashTable = Record<string, string>;
+export type CreateThemeSelectorTable = Record<string, string>;
 export interface Tables {
     staticTable: StaticTable;
     keyframesHashTable: KeyframesHashTable;
@@ -25,6 +26,7 @@ export interface Tables {
     viewTransitionHashTable: ViewTransitionHashTable;
     viewTransitionObjectTable: ViewTransitionObjectTable;
     createThemeHashTable: CreateThemeHashTable;
+    createThemeSelectorTable: CreateThemeSelectorTable;
     createThemeObjectTable: CreateThemeObjectTable;
     createHashTable: CreateHashTable;
     createObjectTable: CreateObjectTable;
@@ -34,7 +36,12 @@ export interface Tables {
     variantsHashTable: VariantsHashTable;
     variantsObjectTable: VariantsObjectTable;
 }
-export type CreateTheme = Record<string, Record<string, string | number>>;
+export type CreateTheme = {
+    [key: string]: {
+        default: string | number;
+        theme: string | number;
+    };
+};
 export type ViewTransition = {
     group?: CSSProperties;
     imagePair?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "12.0.8",
+  "version": "13.0.1",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "lightningcss": "^1.32.0",
     "postcss": "8.5.15",
     "postcss-combine-media-query": "^2.1.0",
-    "zss-engine": "2.2.8"
+    "zss-engine": "2.3.0"
   },
   "publishConfig": {
     "access": "public",