@plumeria/core 0.10.4 → 0.11.0

package/README.md

@@ -35,7 +35,7 @@ import '@plumeria/core/stylesheet.css';
 Define a set of styles:
 
 ```ts
-import { css, cx, ps, px } from '@plumeria/core';
+import { css, ps } from '@plumeria/core';
 
 const styles = css.create({
   box: {
@@ -46,6 +46,15 @@ const styles = css.create({
     color: 'yellow',
   },
 });
+
+const classNameString = css.props(styles.text, styles.box);
+```
+
+Use `css.props()` to convert a style object into a string with a hashed key.  
+You can use them like this:
+
+```jsx
+<div className={css.props(styles.text, styles.box)} />
 ```
 
 Supports pseudo/media queries inline:
@@ -67,42 +76,6 @@ const styles = css.create({
 });
 ```
 
-### `css.createComposite()`
-
-Creates modifier classes for a base style:
-
-```ts
-const styles = css.create({
-  flexBox: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-});
-
-const composed = css.createComposite(styles.flexBox, {
-  hover: {
-    [ps.hover]: {
-      scale: 1.5,
-    },
-  },
-  active: {
-    [ps.active]: {
-      color: css.color.gray,
-    },
-  },
-});
-```
-
-This produces named modifier classes based on the base style.  
-You can use them like this:
-
-```jsx
-<div className={composed.hover} />
-```
-
-Automatically generates all modifier variants while keeping the base style clean.
-
 ### `css.global()`
 
 Define global styles:
@@ -225,15 +198,19 @@ color: css.color.aqua,
 // and many more
 ```
 
-### `cx`
+### `css.px`
 
-Classname merging helper:
+Pseudo expand helper:
 
 ```tsx
-px(ps.hover, ps.after);
+css.px(ps.hover, ps.after);
 // => ":hover::after"
-cx(styles.text, styles.box);
-// => "text_hash box_hash"
+```
+
+`px` is also available as an export function.
+
+```ts
+import { px } from '@plumeria/core';
 ```
 
 ## 🧹 ESLint Support

package/dist/index.d.ts

@@ -1,15 +1,25 @@
-import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnType } from "zss-engine";
+import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnRx, ReturnType, ReturnVariableType, RxVariableSet } from "zss-engine";
 import { ps } from "zss-utils";
 
 //#region src/css.d.ts
+declare const rx: (cssProperties: Readonly<CSSProperties>, varSet: RxVariableSet) => {
+  className: string;
+  style: {
+    [k: string]: string;
+  };
+};
+declare const px: <T extends readonly string[]>(...pseudos: T) => Join<T>;
 declare class css {
+  private constructor();
   static create<const T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): ReturnType<T>;
-  static createComposite<const T extends Record<string, CSSProperties>>(className: string, object: T): ReturnType<T>;
   static global(object: CSSHTML): void;
   static keyframes(object: CreateKeyframes): string;
-  static defineConsts<const T extends CreateValues>(object: T): T;
-  static defineVars<const T extends CreateValues>(object: T): { [K in keyof T]: `var(--${string})` };
-  static defineTheme<const T extends CreateTheme>(object: T): { [K in keyof T]: `var(--${string})` };
+  static defineConsts<const T extends CreateValues>(object: T): CreateValues;
+  static defineVars<const T extends CreateValues>(object: T): ReturnVariableType<T>;
+  static defineTheme<const T extends CreateTheme>(object: T): ReturnVariableType<T>;
+  static props(...objects: (false | Readonly<CSSProperties> | null | undefined)[]): string;
+  static rx(cssProperties: Readonly<CSSProperties>, varSet: RxVariableSet): ReturnRx;
+  static px<T extends readonly string[]>(...pseudos: T): Join<T>;
   static media: {
     dark: "@media (prefers-color-scheme: dark)";
     light: "@media (prefers-color-scheme: light)";
@@ -185,23 +195,4 @@ declare class css {
     yellowgreen: "yellowgreen";
   };
 } //#endregion
