@plumeria/core 0.8.14 → 0.9.2

package/README.md

@@ -1,6 +1,6 @@
 # @plumeria/core
 
-Plumeria is a Near zero-runtime CSS-in-JS for efficient design systems.
+**Zero-runtime CSS in JS library in TypeScript.**
 
 ## Installation
 
@@ -25,7 +25,7 @@ Import stylesheet in your application's entry point.
 Applies the static stylesheet for production environments.
 
 ```ts
-import '@plumeria/core/stylesheet';
+import '@plumeria/core/stylesheet.css';
 ```
 
 ## API
@@ -97,21 +97,6 @@ css.global({
 });
 ```
 
-### cx
-
-Merges strings such as class names and pseudo.
-
-```tsx
-const styles = css.create({
-  text: {
-    [cx(css.pseudo.hover, css.pseudo.after)]: {
-      color: 'yellow',
-      opacity: 0.9,
-    },
-  },
-});
-```
-
 ### css.keyframes()
 
 Define @keyframes and set the return value directly to animationName.
@@ -134,19 +119,33 @@ const styles = css.create({
 });
 ```
 
-### css.defineThemeVars()
+### css.defineVars()
 
-Define data-theme and regular variables as objects.  
+Defines custom CSS variables (custom properties) at the `:root` level.  
+This API allows you to declare design tokens such as spacing, sizes, or other constants, which can be referenced throughout your styles using the tokens.sm to `var(--sm)` syntax.
+
+```ts
+const tokens = css.defineVars({
+  xs: 240,
+  sm: 360,
+  md: 480,
+  lg: 600,
+  xl: 768,
+});
+```
+
+### css.defineTheme()
+
+Define data-theme as objects.  
 A default compile to :root, and the rest as a string compile to data-theme, You can also use media and container here.
 
 ```ts
-const tokens = css.defineThemeVars({
-  white: 'white',
+const themes = css.defineTheme({
   text_primary: {
     default: 'rgb(60,60,60)',
     light: 'black',
     dark: 'white',
-    [css.media.max('width: 700px')]: 'gray',
+    [css.media.maxWidth(700)]: 'gray',
   },
   bg_primary: {
     light: 'white',
@@ -163,6 +162,17 @@ The first argument takes the color and the second argument takes the same value
 ```ts
 color: css.color.darken('skyblue', 0.12),
 color: css.color.lighten('navy', 0.6),
