@plumeria/core 0.8.12 → 0.8.13

package/README.md

@@ -99,7 +99,7 @@ css.global({
 
 ### cx
 
-Merges strings such as class names and pseudos.
+Merges strings such as class names and pseudo.
 
 ```tsx
 const styles = css.create({
@@ -140,8 +140,8 @@ Define data-theme and regular variables 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 preset = css.defineThemeVars({
-  normal: 'white',
+const tokens = css.defineThemeVars({
+  white: 'white',
   text_primary: {
     default: 'rgb(60,60,60)',
     light: 'black',
@@ -165,35 +165,19 @@ color: css.colors.darken('skyblue', 0.12),
 color: css.colors.lighten('navy', 0.6),
 ```
 
-## Linter
+## ESLint
 
-[eslint-plugin-zss-lint](https://www.npmjs.com/package/eslint-plugin-zss-lint) is a linter built for CSS-in-JS libraries built with zss-engine.
+[@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plugin)
 
-Rules:  
-\- sort-properties  
-\- validate-values  
-\- no-unused-keys
+### Rules: recommended
 
-Type safety relies on this eslint-plugin. It includes all properties, excluding deprecated and experimental.
+\- no-inner-call:(error)  
+\- no-unused-keys:(warn)  
+\- sort-properties:(warn)  
+\- validate-values:(warn)
 
-## How Plumeria works
+It is recommended to use it in conjunction with TypeScript completion, which is one of the big advantages of using plumeria.
 
-Plumeria complies with Semantic HTML, which means that it uses one style for each class name.
+## License
 
-```ts
-import { css } from '@plumeria/core';
-
-const styles = css.create({
-  box: {
-    width: '100%',
-    color: 'rgb(60,60,60)',
-  },
-  text: {
-    color: 'yellow',
-  },
-});
-```
-
-This is necessary to preserve the CSS syntax and the concept of keeping track of classes.  
-In this code, box and text are converted to class names with a prefix that makes the object a hash: .box_ybg34i .text_ybg34i  
-These classes are designed to be used in CSS syntax.
+plumeria is [MIT licensed](https://github.com/refirst11/rscute/blob/main/LICENSE).

package/dist/cjs/css.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.css = void 0;
+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");
+class css {
+    static create(object) {
+        return (0, create_1.create)(object);
+    }
+    static global(object) {
+        return (0, global_1.global)(object);
+    }
+    static defineThemeVars(object) {
+        return (0, define_theme_vars_1.defineThemeVars)(object);
+    }
+    static keyframes(object) {
+        return (0, keyframes_1.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;

package/dist/cjs/cx.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+const cx = (...strings) => {
+    let result = '';
+    let isFirst = true;
+    strings.filter(Boolean).forEach((str) => {
+        if (str?.toString().startsWith(':')) {
+            result += str.toString();
+        }
+        else if (typeof str === 'string') {
+            if (isFirst) {
+                result += str;
+                isFirst = false;
+            }
+            else {
+                result += ` ${str}`;
+            }
+        }
+    });
+    return result;
+};
+exports.cx = cx;

package/dist/cjs/index.js

@@ -1,25 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rx = exports.cx = exports.css = void 0;
-const zss_utils_1 = require("zss-utils");
-Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return zss_utils_1.cx; } });
-Object.defineProperty(exports, "rx", { enumerable: true, get: function () { return zss_utils_1.rx; } });
-class css {
-    static create(object) {
-        return (0, zss_utils_1.create)(object);
-    }
-    static global(object) {
-        return (0, zss_utils_1.global)(object);
-    }
-    static defineThemeVars(object) {
-        return (0, zss_utils_1.defineThemeVars)(object);
-    }
-    static keyframes(object) {
-        return (0, zss_utils_1.keyframes)(object);
-    }
-    static media = zss_utils_1.media;
-    static pseudo = zss_utils_1.pseudo;
-    static colors = zss_utils_1.colors;
-    static container = zss_utils_1.container;
-}
-exports.css = css;
+var css_1 = require("./css");
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return css_1.css; } });
+var cx_1 = require("./cx");
+Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
+var rx_1 = require("./rx");
+Object.defineProperty(exports, "rx", { enumerable: true, get: function () { return rx_1.rx; } });

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

@@ -0,0 +1,7 @@
+"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

@@ -0,0 +1,34 @@
+"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

@@ -0,0 +1,24 @@
+"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

@@ -0,0 +1,29 @@
+"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

@@ -0,0 +1,34 @@
+"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

@@ -0,0 +1,16 @@
+"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

@@ -0,0 +1,11 @@
+"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/cjs/rx.js

@@ -0,0 +1,8 @@
+"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;

package/dist/esm/css.js

@@ -0,0 +1,23 @@
+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 {
+    static create(object) {
+        return create(object);
+    }
+    static global(object) {
+        return global(object);
+    }
+    static defineThemeVars(object) {
+        return defineThemeVars(object);
+    }
+    static keyframes(object) {
+        return keyframes(object);
+    }
+    static media = media;
+    static container = container;
+    static pseudo = pseudo;
+    static color = color;
+}

package/dist/esm/cx.js

@@ -0,0 +1,19 @@
+export const cx = (...strings) => {
+    let result = '';
+    let isFirst = true;
+    strings.filter(Boolean).forEach((str) => {
+        if (str?.toString().startsWith(':')) {
+            result += str.toString();
+        }
+        else if (typeof str === 'string') {
+            if (isFirst) {
+                result += str;
+                isFirst = false;
+            }
+            else {
+                result += ` ${str}`;
+            }
+        }
+    });
+    return result;
+};

package/dist/esm/index.js

@@ -1,20 +1,3 @@
-import { create, global, keyframes, defineThemeVars, media, pseudo, colors, container, cx, rx, } from 'zss-utils';
-class css {
-    static create(object) {
-        return create(object);
-    }
-    static global(object) {
-        return global(object);
-    }
-    static defineThemeVars(object) {
-        return defineThemeVars(object);
-    }
-    static keyframes(object) {
-        return keyframes(object);
-    }
-    static media = media;
-    static pseudo = pseudo;
-    static colors = colors;
-    static container = container;
-}
-export { css, cx, rx };
+export { css } from './css';
+export { cx } from './cx';
+export { rx } from './rx';

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

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

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,7 @@
+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/dist/esm/rx.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "0.8.12",
+  "version": "0.8.13",
   "description": "Near Zero-runtime CSS-in-JS for efficient design systems.",
   "keywords": [
     "css",
@@ -20,15 +20,15 @@
   "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"
+    },
     ".": {
       "types": "./types/index.d.ts",
       "import": "./dist/esm/index.js",
       "default": "./dist/cjs/index.js"
-    },
-    "./build-helper": {
-      "types": "./types/build-helper.d.ts",
-      "import": "./dist/esm/build-helper.js",
-      "default": "./dist/cjs/build-helper.js"
     }
   },
   "main": "dist/cjs/index.js",
