@plumeria/core 0.9.8 → 0.9.10

package/README.md

@@ -67,6 +67,42 @@ 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: {
+    [css.pseudo.hover]: {
+      scale: 1.5,
+    },
+  },
+  active: {
+    [css.pseudo.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:

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType,
 //#region src/css.d.ts
 declare class css {
   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;

package/dist/index.js

@@ -19,6 +19,12 @@ function create(object) {
 	});
 	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;
+}
 function global(object) {
 	const base36Hash = (0, zss_engine.genBase36Hash)(object, 8);
 	const { styleSheet } = (0, zss_engine.transpiler)(object, void 0, "--global");
@@ -70,6 +76,9 @@ var css = class {
 	static create(object) {
 		return create(object);
 	}
+	static createComposite(className, object) {
+		return createComposite(className, object);
+	}
 	static global(object) {
 		return global(object);
 	}

package/dist/index.mjs

@@ -18,6 +18,12 @@ function create(object) {
 	});
 	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;
+}
 function global(object) {
 	const base36Hash = genBase36Hash(object, 8);
 	const { styleSheet } = transpiler(object, void 0, "--global");
@@ -69,6 +75,9 @@ var css = class {
 	static create(object) {
 		return create(object);
 	}
+	static createComposite(className, object) {
+		return createComposite(className, object);
+	}
 	static global(object) {
 		return global(object);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "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"
     }
   },