+color: css.color.skyblue,
+color: css.color.navy,
+```
+
+### cx
+
+Merges strings such as class names and pseudo.
+
+```tsx
+cx(css.pseudo.hover, css.pseudo.after); // ":hover::after"
+cx(styles.text, styles, box); // "text_hash box_hash"
 ```
 
 ## ESLint
@@ -171,10 +181,10 @@ color: css.color.lighten('navy', 0.6),
 
 ### Rules: recommended
 
-\- no-inner-call:(error)  
-\- no-unused-keys:(warn)  
-\- sort-properties:(warn)  
-\- validate-values:(warn)
+\- **no-inner-call:(error)**  
+\- **no-unused-keys:(warn)**  
+\- **sort-properties:(warn)**  
+\- **validate-values:(warn)**
 
 It is recommended to use it in conjunction with TypeScript completion, which is one of the big advantages of using plumeria.
 

package/dist/cjs/css.js

@@ -1,27 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.css = void 0;
+const zss_engine_1 = require("zss-engine");
+const css_js_1 = require("./processors/css.js");
 const zss_utils_1 = require("zss-utils");
-const create_1 = require("./methods/create");
-const global_1 = require("./methods/global");
-const keyframes_1 = require("./methods/keyframes");
-const define_theme_vars_1 = require("./methods/define-theme-vars");
+function create(object) {
+    const base36Hash = (0, zss_engine_1.genBase36Hash)(object, 6);
+    const { styleSheet } = (0, zss_engine_1.transpiler)(object, base36Hash);
+    const injectCSS = zss_engine_1.isServer ? zss_engine_1.injectServerCSS : zss_engine_1.injectClientCSS;
+    if (typeof css_js_1.globalPromise_1 === 'undefined')
+        (0, css_js_1.initPromise_1)();
+    (0, css_js_1.resolvePromise_1)(styleSheet);
+    Object.keys(object).forEach((key) => {
+        Object.defineProperty(object, key, {
+            get: () => {
+                const className = key + '_' + base36Hash;
+                if (zss_engine_1.isDevAndTest)
+                    injectCSS(base36Hash, styleSheet);
+                return className;
+            },
+        });
+    });
+    return Object.freeze(object);
+}
+function global(object) {
+    const base36Hash = (0, zss_engine_1.genBase36Hash)(object, 8);
+    const { styleSheet } = (0, zss_engine_1.transpiler)(object, undefined, '--global');
+    if (typeof css_js_1.globalPromise_2 === 'undefined')
+        (0, css_js_1.initPromise_2)();
+    (0, css_js_1.resolvePromise_2)(styleSheet);
+    if (zss_engine_1.isDevAndTest)
+        zss_engine_1.isServer
+            ? (0, zss_engine_1.injectServerCSS)(base36Hash, styleSheet)
+            : (0, zss_engine_1.injectClientGlobalCSS)(styleSheet);
+}
+const defineVars = (object) => {
+    const styles = {
+        ':root': {},
+    };
+    const result = {};
+    Object.entries(object).forEach(([key, value]) => {
+        result[key] = `var(--${key})`;
+        styles[':root'][`--${key}`] = value;
+    });
+    global(styles);
+    return result;
+};
+const defineTheme = (object) => {
+    const styles = {};
+    const result = {};
+    Object.entries(object).forEach(([key, value]) => {
+        result[key] = `var(--${key})`;
+        Object.entries(value).forEach(([subKey, subValue]) => {
+            if (subKey.startsWith('@media')) {
+                styles[':root'] ||= {};
+                styles[':root'][subKey] ||= {};
+                styles[':root'][subKey][`--${key}`] = subValue;
+            }
+            else {
+                const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
+                styles[themeSelector] ||= {};
+                styles[themeSelector][`--${key}`] = subValue;
+            }
+        });
+    });
+    global(styles);
+    return result;
+};
+const keyframes = (object) => {
+    const prefix = (0, zss_engine_1.genBase36Hash)(object, 8);
+    global({ [`@keyframes ${prefix}`]: object });
+    return prefix;
+};
 class css {
     static create(object) {
-        return (0, create_1.create)(object);
+        return create(object);
     }
     static global(object) {
-        return (0, global_1.global)(object);
+        return global(object);
+    }
+    static defineVars(object) {
+        return defineVars(object);
     }
-    static defineThemeVars(object) {
-        return (0, define_theme_vars_1.defineThemeVars)(object);
+    static defineTheme(object) {
+        return defineTheme(object);
     }
     static keyframes(object) {
-        return (0, keyframes_1.keyframes)(object);
+        return keyframes(object);
     }
     static media = zss_utils_1.media;
     static container = zss_utils_1.container;
     static pseudo = zss_utils_1.pseudo;
     static color = zss_utils_1.color;
 }
-exports.css = css;
+exports.default = css;

package/dist/cjs/cx.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cx = void 0;
 const cx = (...strings) => {
     let result = '';
     let isFirst = true;
@@ -20,4 +19,4 @@ const cx = (...strings) => {
     });
     return result;
 };
-exports.cx = cx;
+exports.default = cx;

package/dist/cjs/index.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rx = exports.cx = exports.css = void 0;
 var css_1 = require("./css");
-Object.defineProperty(exports, "css", { enumerable: true, get: function () { return css_1.css; } });
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return __importDefault(css_1).default; } });
 var cx_1 = require("./cx");
-Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
+Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return __importDefault(cx_1).default; } });
 var rx_1 = require("./rx");
-Object.defineProperty(exports, "rx", { enumerable: true, get: function () { return rx_1.rx; } });
+Object.defineProperty(exports, "rx", { enumerable: true, get: function () { return __importDefault(rx_1).default; } });

package/dist/cjs/processors/css.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalPromise_2 = exports.resolvePromise_2 = exports.globalPromise_1 = exports.resolvePromise_1 = void 0;
+exports.buildCreate = buildCreate;
+exports.initPromise_1 = initPromise_1;
+exports.buildGlobal = buildGlobal;
+exports.initPromise_2 = initPromise_2;
+const zss_engine_1 = require("zss-engine");
+let resolvePromise_1;
+let globalPromise_1;
+const sheetQueue_1 = [];
+let isProcessing_1 = false;
+function initPromise_1() {
+    exports.globalPromise_1 = globalPromise_1 = new Promise((resolve) => {
+        exports.resolvePromise_1 = resolvePromise_1 = (value) => {
+            sheetQueue_1.push(value);
+            resolve(value);
+        };
+    });
+}
+async function processQueue_1(filePath) {
+    while (sheetQueue_1.length > 0) {
+        const styleSheet = sheetQueue_1.shift();
+        if (!zss_engine_1.isDevelopment && styleSheet)
+            (0, zss_engine_1.build)(styleSheet, filePath);
+    }
+    isProcessing_1 = false;
+}
+async function buildCreate(filePath) {
+    if (typeof globalPromise_1 === 'undefined')
+        initPromise_1();
+    if (!isProcessing_1 && sheetQueue_1.length > 0) {
+        isProcessing_1 = true;
+        processQueue_1(filePath);
+    }
+}
+let resolvePromise_2;
+let globalPromise_2;
+const sheetQueue_2 = [];
+let isProcessing_2 = false;
+function initPromise_2() {
+    exports.globalPromise_2 = globalPromise_2 = new Promise((resolve) => {
+        exports.resolvePromise_2 = resolvePromise_2 = (value) => {
+            sheetQueue_2.push(value);
+            resolve(value);
+        };
+    });
+}
+async function processQueue_2(filePath) {
+    while (sheetQueue_2.length > 0) {
+        const styleSheet = sheetQueue_2.shift();
+        if (!zss_engine_1.isDevelopment && styleSheet)
+            (0, zss_engine_1.build)(styleSheet, filePath, '--global');
+    }
+    isProcessing_2 = false;
+}
+async function buildGlobal(filePath) {
+    if (typeof globalPromise_2 === 'undefined')
+        initPromise_2();
+    if (!isProcessing_2 && sheetQueue_2.length > 0) {
+        isProcessing_2 = true;
+        processQueue_2(filePath);
+    }
+}

package/dist/cjs/rx.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.rx = void 0;
 const rx = (className, varSet) => ({
     className,
     style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value])),
 });
-exports.rx = rx;
+exports.default = rx;

package/dist/esm/css.js

@@ -1,17 +1,86 @@
-import { media, pseudo, color, container } from 'zss-utils';
-import { create } from './methods/create';
-import { global } from './methods/global';
-import { keyframes } from './methods/keyframes';
-import { defineThemeVars } from './methods/define-theme-vars';
-export class css {
+import { transpiler, isServer, isDevAndTest, injectServerCSS, injectClientCSS, injectClientGlobalCSS, genBase36Hash, } from 'zss-engine';
+import { initPromise_1, globalPromise_1, resolvePromise_1, initPromise_2, globalPromise_2, resolvePromise_2, } from './processors/css.js';
+import { media, container, pseudo, color } from 'zss-utils';
+function create(object) {
+    const base36Hash = genBase36Hash(object, 6);
+    const { styleSheet } = transpiler(object, base36Hash);
+    const injectCSS = isServer ? injectServerCSS : injectClientCSS;
+    if (typeof globalPromise_1 === 'undefined')
+        initPromise_1();
+    resolvePromise_1(styleSheet);
+    Object.keys(object).forEach((key) => {
+        Object.defineProperty(object, key, {
+            get: () => {
+                const className = key + '_' + base36Hash;
+                if (isDevAndTest)
+                    injectCSS(base36Hash, styleSheet);
+                return className;
+            },
+        });
+    });
+    return Object.freeze(object);
+}
+function global(object) {
+    const base36Hash = genBase36Hash(object, 8);
+    const { styleSheet } = transpiler(object, undefined, '--global');
+    if (typeof globalPromise_2 === 'undefined')
+        initPromise_2();
+    resolvePromise_2(styleSheet);
+    if (isDevAndTest)
+        isServer
+            ? injectServerCSS(base36Hash, styleSheet)
+            : injectClientGlobalCSS(styleSheet);
+}
+const defineVars = (object) => {
+    const styles = {
+        ':root': {},
+    };
+    const result = {};
+    Object.entries(object).forEach(([key, value]) => {
+        result[key] = `var(--${key})`;
+        styles[':root'][`--${key}`] = value;
+    });
+    global(styles);
+    return result;
+};
+const defineTheme = (object) => {
+    const styles = {};
+    const result = {};
+    Object.entries(object).forEach(([key, value]) => {
+        result[key] = `var(--${key})`;
+        Object.entries(value).forEach(([subKey, subValue]) => {
+            if (subKey.startsWith('@media')) {
+                styles[':root'] ||= {};
+                styles[':root'][subKey] ||= {};
+                styles[':root'][subKey][`--${key}`] = subValue;
+            }
+            else {
+                const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
+                styles[themeSelector] ||= {};
+                styles[themeSelector][`--${key}`] = subValue;
+            }
+        });
+    });
+    global(styles);
+    return result;
+};
+const keyframes = (object) => {
+    const prefix = genBase36Hash(object, 8);
+    global({ [`@keyframes ${prefix}`]: object });
+    return prefix;
+};
+class css {
     static create(object) {
         return create(object);
     }
     static global(object) {
         return global(object);
     }
-    static defineThemeVars(object) {
-        return defineThemeVars(object);
+    static defineVars(object) {
+        return defineVars(object);
+    }
+    static defineTheme(object) {
+        return defineTheme(object);
     }
     static keyframes(object) {
         return keyframes(object);
@@ -21,3 +90,4 @@ export class css {
     static pseudo = pseudo;
     static color = color;
 }
+export default css;

package/dist/esm/cx.js

@@ -1,4 +1,4 @@
-export const cx = (...strings) => {
+const cx = (...strings) => {
     let result = '';
     let isFirst = true;
     strings.filter(Boolean).forEach((str) => {
@@ -17,3 +17,4 @@ export const cx = (...strings) => {
     });
     return result;
 };
+export default cx;

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { css } from './css';
-export { cx } from './cx';
-export { rx } from './rx';
+export { default as css } from './css';
+export { default as cx } from './cx';
+export { default as rx } from './rx';

package/dist/esm/processors/css.js

@@ -0,0 +1,59 @@
+import { build, isDevelopment } from 'zss-engine';
+let resolvePromise_1;
+let globalPromise_1;
+const sheetQueue_1 = [];
+let isProcessing_1 = false;
+function initPromise_1() {
+    globalPromise_1 = new Promise((resolve) => {
+        resolvePromise_1 = (value) => {
+            sheetQueue_1.push(value);
+            resolve(value);
+        };
+    });
+}
+async function processQueue_1(filePath) {
+    while (sheetQueue_1.length > 0) {
+        const styleSheet = sheetQueue_1.shift();
+        if (!isDevelopment && styleSheet)
+            build(styleSheet, filePath);
+    }
+    isProcessing_1 = false;
+}
+export async function buildCreate(filePath) {
+    if (typeof globalPromise_1 === 'undefined')
+        initPromise_1();
+    if (!isProcessing_1 && sheetQueue_1.length > 0) {
+        isProcessing_1 = true;
+        processQueue_1(filePath);
+    }
+}
+export { resolvePromise_1, globalPromise_1, initPromise_1 };
+let resolvePromise_2;
+let globalPromise_2;
+const sheetQueue_2 = [];
+let isProcessing_2 = false;
+function initPromise_2() {
+    globalPromise_2 = new Promise((resolve) => {
+        resolvePromise_2 = (value) => {
+            sheetQueue_2.push(value);
+            resolve(value);
+        };
+    });
+}
+async function processQueue_2(filePath) {
+    while (sheetQueue_2.length > 0) {
+        const styleSheet = sheetQueue_2.shift();
+        if (!isDevelopment && styleSheet)
+            build(styleSheet, filePath, '--global');
+    }
+    isProcessing_2 = false;
+}
+export async function buildGlobal(filePath) {
+    if (typeof globalPromise_2 === 'undefined')
+        initPromise_2();
+    if (!isProcessing_2 && sheetQueue_2.length > 0) {
+        isProcessing_2 = true;
+        processQueue_2(filePath);
+    }
+}
+export { resolvePromise_2, globalPromise_2, initPromise_2 };

package/dist/esm/rx.js

@@ -1,4 +1,5 @@
-export const rx = (className, varSet) => ({
+const rx = (className, varSet) => ({
     className,
     style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value])),
 });
+export default rx;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plumeria/core",
-  "version": "0.8.14",
-  "description": "Near Zero-runtime CSS-in-JS for efficient design systems.",
+  "version": "0.9.2",
+  "description": "Zero-runtime CSS in JS library in TypeScript.",
   "keywords": [
     "css",
     "css-in-js",
@@ -19,16 +19,16 @@
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
-    "./stylesheet": "./stylesheet/core.css",
-    "./build-helper": {
-      "types": "./types/methods/build-helper.d.ts",
-      "import": "./dist/esm/methods/build-helper.js",
-      "default": "./dist/cjs/methods/build-helper.js"
-    },
+    "./stylesheet.css": "./stylesheet.css",
     ".": {
       "types": "./types/index.d.ts",
       "import": "./dist/esm/index.js",
       "default": "./dist/cjs/index.js"
+    },
+    "./processors": {
+      "types": "./types/processors/css.d.ts",
+      "import": "./dist/esm/processors/css.js",
+      "default": "./dist/cjs/processors/css.js"
     }
   },
   "main": "dist/cjs/index.js",
@@ -37,11 +37,11 @@
   "files": [
     "dist/",
     "types/",
-    "stylesheet/"
+    "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "^0.2.27",
-    "zss-utils": "0.2.0"
+    "zss-engine": "0.2.32",
+    "zss-utils": "0.2.2"
   },
   "publishConfig": {
     "access": "public"

package/types/css.d.ts

@@ -1,46 +1,49 @@
-import type { CreateStyle, CustomHTMLType, CustomProperties, KeyframesDefinition, ReturnType, VarsDefinition } from 'zss-engine';
-export declare class css {
-    static create<T extends Record<string, CustomProperties>>(object: CreateStyle<T>): ReturnType<T>;
-    static global(object: CustomHTMLType): void;
-    static defineThemeVars<const T extends VarsDefinition>(object: T): { [K in keyof T]: `var(--${string & K})`; };
-    static keyframes(object: KeyframesDefinition): string;
+import type { CSSProperties, CSSHTML, CreateStyleType, CreateTheme, CreateVars, CreateKeyframes, ReturnType, CreateStyle } from 'zss-engine';
+declare class css {
+    static create<T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): ReturnType<T>;
+    static global(object: CSSHTML): void;
+    static defineVars<const T extends CreateVars>(object: T): { [K in keyof T]: `var(--${string & K})`; };
+    static defineTheme<const T extends CreateTheme>(object: T): { [K in keyof T]: `var(--${string & K})`; };
+    static keyframes(object: CreateKeyframes): string;
     static media: {
-        range: (range: string) => "@media ()";
-        max: (str: string) => "@media (max-)";
-        min: (str: string) => "@media (min-)";
-        scheme: {
-            readonly dark: "@media (prefers-color-scheme: dark)";
-            readonly light: "@media (prefers-color-scheme: light)";
-        };
+        dark: "@media (prefers-color-scheme: dark)";
+        light: "@media (prefers-color-scheme: light)";
+        range: <S extends string>(range: S) => `@media (${S})`;
+        maxWidth: <V extends string | number>(value: V) => `@media (max-width: ${V}px)`;
+        maxHeight: <V extends string | number>(value: V) => `@media (max-height: ${V}px)`;
+        minWidth: <V extends string | number>(value: V) => `@media (min-width: ${V}px)`;
+        minHeight: <V extends string | number>(value: V) => `@media (min-height: ${V}px)`;
     };
     static container: {
-        range: (range: string) => "@container ()";
-        max: (str: string) => "@container (max-)";
-        min: (str: string) => "@container (min-)";
+        range: <S extends string>(range: S) => `@container (${S})`;
+        maxWidth: <V extends string | number>(value: V) => V extends number ? `@container (max-width: ${V}px)` : `@container (max-width: ${V})`;
+        maxHeight: <V extends string | number>(value: V) => V extends number ? `@container (max-height: ${V}px)` : `@container (max-height: ${V})`;
+        minWidth: <V extends string | number>(value: V) => V extends number ? `@container (min-width: ${V}px)` : `@container (min-width: ${V})`;
+        minHeight: <V extends string | number>(value: V) => V extends number ? `@container (min-height: ${V}px)` : `@container (min-height: ${V})`;
     };
     static pseudo: {
         fn: {
-            cue: (str: string) => "::cue()";
-            dir: (str: string) => ":dir()";
-            has: (str: string) => ":has()";
-            host: (str: string) => ":host()";
-            hostContext: (str: string) => ":host-context()";
-            is: (str: string) => ":is()";
-            lang: (str: string) => ":lang()";
-            nthChild: (str: string) => ":nth-child()";
-            nthLastChild: (str: string) => ":nth-last-child()";
-            nthLastOfType: (str: string) => ":nth-last-of-type()";
-            nthOfType: (str: string) => ":nth-of-type()";
-            not: (str: string) => ":not()";
-            state: (str: string) => ":state()";
-            where: (str: string) => ":where()";
-            highlight: (str: string) => "::highlight()";
-            part: (str: string) => "::part()";
-            slotted: (str: string) => "::slotted()";
-            viewTransitionImagePair: (str: string) => "::view-transition-image-pair()";
-            viewTransitionGroup: (str: string) => "::view-transition-group()";
-            viewTransitionOld: (str: string) => "::view-transition-old()";
-            viewTransitionNew: (str: string) => "::view-transition-new()";
+            cue: <S extends string>(str: S) => `::cue(${S})`;
+            dir: <S extends string>(str: S) => `:dir(${S})`;
+            has: <S extends string>(str: S) => `:has(${S})`;
+            host: <S extends string>(str: S) => `:host(${S})`;
+            hostContext: <S extends string>(str: S) => `:host-context(${S})`;
+            is: <S extends string>(str: S) => `:is(${S})`;
+            lang: <S extends string>(str: S) => `:lang(${S})`;
+            nthChild: <S extends string>(str: S) => `:nth-child(${S})`;
+            nthLastChild: <S extends string>(str: S) => `:nth-last-child(${S})`;
+            nthLastOfType: <S extends string>(str: S) => `:nth-last-of-type(${S})`;
+            nthOfType: <S extends string>(str: S) => `:nth-of-type(${S})`;
+            not: <S extends string>(str: S) => `:not(${S})`;
+            state: <S extends string>(str: S) => `:state(${S})`;
+            where: <S extends string>(str: S) => `:where(${S})`;
+            highlight: <S extends string>(str: S) => `::highlight(${S})`;
+            part: <S extends string>(str: S) => `::part(${S})`;
+            slotted: <S extends string>(str: S) => `::slotted(${S})`;
+            viewTransitionImagePair: <S extends string>(str: S) => `::view-transition-image-pair(${S})`;
+            viewTransitionGroup: <S extends string>(str: S) => `::view-transition-group(${S})`;
+            viewTransitionOld: <S extends string>(str: S) => `::view-transition-old(${S})`;
+            viewTransitionNew: <S extends string>(str: S) => `::view-transition-new(${S})`;
         };
         active: ":active";
         anyLink: ":any-link";
@@ -87,7 +90,7 @@ export declare class css {
         readWrite: ":read-write";
         required: ":required";
         right: ":right";
-        root: "root";
+        root: ":root";
         scope: ":scope";
         seeking: ":seeking";
         stalled: ":stalled";
@@ -114,7 +117,163 @@ export declare class css {
         viewTransition: "::view-transition";
     };
     static color: {
-        lighten: (color: string, amount: string | number) => string;
-        darken: (color: string, amount: string | number) => string;
+        lighten: (color: string, amount: string | number) => `color-mix(in srgb, ${string}, white ${number}%)`;
+        darken: (color: string, amount: string | number) => `color-mix(in srgb, ${string}, black ${number}%)`;
+        primary: "#0070f3";
+        secondary: "#ff4081";
+        success: "#2e7d32";
+        warning: "#ed6c02";
+        error: "#d32f2f";
+        aliceblue: "aliceblue";
+        antiquewhite: "antiquewhite";
+        aqua: "aqua";
+        aquamarine: "aquamarine";
+        azure: "azure";
+        beige: "beige";
+        bisque: "bisque";
+        black: "black";
+        blanchedalmond: "blanchedalmond";
+        blue: "blue";
+        blueviolet: "blueviolet";
+        brown: "brown";
+        burlywood: "burlywood";
+        cadetblue: "cadetblue";
+        chartreuse: "chartreuse";
+        chocolate: "chocolate";
+        coral: "coral";
+        cornflowerblue: "cornflowerblue";
+        cornsilk: "cornsilk";
+        crimson: "crimson";
+        cyan: "cyan";
+        darkblue: "darkblue";
+        darkcyan: "darkcyan";
+        darkgoldenrod: "darkgoldenrod";
+        darkgray: "darkgray";
+        darkgreen: "darkgreen";
+        darkgrey: "darkgrey";
+        darkkhaki: "darkkhaki";
+        darkmagenta: "darkmagenta";
+        darkolivegreen: "darkolivegreen";
+        darkorange: "darkorange";
+        darkorchid: "darkorchid";
+        darkred: "darkred";
+        darksalmon: "darksalmon";
+        darkseagreen: "darkseagreen";
+        darkslateblue: "darkslateblue";
+        darkslategray: "darkslategray";
+        darkslategrey: "darkslategrey";
+        darkturquoise: "darkturquoise";
+        darkviolet: "darkviolet";
+        deeppink: "deeppink";
+        deepskyblue: "deepskyblue";
+        dimgray: "dimgray";
+        dimgrey: "dimgrey";
+        dodgerblue: "dodgerblue";
+        firebrick: "firebrick";
+        floralwhite: "floralwhite";
+        forestgreen: "forestgreen";
+        fuchsia: "fuchsia";
+        gainsboro: "gainsboro";
+        ghostwhite: "ghostwhite";
+        gold: "gold";
+        goldenrod: "goldenrod";
+        gray: "gray";
+        green: "green";
+        greenyellow: "greenyellow";
+        grey: "grey";
+        honeydew: "honeydew";
+        hotpink: "hotpink";
+        indianred: "indianred";
+        indigo: "indigo";
+        ivory: "ivory";
+        khaki: "khaki";
+        lavender: "lavender";
+        lavenderblush: "lavenderblush";
+        lawngreen: "lawngreen";
+        lemonchiffon: "lemonchiffon";
+        lightblue: "lightblue";
+        lightcoral: "lightcoral";
+        lightcyan: "lightcyan";
+        lightgoldenrodyellow: "lightgoldenrodyellow";
+        lightgray: "lightgray";
+        lightgreen: "lightgreen";
+        lightgrey: "lightgrey";
+        lightpink: "lightpink";
+        lightsalmon: "lightsalmon";
+        lightseagreen: "lightseagreen";
+        lightskyblue: "lightskyblue";
+        lightslategray: "lightslategray";
+        lightslategrey: "lightslategrey";
+        lightsteelblue: "lightsteelblue";
+        lightyellow: "lightyellow";
+        lime: "lime";
+        limegreen: "limegreen";
+        linen: "linen";
+        magenta: "magenta";
+        maroon: "maroon";
+        mediumaquamarine: "mediumaquamarine";
+        mediumblue: "mediumblue";
+        mediumorchid: "mediumorchid";
+        mediumpurple: "mediumpurple";
+        mediumseagreen: "mediumseagreen";
+        mediumslateblue: "mediumslateblue";
+        mediumspringgreen: "mediumspringgreen";
+        mediumturquoise: "mediumturquoise";
+        mediumvioletred: "mediumvioletred";
+        midnightblue: "midnightblue";
+        mintcream: "mintcream";
+        mistyrose: "mistyrose";
+        moccasin: "moccasin";
+        navajowhite: "navajowhite";
+        navy: "navy";
+        oldlace: "oldlace";
+        olive: "olive";
+        olivedrab: "olivedrab";
+        orange: "orange";
+        orangered: "orangered";
+        orchid: "orchid";
+        palegoldenrod: "palegoldenrod";
+        palegreen: "palegreen";
+        paleturquoise: "paleturquoise";
+        palevioletred: "palevioletred";
+        papayawhip: "papayawhip";
+        peachpuff: "peachpuff";
+        peru: "peru";
+        pink: "pink";
+        plum: "plum";
+        powderblue: "powderblue";
+        purple: "purple";
+        rebeccapurple: "rebeccapurple";
+        red: "red";
+        rosybrown: "rosybrown";
+        royalblue: "royalblue";
+        saddlebrown: "saddlebrown";
+        salmon: "salmon";
+        sandybrown: "sandybrown";
+        seagreen: "seagreen";
+        seashell: "seashell";
+        sienna: "sienna";
+        silver: "silver";
+        skyblue: "skyblue";
+        slateblue: "slateblue";
+        slategray: "slategray";
+        slategrey: "slategrey";
+        snow: "snow";
+        springgreen: "springgreen";
+        steelblue: "steelblue";
+        tan: "tan";
+        teal: "teal";
+        thistle: "thistle";
+        tomato: "tomato";
+        transparent: "transparent";
+        turquoise: "turquoise";
+        violet: "violet";
+        wheat: "wheat";
+        white: "white";
+        whitesmoke: "whitesmoke";
+        yellow: "yellow";
+        yellowgreen: "yellowgreen";
     };
 }
+export default css;
+export type { CSSProperties, CSSHTML, CreateStyle };

package/types/cx.d.ts

@@ -1 +1,2 @@
-export declare const cx: (...strings: Array<string | null | undefined | false>) => string & ":";
+declare const cx: (...strings: Array<string | null | undefined | false>) => string & ":";
+export default cx;

package/types/index.d.ts

@@ -1,3 +1,4 @@
-export { css } from './css';
-export { cx } from './cx';
-export { rx } from './rx';
+export { default as css } from './css';
+export { default as cx } from './cx';
+export { default as rx } from './rx';
+export type { CreateStyle, CSSProperties, CSSHTML } from './css';

package/types/processors/css.d.ts

@@ -0,0 +1,10 @@
+declare let resolvePromise_1: (value: string) => void;
+declare let globalPromise_1: Promise<string>;
+declare function initPromise_1(): void;
+export declare function buildCreate(filePath: string): Promise<void>;
+export { resolvePromise_1, globalPromise_1, initPromise_1 };
+declare let resolvePromise_2: (value: string) => void;
+declare let globalPromise_2: Promise<string>;
+declare function initPromise_2(): void;
+export declare function buildGlobal(filePath: string): Promise<void>;
+export { resolvePromise_2, globalPromise_2, initPromise_2 };

package/types/rx.d.ts

@@ -1,4 +1,4 @@
-export declare const rx: (className: string, varSet: {
+declare const rx: (className: string, varSet: {
     [key: `--${string}`]: string;
 }) => {
     className: string;
@@ -6,3 +6,4 @@ export declare const rx: (className: string, varSet: {
         [k: string]: string;
     };
 };
+export default rx;

package/dist/cjs/methods/build-helper.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildGlobal = exports.buildCreate = void 0;
-var create_build_helper_js_1 = require("./create-build-helper.js");
-Object.defineProperty(exports, "buildCreate", { enumerable: true, get: function () { return create_build_helper_js_1.buildCreate; } });
-var global_build_helper_js_1 = require("./global-build-helper.js");
-Object.defineProperty(exports, "buildGlobal", { enumerable: true, get: function () { return global_build_helper_js_1.buildGlobal; } });

package/dist/cjs/methods/create-build-helper.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.globalPromise = exports.resolvePromise = void 0;
-exports.buildCreate = buildCreate;
-exports.initPromise = initPromise;
-const zss_engine_1 = require("zss-engine");
-let resolvePromise;
-let globalPromise;
-const sheetQueue = [];
-let isProcessing = false;
-function initPromise() {
-    exports.globalPromise = globalPromise = new Promise((resolve) => {
-        exports.resolvePromise = resolvePromise = (value) => {
-            sheetQueue.push(value);
-            resolve(value);
-        };
-    });
-}
-async function processQueue(filePath) {
-    while (sheetQueue.length > 0) {
-        const styleSheet = sheetQueue.shift();
-        if (!zss_engine_1.isDevelopment && styleSheet)
-            (0, zss_engine_1.build)(styleSheet, filePath);
-    }
-    isProcessing = false;
-}
-async function buildCreate(filePath) {
-    if (typeof globalPromise === 'undefined')
-        initPromise();
-    if (!isProcessing && sheetQueue.length > 0) {
-        isProcessing = true;
-        processQueue(filePath);
-    }
-}

package/dist/cjs/methods/create.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.create = create;
-const zss_engine_1 = require("zss-engine");
-const create_build_helper_js_1 = require("./create-build-helper.js");
-function create(object) {
-    const base36Hash = (0, zss_engine_1.genBase36Hash)(object, 6);
-    const { styleSheet } = (0, zss_engine_1.transpiler)(object, base36Hash);
-    const injectCSS = zss_engine_1.isServer ? zss_engine_1.injectServerCSS : zss_engine_1.injectClientCSS;
-    if (typeof create_build_helper_js_1.globalPromise === 'undefined')
-        (0, create_build_helper_js_1.initPromise)();
-    (0, create_build_helper_js_1.resolvePromise)(styleSheet);
-    Object.keys(object).forEach((key) => {
-        Object.defineProperty(object, key, {
-            get: () => {
-                const className = key + '_' + base36Hash;
-                if (zss_engine_1.isDevAndTest)
-                    injectCSS(base36Hash, styleSheet);
-                return className;
-            },
-        });
-    });
-    return Object.freeze(object);
-}

package/dist/cjs/methods/define-theme-vars.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineThemeVars = void 0;
-const global_js_1 = require("./global.js");
-const defineThemeVars = (object) => {
-    const globalStyles = {};
-    const result = {};
-    Object.entries(object).forEach(([key, value]) => {
-        result[key] = `var(--${key})`;
-        if (typeof value === 'string') {
-            (globalStyles[':root'] ||= {})[`--${key}`] = value;
-        }
-        else if (typeof value === 'object') {
-            Object.entries(value).forEach(([subKey, subValue]) => {
-                if (subKey.startsWith('@media')) {
-                    (globalStyles[':root'] ||= {})[subKey] ||= {};
-                    globalStyles[':root'][subKey][`--${key}`] = subValue;
-                }
-                else {
-                    const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
-                    (globalStyles[themeSelector] ||= {})[`--${key}`] = subValue;
-                }
-            });
-        }
-    });
-    (0, global_js_1.global)(globalStyles);
-    return result;
-};
-exports.defineThemeVars = defineThemeVars;

package/dist/cjs/methods/global-build-helper.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.globalPromise = exports.resolvePromise = void 0;
-exports.buildGlobal = buildGlobal;
-exports.initPromise = initPromise;
-const zss_engine_1 = require("zss-engine");
-let resolvePromise;
-let globalPromise;
-const seetQueue = [];
-let isProcessing = false;
-function initPromise() {
-    exports.globalPromise = globalPromise = new Promise((resolve) => {
-        exports.resolvePromise = resolvePromise = (value) => {
-            seetQueue.push(value);
-            resolve(value);
-        };
-    });
-}
-async function processSheets(filePath) {
-    while (seetQueue.length > 0) {
-        const [styleSheet, option] = seetQueue.shift();
-        if (!zss_engine_1.isDevelopment && styleSheet)
-            (0, zss_engine_1.build)(styleSheet, filePath, option);
-    }
-    isProcessing = false;
-}
-async function buildGlobal(filePath) {
-    if (typeof globalPromise === 'undefined')
-        initPromise();
-    if (!isProcessing && seetQueue.length > 0) {
-        isProcessing = true;
-        processSheets(filePath);
-    }
-}

package/dist/cjs/methods/global.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.global = global;
-const zss_engine_1 = require("zss-engine");
-const global_build_helper_js_1 = require("./global-build-helper.js");
-function global(object) {
-    const base36Hash = (0, zss_engine_1.genBase36Hash)(object, 8);
-    const { styleSheet } = (0, zss_engine_1.transpiler)(object, undefined, '--global');
-    if (typeof global_build_helper_js_1.globalPromise === 'undefined')
-        (0, global_build_helper_js_1.initPromise)();
-    (0, global_build_helper_js_1.resolvePromise)([styleSheet, '--global']);
-    if (zss_engine_1.isDevAndTest)
-        zss_engine_1.isServer
-            ? (0, zss_engine_1.injectServerCSS)(base36Hash, styleSheet)
-            : (0, zss_engine_1.injectClientGlobalCSS)(styleSheet, 'global');
-}

package/dist/cjs/methods/keyframes.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframes = void 0;
-const zss_engine_1 = require("zss-engine");
-const global_js_1 = require("./global.js");
-const keyframes = (object) => {
-    const prefix = (0, zss_engine_1.genBase36Hash)(object, 8);
-    (0, global_js_1.global)({ [`@keyframes ${prefix}`]: object });
-    return prefix;
-};
-exports.keyframes = keyframes;

package/dist/esm/methods/build-helper.js

@@ -1,2 +0,0 @@
-export { buildCreate } from './create-build-helper.js';
-export { buildGlobal } from './global-build-helper.js';

package/dist/esm/methods/create-build-helper.js

@@ -1,30 +0,0 @@
-import { build, isDevelopment } from 'zss-engine';
-let resolvePromise;
-let globalPromise;
-const sheetQueue = [];
-let isProcessing = false;
-function initPromise() {
-    globalPromise = new Promise((resolve) => {
-        resolvePromise = (value) => {
-            sheetQueue.push(value);
-            resolve(value);
-        };
-    });
-}
-async function processQueue(filePath) {
-    while (sheetQueue.length > 0) {
-        const styleSheet = sheetQueue.shift();
-        if (!isDevelopment && styleSheet)
-            build(styleSheet, filePath);
-    }
-    isProcessing = false;
-}
-export async function buildCreate(filePath) {
-    if (typeof globalPromise === 'undefined')
-        initPromise();
-    if (!isProcessing && sheetQueue.length > 0) {
-        isProcessing = true;
-        processQueue(filePath);
-    }
-}
-export { resolvePromise, globalPromise, initPromise };

package/dist/esm/methods/create.js

@@ -1,21 +0,0 @@
-import { isDevAndTest, transpiler, genBase36Hash, isServer, injectServerCSS, injectClientCSS, } from 'zss-engine';
-import { initPromise, globalPromise, resolvePromise, } from './create-build-helper.js';
-export function create(object) {
-    const base36Hash = genBase36Hash(object, 6);
-    const { styleSheet } = transpiler(object, base36Hash);
-    const injectCSS = isServer ? injectServerCSS : injectClientCSS;
-    if (typeof globalPromise === 'undefined')
-        initPromise();
-    resolvePromise(styleSheet);
-    Object.keys(object).forEach((key) => {
-        Object.defineProperty(object, key, {
-            get: () => {
-                const className = key + '_' + base36Hash;
-                if (isDevAndTest)
-                    injectCSS(base36Hash, styleSheet);
-                return className;
-            },
-        });
-    });
-    return Object.freeze(object);
-}

package/dist/esm/methods/define-theme-vars.js

@@ -1,25 +0,0 @@
-import { global } from './global.js';
-export const defineThemeVars = (object) => {
-    const globalStyles = {};
-    const result = {};
-    Object.entries(object).forEach(([key, value]) => {
-        result[key] = `var(--${key})`;
-        if (typeof value === 'string') {
-            (globalStyles[':root'] ||= {})[`--${key}`] = value;
-        }
-        else if (typeof value === 'object') {
-            Object.entries(value).forEach(([subKey, subValue]) => {
-                if (subKey.startsWith('@media')) {
-                    (globalStyles[':root'] ||= {})[subKey] ||= {};
-                    globalStyles[':root'][subKey][`--${key}`] = subValue;
-                }
-                else {
-                    const themeSelector = subKey === 'default' ? ':root' : `:root[data-theme="${subKey}"]`;
-                    (globalStyles[themeSelector] ||= {})[`--${key}`] = subValue;
-                }
-            });
-        }
-    });
-    global(globalStyles);
-    return result;
-};

package/dist/esm/methods/global-build-helper.js

@@ -1,30 +0,0 @@
-import { build, isDevelopment } from 'zss-engine';
-let resolvePromise;
-let globalPromise;
-const seetQueue = [];
-let isProcessing = false;
-function initPromise() {
-    globalPromise = new Promise((resolve) => {
-        resolvePromise = (value) => {
-            seetQueue.push(value);
-            resolve(value);
-        };
-    });
-}
-async function processSheets(filePath) {
-    while (seetQueue.length > 0) {
-        const [styleSheet, option] = seetQueue.shift();
-        if (!isDevelopment && styleSheet)
-            build(styleSheet, filePath, option);
-    }
-    isProcessing = false;
-}
-export async function buildGlobal(filePath) {
-    if (typeof globalPromise === 'undefined')
-        initPromise();
-    if (!isProcessing && seetQueue.length > 0) {
-        isProcessing = true;
-        processSheets(filePath);
-    }
-}
-export { resolvePromise, globalPromise, initPromise };

package/dist/esm/methods/global.js

@@ -1,13 +0,0 @@
-import { isDevAndTest, isServer, injectServerCSS, injectClientGlobalCSS, transpiler, genBase36Hash, } from 'zss-engine';
-import { resolvePromise, globalPromise, initPromise, } from './global-build-helper.js';
-export function global(object) {
-    const base36Hash = genBase36Hash(object, 8);
-    const { styleSheet } = transpiler(object, undefined, '--global');
-    if (typeof globalPromise === 'undefined')
-        initPromise();
-    resolvePromise([styleSheet, '--global']);
-    if (isDevAndTest)
-        isServer
-            ? injectServerCSS(base36Hash, styleSheet)
-            : injectClientGlobalCSS(styleSheet, 'global');
-}

package/dist/esm/methods/keyframes.js

@@ -1,7 +0,0 @@
-import { genBase36Hash } from 'zss-engine';
-import { global } from './global.js';
-export const keyframes = (object) => {
-    const prefix = genBase36Hash(object, 8);
-    global({ [`@keyframes ${prefix}`]: object });
-    return prefix;
-};

package/types/methods/build-helper.d.ts

@@ -1,2 +0,0 @@
-export { buildCreate } from './create-build-helper.js';
-export { buildGlobal } from './global-build-helper.js';

package/types/methods/create-build-helper.d.ts

@@ -1,5 +0,0 @@
-declare let resolvePromise: (value: string) => void;
-declare let globalPromise: Promise<string>;
-declare function initPromise(): void;
-export declare function buildCreate(filePath: string): Promise<void>;
-export { resolvePromise, globalPromise, initPromise };

package/types/methods/create.d.ts

@@ -1,2 +0,0 @@
-import type { ReturnType, CreateStyle, CustomProperties } from 'zss-engine';
-export declare function create<T extends Record<string, CustomProperties>>(object: CreateStyle<T>): ReturnType<T>;

package/types/methods/define-theme-vars.d.ts

@@ -1,2 +0,0 @@
-import type { VarsDefinition } from 'zss-engine';
-export declare const defineThemeVars: <const T extends VarsDefinition>(object: T) => { [K in keyof T]: `var(--${string & K})`; };

package/types/methods/global-build-helper.d.ts

@@ -1,5 +0,0 @@
-declare let resolvePromise: (value: [string, string]) => void;
-declare let globalPromise: Promise<[string, string]>;
-declare function initPromise(): void;
-export declare function buildGlobal(filePath: string): Promise<void>;
-export { resolvePromise, globalPromise, initPromise };

package/types/methods/global.d.ts

@@ -1,2 +0,0 @@
-import type { CustomHTMLType, VarsDefinition } from 'zss-engine';
-export declare function global(object: CustomHTMLType | VarsDefinition): void;

package/types/methods/keyframes.d.ts

@@ -1,2 +0,0 @@
-import { type KeyframesDefinition } from 'zss-engine';
-export declare const keyframes: (object: KeyframesDefinition) => string;