@@ -40,7 +40,8 @@
     "stylesheet/"
   ],
   "dependencies": {
-    "zss-utils": "0.1.1"
+    "zss-engine": "^0.2.27",
+    "zss-utils": "0.2.0"
   },
   "publishConfig": {
     "access": "public"

package/types/css.d.ts

@@ -0,0 +1,120 @@
+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;
+    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)";
+        };
+    };
+    static container: {
+        range: (range: string) => "@container ()";
+        max: (str: string) => "@container (max-)";
+        min: (str: string) => "@container (min-)";
+    };
+    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()";
+        };
+        active: ":active";
+        anyLink: ":any-link";
+        autoFill: ":autofill";
+        buffering: ":buffering";
+        checked: ":checked";
+        default: ":default";
+        defined: ":defined";
+        disabled: ":disabled";
+        empty: ":empty";
+        enabled: ":enabled";
+        first: ":first";
+        firstChild: ":first-child";
+        firstOfType: ":first-of-type";
+        focus: ":focus";
+        focusVisible: ":focus-visible";
+        focusWithin: ":focus-within";
+        fullscreen: ":fullscreen";
+        future: ":future";
+        hasSlotted: ":has-slotted";
+        host: ":host";
+        hover: ":hover";
+        inRange: ":in-range";
+        indeterminate: ":indeterminate";
+        invalid: ":invalid";
+        lastChild: ":last-child";
+        lastOfType: ":last-of-type";
+        left: ":left";
+        link: ":link";
+        modal: ":modal";
+        muted: ":muted";
+        onlyChild: ":only-child";
+        onlyOfType: ":only-of-type";
+        open: ":open";
+        optional: ":optional";
+        outOfRange: ":out-of-range";
+        past: ":past";
+        paused: ":paused";
+        pictureInPicture: ":picture-in-picture";
+        placeholderShown: ":placeholder-shown";
+        playing: ":playing";
+        popoverOpen: ":popover-open";
+        readOnly: ":read-only";
+        readWrite: ":read-write";
+        required: ":required";
+        right: ":right";
+        root: "root";
+        scope: ":scope";
+        seeking: ":seeking";
+        stalled: ":stalled";
+        target: ":target";
+        userInvalid: ":user-invalid";
+        userValid: ":user-valid";
+        valid: ":valid";
+        visited: ":visited";
+        volumeLocked: ":volume-locked";
+        after: "::after";
+        backdrop: "::backdrop";
+        before: "::before";
+        cue: "::cue";
+        detailsContent: "::details-content";
+        firstSelectorButton: "::first-selector-button";
+        firstLetter: "::first-letter";
+        firstLine: "::first-line";
+        grammarError: "::grammar-error";
+        marker: "::marker";
+        placeholder: "::placeholder";
+        selection: "::selection";
+        spellingError: "::spellingError";
+        targetText: "::target-text";
+        viewTransition: "::view-transition";
+    };
+    static color: {
+        lighten: (color: string, amount: string | number) => string;
+        darken: (color: string, amount: string | number) => string;
+    };
+}