-//#region src/cx.d.ts
-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
-declare const rx: (className: string, varSet: {
-  [key: `--${string}`]: string;
-}) => {
-  className: string;
-  style: {
-    [k: string]: string;
-  };
-};
-
-//#endregion
-export { CSSHTML, CSSProperties, CreateStyle, css, cx, ps, px, rx };
+export { CSSHTML, CSSProperties, CreateStyle, css, ps, px, rx };

package/dist/index.js

@@ -4,6 +4,7 @@ const zss_engine = require_css.__toESM(require("zss-engine"));
 const zss_utils = require_css.__toESM(require("zss-utils"));
 
 //#region src/css.ts
+const objectToKeyHashMap = new WeakMap();
 function create(object) {
 	const base36Hash = (0, zss_engine.genBase36Hash)(object, 6);
 	const { styleSheet } = (0, zss_engine.transpiler)(object, base36Hash);
@@ -11,26 +12,39 @@ function create(object) {
 	if (typeof require_css.globalPromise_1 === "undefined") require_css.initPromise_1();
 	require_css.resolvePromise_1(styleSheet);
 	Object.keys(object).forEach((key) => {
+		const cssProperties = object[key];
+		const hashedClassName = key + "_" + base36Hash;
+		objectToKeyHashMap.set(cssProperties, hashedClassName);
 		Object.defineProperty(object, key, { get: () => {
-			const className = key + "_" + base36Hash;
-			if (zss_engine.isDevAndTest) injectCSS(base36Hash, styleSheet);
-			return className;
+			if (zss_engine.isTestingDevelopment) injectCSS(base36Hash, styleSheet);
+			return Object.freeze(cssProperties);
 		} });
 	});
 	return Object.freeze(object);
 }
-function createComposite(className, object) {
-	const composed = create(object);
-	const result = {};
-	for (const key in composed) result[key] = `${className} ${composed[key]}`;
-	return result;
-}
+const props = (...objects) => {
+	const classNames = objects.filter(Boolean).map((obj) => {
+		if (obj && typeof obj === "object") {
+			const keyHash = objectToKeyHashMap.get(obj);
+			if (keyHash) return keyHash;
+		}
+		return "";
+	});
+	return [...new Set(classNames)].join(" ");
+};
+const rx = (cssProperties, varSet) => ({
+	className: props(cssProperties),
+	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
+});
+const px = (...pseudos) => {
+	return pseudos.filter(Boolean).join("");
+};
 function global(object) {
 	const base36Hash = (0, zss_engine.genBase36Hash)(object, 8);
 	const { styleSheet } = (0, zss_engine.transpiler)(object, void 0, "--global");
 	if (typeof require_css.globalPromise_2 === "undefined") require_css.initPromise_2();
 	require_css.resolvePromise_2(styleSheet);
-	if (zss_engine.isDevAndTest) zss_engine.isServer ? (0, zss_engine.injectServerCSS)(base36Hash, styleSheet) : (0, zss_engine.injectClientGlobalCSS)(styleSheet);
+	if (zss_engine.isTestingDevelopment) zss_engine.isServer ? (0, zss_engine.injectServerCSS)(base36Hash, styleSheet) : (0, zss_engine.injectClientGlobalCSS)(styleSheet);
 }
 const keyframes = (object) => {
 	const prefix = (0, zss_engine.genBase36Hash)(object, 8);
@@ -73,12 +87,10 @@ const defineTheme = (object) => {
 	return result;
 };
 var css = class {
+	constructor() {}
 	static create(object) {
 		return create(object);
 	}
-	static createComposite(className, object) {
-		return createComposite(className, object);
-	}
 	static global(object) {
 		return global(object);
 	}
@@ -94,39 +106,22 @@ var css = class {
 	static defineTheme(object) {
 		return defineTheme(object);
 	}
+	static props(...objects) {
+		return props(...objects);
+	}
+	static rx(cssProperties, varSet) {
+		return rx(cssProperties, varSet);
+	}
+	static px(...pseudos) {
+		return px(...pseudos);
+	}
 	static media = zss_utils.media;
 	static container = zss_utils.container;
 	static color = zss_utils.color;
 };
-var css_default = css;
-
-//#endregion
-//#region src/cx.ts
-const cx = (...classes) => [...new Set(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) => ({
-	className,
-	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
-});
-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;
+exports.css = css;
+exports.ps = zss_utils.ps;
+exports.px = px;
+exports.rx = rx;

package/dist/index.mjs

@@ -1,8 +1,9 @@
 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 { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isServer, isTestingDevelopment, transpiler } from "zss-engine";
 import { color, container, media, ps } from "zss-utils";
 
 //#region src/css.ts
+const objectToKeyHashMap = new WeakMap();
 function create(object) {
 	const base36Hash = genBase36Hash(object, 6);
 	const { styleSheet } = transpiler(object, base36Hash);
@@ -10,26 +11,39 @@ function create(object) {
 	if (typeof globalPromise_1 === "undefined") initPromise_1();
 	resolvePromise_1(styleSheet);
 	Object.keys(object).forEach((key) => {
+		const cssProperties = object[key];
+		const hashedClassName = key + "_" + base36Hash;
+		objectToKeyHashMap.set(cssProperties, hashedClassName);
 		Object.defineProperty(object, key, { get: () => {
-			const className = key + "_" + base36Hash;
-			if (isDevAndTest) injectCSS(base36Hash, styleSheet);
-			return className;
+			if (isTestingDevelopment) injectCSS(base36Hash, styleSheet);
+			return Object.freeze(cssProperties);
 		} });
 	});
 	return Object.freeze(object);
 }
-function createComposite(className, object) {
-	const composed = create(object);
-	const result = {};
-	for (const key in composed) result[key] = `${className} ${composed[key]}`;
-	return result;
-}
+const props = (...objects) => {
+	const classNames = objects.filter(Boolean).map((obj) => {
+		if (obj && typeof obj === "object") {
+			const keyHash = objectToKeyHashMap.get(obj);
+			if (keyHash) return keyHash;
+		}
+		return "";
+	});
+	return [...new Set(classNames)].join(" ");
+};
+const rx = (cssProperties, varSet) => ({
+	className: props(cssProperties),
+	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
+});
+const px = (...pseudos) => {
+	return pseudos.filter(Boolean).join("");
+};
 function global(object) {
 	const base36Hash = genBase36Hash(object, 8);
 	const { styleSheet } = transpiler(object, void 0, "--global");
 	if (typeof globalPromise_2 === "undefined") initPromise_2();
 	resolvePromise_2(styleSheet);
-	if (isDevAndTest) isServer ? injectServerCSS(base36Hash, styleSheet) : injectClientGlobalCSS(styleSheet);
+	if (isTestingDevelopment) isServer ? injectServerCSS(base36Hash, styleSheet) : injectClientGlobalCSS(styleSheet);
 }
 const keyframes = (object) => {
 	const prefix = genBase36Hash(object, 8);
@@ -72,12 +86,10 @@ const defineTheme = (object) => {
 	return result;
 };
 var css = class {
+	constructor() {}
 	static create(object) {
 		return create(object);
 	}
-	static createComposite(className, object) {
-		return createComposite(className, object);
-	}
 	static global(object) {
 		return global(object);
 	}
@@ -93,35 +105,19 @@ var css = class {
 	static defineTheme(object) {
 		return defineTheme(object);
 	}
+	static props(...objects) {
+		return props(...objects);
+	}
+	static rx(cssProperties, varSet) {
+		return rx(cssProperties, varSet);
+	}
+	static px(...pseudos) {
+		return px(...pseudos);
+	}
 	static media = media;
 	static container = container;
 	static color = color;
 };
-var css_default = css;
-
-//#endregion
-//#region src/cx.ts
-const cx = (...classes) => [...new Set(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) => ({
-	className,
-	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
-});
-var rx_default = rx;
 
 //#endregion
-export { css_default as css, cx_default as cx, ps_default as ps, px_default as px, rx_default as rx };
+export { css, ps, px, rx };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "Zero-runtime, expressive CSS-in-JS library for TypeScript.",
   "keywords": [
     "css",
@@ -39,7 +39,7 @@
     "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "0.2.41",
+    "zss-engine": "0.2.44",
     "zss-utils": "0.2.4"
   },
   "publishConfig": {