@plumeria/core 0.9.1 → 0.9.3

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/css.js

@@ -0,0 +1,135 @@
+"use strict";
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const zss_engine = __toESM(require("zss-engine"));
+
+//#region src/processors/css.ts
+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 (!zss_engine.isDevelopment && styleSheet) (0, zss_engine.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() {
+	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 (!zss_engine.isDevelopment && styleSheet) (0, zss_engine.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);
+	}
+}
+
+//#endregion
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});
+Object.defineProperty(exports, 'buildCreate', {
+  enumerable: true,
+  get: function () {
+    return buildCreate;
+  }
+});
+Object.defineProperty(exports, 'buildGlobal', {
+  enumerable: true,
+  get: function () {
+    return buildGlobal;
+  }
+});
+Object.defineProperty(exports, 'globalPromise_1', {
+  enumerable: true,
+  get: function () {
+    return globalPromise_1;
+  }
+});
+Object.defineProperty(exports, 'globalPromise_2', {
+  enumerable: true,
+  get: function () {
+    return globalPromise_2;
+  }
+});
+Object.defineProperty(exports, 'initPromise_1', {
+  enumerable: true,
+  get: function () {
+    return initPromise_1;
+  }
+});
+Object.defineProperty(exports, 'initPromise_2', {
+  enumerable: true,
+  get: function () {
+    return initPromise_2;
+  }
+});
+Object.defineProperty(exports, 'resolvePromise_1', {
+  enumerable: true,
+  get: function () {
+    return resolvePromise_1;
+  }
+});
+Object.defineProperty(exports, 'resolvePromise_2', {
+  enumerable: true,
+  get: function () {
+    return resolvePromise_2;
+  }
+});

package/dist/css.mjs

@@ -0,0 +1,58 @@
+import { build, isDevelopment } from "zss-engine";
+
+//#region src/processors/css.ts
+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;
+}
+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() {
+	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;
+}
+async function buildGlobal(filePath) {
+	if (typeof globalPromise_2 === "undefined") initPromise_2();
+	if (!isProcessing_2 && sheetQueue_2.length > 0) {
+		isProcessing_2 = true;
+		processQueue_2(filePath);
+	}
+}
+
+//#endregion
+export { buildCreate, buildGlobal, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };

package/dist/index.d.ts

@@ -0,0 +1,295 @@
+import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateVars, ReturnType } from "zss-engine";
+
+//#region src/css.d.ts
+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})` };
+  static defineTheme<const T extends CreateTheme>(object: T): { [K in keyof T]: `var(--${string})` };
+  static keyframes(object: CreateKeyframes): string;
+  static media: {
+    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: <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: <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";
+    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) => `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";
+  };
+} //#endregion
+//#region src/cx.d.ts
+declare const cx: (...strings: Array<string | null | undefined | false>) => string & ":";
+
+//#endregion
+//#region src/rx.d.ts
+declare const rx: (className: string, varSet: {
+  [key: `--${string}`]: string;
+}) => {
+  className: string;
+  style: {
+    [k: string]: string;
+  };
+};
+
+//#endregion
+export { CSSHTML, CSSProperties, CreateStyle, css, cx, rx };