package/types/cx.d.ts

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

package/types/index.d.ts

@@ -1,132 +1,3 @@
-import type { CreateStyle, CustomHTMLType, CustomProperties, KeyframesDefinition, ReturnType, VarsDefinition } from 'zss-utils';
-import { cx, rx } from 'zss-utils';
-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;
-    static media: {
-        readonly min_sm: "@media (min-width: 640px)";
-        readonly min_md: "@media (min-width: 768px)";
-        readonly min_lg: "@media (min-width: 1024px)";
-        readonly min_xl: "@media (min-width: 1280px)";
-        readonly min_2xl: "@media (min-width: 1536px)";
-        readonly max_sm: "@media (max-width: 640px)";
-        readonly max_md: "@media (max-width: 768px)";
-        readonly max_lg: "@media (max-width: 1024px)";
-        readonly max_xl: "@media (max-width: 1280px)";
-        readonly max_2xl: "@media (max-width: 1536px)";
-        readonly range: (range: string) => "@media ()";
-        readonly max: (str: string) => "@media (max-)";
-        readonly min: (str: string) => "@media (min-)";
-        readonly scheme: {
-            readonly dark: "@media (prefers-color-scheme: dark)";
-            readonly light: "@media (prefers-color-scheme: light)";
-        };
-    };
-    static pseudo: {
-        readonly active: ":active";
-        readonly anyLink: ":any-link";
-        readonly autoFill: ":autofill";
-        readonly buffering: ":buffering";
-        readonly checked: ":checked";
-        readonly default: ":default";
-        readonly defined: ":defined";
-        readonly disabled: ":disabled";
-        readonly empty: ":empty";
-        readonly enabled: ":enabled";
-        readonly first: ":first";
-        readonly firstChild: ":first-child";
-        readonly firstOfType: ":first-of-type";
-        readonly focus: ":focus";
-        readonly focusVisible: ":focus-visible";
-        readonly focusWithin: ":focus-within";
-        readonly fullscreen: ":fullscreen";
-        readonly future: ":future";
-        readonly hasSlotted: ":has-slotted";
-        readonly host: ":host";
-        readonly hover: ":hover";
-        readonly inRange: ":in-range";
-        readonly indeterminate: ":indeterminate";
-        readonly invalid: ":invalid";
-        readonly lastChild: ":last-child";
-        readonly lastOfType: ":last-of-type";
-        readonly left: ":left";
-        readonly link: ":link";
-        readonly modal: ":modal";
-        readonly muted: ":muted";
-        readonly onlyChild: ":only-child";
-        readonly onlyOfType: ":only-of-type";
-        readonly open: ":open";
-        readonly optional: ":optional";
-        readonly outOfRange: ":out-of-range";
-        readonly past: ":past";
-        readonly paused: ":paused";
-        readonly pictureInPicture: ":picture-in-picture";
-        readonly placeholderShown: ":placeholder-shown";
-        readonly playing: ":playing";
-        readonly popoverOpen: ":popover-open";
-        readonly readOnly: ":read-only";
-        readonly readWrite: ":read-write";
-        readonly required: ":required";
-        readonly right: ":right";
-        readonly root: "root";
-        readonly scope: ":scope";
-        readonly seeking: ":seeking";
-        readonly stalled: ":stalled";
-        readonly target: ":target";
-        readonly userInvalid: ":user-invalid";
-        readonly userValid: ":user-valid";
-        readonly valid: ":valid";
-        readonly visited: ":visited";
-        readonly volumeLocked: ":volume-locked";
-        readonly after: "::after";
-        readonly backdrop: "::backdrop";
-        readonly before: "::before";
-        readonly cue: "::cue";
-        readonly detailsContent: "::details-content";
-        readonly firstSelectorButton: "::first-selector-button";
-        readonly firstLetter: "::first-letter";
-        readonly firstLine: "::first-line";
-        readonly grammarError: "::grammar-error";
-        readonly marker: "::marker";
-        readonly placeholder: "::placeholder";
-        readonly selection: "::selection";
-        readonly spellingError: "::spellingError";
-        readonly targetText: "::target-text";
-        readonly viewTransition: "::view-transition";
-        readonly fn: {
-            readonly cue: (str: string) => "::cue()";
-            readonly dir: (str: string) => ":dir()";
-            readonly has: (str: string) => ":has()";
-            readonly host: (str: string) => ":host()";
-            readonly hostContext: (str: string) => ":host-context()";
-            readonly is: (str: string) => ":is()";
-            readonly lang: (str: string) => ":lang()";
-            readonly nthChild: (str: string) => ":nth-child()";
-            readonly nthLastChild: (str: string) => ":nth-last-child()";
-            readonly nthLastOfType: (str: string) => ":nth-last-of-type()";
-            readonly nthOfType: (str: string) => ":nth-of-type()";
-            readonly not: (str: string) => ":not()";
-            readonly state: (str: string) => ":state()";
-            readonly where: (str: string) => ":where()";
-            readonly highlight: (str: string) => "::highlight()";
-            readonly part: (str: string) => "::part()";
-            readonly slotted: (str: string) => "::slotted()";
-            readonly viewTransitionImagePair: (str: string) => "::view-transition-image-pair()";
-            readonly viewTransitionGroup: (str: string) => "::view-transition-group()";
-            readonly viewTransitionOld: (str: string) => "::view-transition-old()";
-            readonly viewTransitionNew: (str: string) => "::view-transition-new()";
-        };
-    };
-    static colors: {
-        lighten: (color: string, amount: string | number) => string;
-        darken: (color: string, amount: string | number) => string;
-    };
-    static container: {
-        range: (range: string) => "@container ()";
-        max: (str: string) => "@container (max-)";
-        min: (str: string) => "@container (min-)";
-    };
-}
-export { css, cx, rx };
+export { css } from './css';
+export { cx } from './cx';
+export { rx } from './rx';

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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,5 @@
+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

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

package/types/methods/keyframes.d.ts

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

package/types/rx.d.ts

@@ -0,0 +1,8 @@
+export declare const rx: (className: string, varSet: {
+    [key: `--${string}`]: string;
+}) => {
+    className: string;
+    style: {
+        [k: string]: string;
+    };
+};

package/dist/cjs/build-helper.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildGlobal = exports.buildCreate = void 0;
-var zss_utils_1 = require("zss-utils");
-Object.defineProperty(exports, "buildCreate", { enumerable: true, get: function () { return zss_utils_1.buildCreate; } });
-Object.defineProperty(exports, "buildGlobal", { enumerable: true, get: function () { return zss_utils_1.buildGlobal; } });

package/dist/esm/build-helper.js

@@ -1 +0,0 @@
-export { buildCreate, buildGlobal } from 'zss-utils';

package/types/build-helper.d.ts

@@ -1 +0,0 @@
-export { buildCreate, buildGlobal } from 'zss-utils';