@plumeria/core 0.9.10 → 0.10.1

package/README.md

@@ -35,7 +35,7 @@ import '@plumeria/core/stylesheet.css';
 Define a set of styles:
 
 ```ts
-import { css } from '@plumeria/core';
+import { css, cx, ps, px } from '@plumeria/core';
 
 const styles = css.create({
   box: {
@@ -59,7 +59,7 @@ const styles = css.create({
   },
   text: {
     color: '#333',
-    [css.pseudo.hover]: {
+    [ps.hover]: {
       color: 'skyblue',
       opacity: 0.9,
     },
@@ -82,13 +82,13 @@ const styles = css.create({
 
 const composed = css.createComposite(styles.flexBox, {
   hover: {
-    [css.pseudo.hover]: {
+    [ps.hover]: {
       scale: 1.5,
     },
   },
   active: {
-    [css.pseudo.active]: {
-      color: css.color.gray,
+    [ps.active]: {
+      color: color.gray,
     },
   },
 });
@@ -214,7 +214,7 @@ const themes = css.defineTheme({
 
 ### `css.color`
 
-Color utilities:
+Color utility:
 
 ```ts
 color: css.color.darken('skyblue', 0.12),
@@ -230,7 +230,7 @@ color: css.color.aqua,
 Classname merging helper:
 
 ```tsx
-cx(css.pseudo.hover, css.pseudo.after);
+px(ps.hover, ps.after);
 // => ":hover::after"
 cx(styles.text, styles.box);
 // => "text_hash box_hash"

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 { ps } from "zss-utils";
 
 //#region src/css.d.ts
 declare class css {
@@ -25,101 +26,6 @@ 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}%)`;
@@ -280,7 +186,11 @@ declare class css {
   };
 } //#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 +204,4 @@ declare const rx: (className: string, varSet: {
 };
 
 //#endregion
-export { CSSHTML, CSSProperties, CreateStyle, css, cx, rx };
+export { CSSHTML, CSSProperties, CreateStyle, css, cx, ps, px, rx };

package/dist/index.js

@@ -96,27 +96,26 @@ 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/ps.ts
+var ps_default = zss_utils.ps;
+
+//#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) => ({
@@ -128,4 +127,6 @@ var rx_default = rx;
 //#endregion
 exports.css = css_default;
 exports.cx = cx_default;
+exports.ps = ps_default;
+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,26 @@ 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/ps.ts
+var ps_default = ps;
+
+//#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 +124,4 @@ const rx = (className, varSet) => ({
 var rx_default = rx;
 
 //#endregion
-export { css_default as css, cx_default as cx, rx_default as rx };
+export { css_default as css, cx_default as cx, ps_default as ps, px_default as px, rx_default as rx };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "0.9.10",
+  "version": "0.10.1",
   "description": "Zero-runtime, expressive CSS-in-JS library for TypeScript.",
   "keywords": [
     "css",
@@ -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"