@plumeria/core 0.9.9 → 0.10.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, ReturnType } from "zss-engine";
+import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnType } from "zss-engine";
+import { color, ps } from "zss-utils";
 
 //#region src/css.d.ts
 declare class css {
@@ -25,262 +26,15 @@ declare class css {
     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
+}
+
+//#endregion
 //#region src/cx.d.ts
-declare const cx: (...strings: Array<string | null | undefined | false>) => string & ":";
+declare const cx: (...classes: Array<string | null | undefined | false>) => string;
+
+//#endregion
+//#region src/px.d.ts
+declare const px: <T extends readonly string[]>(...pseudos: T) => Join<T>;
 
 //#endregion
 //#region src/rx.d.ts
@@ -294,4 +48,4 @@ declare const rx: (className: string, varSet: {
 };
 
 //#endregion
-export { CSSHTML, CSSProperties, CreateStyle, css, cx, rx };
+export { CSSHTML, CSSProperties, CreateStyle, color, css, cx, ps, px, rx };

package/dist/index.js

@@ -96,27 +96,21 @@ var css = class {
 	}
 	static media = zss_utils.media;
 	static container = zss_utils.container;
-	static pseudo = zss_utils.pseudo;
-	static color = zss_utils.color;
 };
 var css_default = css;
 
 //#endregion
 //#region src/cx.ts
-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;
-};
+const cx = (...classes) => classes.filter(Boolean).join(" ");
 var cx_default = cx;
 
+//#endregion
+//#region src/px.ts
+const px = (...pseudos) => {
+	return pseudos.filter(Boolean).join("");
+};
+var px_default = px;
+
 //#endregion
 //#region src/rx.ts
 const rx = (className, varSet) => ({
@@ -126,6 +120,19 @@ const rx = (className, varSet) => ({
 var rx_default = rx;
 
 //#endregion
+Object.defineProperty(exports, 'color', {
+  enumerable: true,
+  get: function () {
+    return zss_utils.color;
+  }
+});
 exports.css = css_default;
 exports.cx = cx_default;
+Object.defineProperty(exports, 'ps', {
+  enumerable: true,
+  get: function () {
+    return zss_utils.ps;
+  }
+});
+exports.px = px_default;
 exports.rx = rx_default;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 } from "./css.mjs";
 import { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isDevAndTest, isServer, transpiler } from "zss-engine";
-import { color, container, media, pseudo } from "zss-utils";
+import { color, container, media, ps } from "zss-utils";
 
 //#region src/css.ts
 function create(object) {
@@ -95,27 +95,21 @@ var css = class {
 	}
 	static media = media;
 	static container = container;
-	static pseudo = pseudo;
-	static color = color;
 };
 var css_default = css;
 
 //#endregion
 //#region src/cx.ts
-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;
-};
+const cx = (...classes) => classes.filter(Boolean).join(" ");
 var cx_default = cx;
 
+//#endregion
+//#region src/px.ts
+const px = (...pseudos) => {
+	return pseudos.filter(Boolean).join("");
+};
+var px_default = px;
+
 //#endregion
 //#region src/rx.ts
 const rx = (className, varSet) => ({
@@ -125,4 +119,4 @@ const rx = (className, varSet) => ({
 var rx_default = rx;
 
 //#endregion
-export { css_default as css, cx_default as cx, rx_default as rx };
+export { color, css_default as css, cx_default as cx, ps, px_default as px, rx_default as rx };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "0.9.9",
+  "version": "0.10.0",
   "description": "Zero-runtime, expressive CSS-in-JS library for TypeScript.",
   "keywords": [
     "css",
@@ -27,7 +27,7 @@
     },
     "./processors": {
       "types": "./dist/processors/css.d.ts",
-      "import": "./dist/procesmsors/css.mjs",
+      "import": "./dist/processors/css.mjs",
       "default": "./dist/processors/css.js"
     }
   },
@@ -39,8 +39,8 @@
     "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "0.2.40",
-    "zss-utils": "0.2.3"
+    "zss-engine": "0.2.41",
+    "zss-utils": "0.2.4"
   },
   "publishConfig": {
     "access": "public"