@plumeria/core 9.1.2 → 10.0.1

package/README.md

@@ -1,11 +1,11 @@
 # @plumeria/core
 
-A styling system that disappears.
+**A styling system that disappears.**
 
-```ts
-import * as style from '@plumeria/core';
+```tsx
+import * as css from '@plumeria/core';
 
-const styles = style.create({
+const styles = css.create({
   text: {
     fontSize: 12,
     color: 'navy',
@@ -15,27 +15,23 @@ const styles = style.create({
   },
 });
 
-const className = style.use(styles.text, styles.size);
+export default function App(props) {
+  return (
+    <div
+      {...props}
+      styleName={[
+        styles.text, 
+        styles.size
+      ]}
+    />
+  );
+}
 ```
 
 **Compiled:**
 
 ```tsx
-className="xhrr6ses xvbwmxqp xhk51flp"
-```
-
-**Generated CSS:**
-
-```css
-.xhrr6ses:not(#\#) {
-  font-size: 12px;
-}
-.xvbwmxqp {
-  color: navy;
-}
-.xhk51flp {
-  width: 120px;
-}
+<div className="xhrr6ses xvbwmxqp xhk51flp" />
 ```
 
 ## Documentation
@@ -58,9 +54,10 @@ Plumeria is made possible thanks to the inspirations from the following projects
 - [Linaria](https://linaria.dev/)
 - [React Native](https://reactnative.dev/docs/stylesheet)
 - [React Native for Web](https://necolas.github.io/react-native-web/)
+- [React Strict DOM](https://facebook.github.io/react-strict-dom/)
 - [StyleX](https://stylexjs.com/)
 - [Tailwind CSS](https://tailwindcss.com/)
-- [Uno CSS](https://unocss.dev/)
+
 
 ## License
 

package/lib/{style.d.ts → css.d.ts}

@@ -2,8 +2,7 @@
  * Type definitions only. No runtime implementation provided.  
  * Configure the bundler plugin to extract and implement these APIs.
  * ```ts
- * type create = <const T extends Record<string, CSSProperties>>(rule: CreateStyleType<T>)=> CreateReturnType<T>;
- * type use = (...rules: (false | CSSProperties | null | undefined)[])=> string;
+ * type create = <const T extends Record<string, CreateStyleValue>>(rule: CreateStyleType<T>)=> CreateReturnType<T>;
  * type createTheme = <const T extends CreateTheme>(rule: T)=> ReturnVariableType<T>;
  * type createStatic = <const T extends CreateStatic>(rule: T)=> T;
  * type keyframes = (rule: Keyframes) => string;
@@ -15,6 +14,7 @@
  */
 declare module '@plumeria/core' {
   import type { 
+    CreateStyleValue,
     CreateStyleType,
     CreateReturnType,
     CreateStatic,
@@ -30,8 +30,7 @@ declare module '@plumeria/core' {
   export type CSSProperties = import('./types').CSSProperties;
   export type CreateStyle = import('./types').CreateStyle;
 
-  export type create = <const T extends Record<string, CSSProperties>>(rule: CreateStyleType<T>)=> CreateReturnType<T>;
-  export type use = (...rules: (false | CSSProperties | null | undefined)[])=> string;
+  export type create = <const T extends Record<string, CreateStyleValue>>(rule: CreateStyleType<T>)=> CreateReturnType<T>;
   export type createTheme = <const T extends CreateTheme>(rule: T)=> ReturnVariableType<T>;
   export type createStatic = <const T extends CreateStatic>(rule: T)=> T;
   export type keyframes = (rule: Keyframes) => string;
@@ -40,8 +39,7 @@ declare module '@plumeria/core' {
   export type marker = (id: string, pseudo: string) => Marker;
   export type extended = <I extends string, P extends string>(id: I, pseudo: P) => Extended<I, P>;
 
-  export const create: create;
-  export const use: use;
+  export const create: create; 
   export const createTheme: createTheme;
   export const createStatic: createStatic;
   export const keyframes: keyframes;
@@ -49,4 +47,13 @@ declare module '@plumeria/core' {
   export const variants: variants;
   export const marker: marker;
   export const extended: extended;
+
+  declare global {
+      namespace React {
+      import type { StyleName } from './types';
+      interface HTMLAttributes<T> {
+        styleName?: StyleName;
+      }
+    }
+  }
 }

package/lib/types.d.ts

@@ -113,14 +113,18 @@ type CreateStyleType<T> = {
   readonly [K in keyof T]: T[K] extends CSSProperties ? CSSProperties : T[K];
 };
 
-type CreateStyle = {
-  [key: string]: CSSProperties;
+type CreateReturnType<T> = {
+  [K in keyof T]: T[K] extends (...args: infer A) => infer R
+    ? (...args: A) => Readonly<{ [P in keyof R]: R[P] }>
+    : Readonly<{ [P in keyof T[K]]: T[K][P] }>;
 };
 
-type CreateReturnType<T> = {
-  [K in keyof T]: Readonly<{
-    [P in keyof T[K]]: T[K][P];
-  }>;
+type CreateStyleValue = CSSProperties | ((...args: never) => CSSProperties)
+
+type StyleName = CSSProperties | (false | CSSProperties | null | undefined)[];
+
+type CreateStyle = {
+  [key: string]: CSSProperties;
 };
 
 type CreateStatic = Record<string, string | number>;
@@ -152,7 +156,9 @@ type Extended<I extends string, P extends string> = `@container style(--${I}-${S
 
 export type {
   CSSProperties,
+  StyleName,
   CreateStyle,
+  CreateStyleValue,
   CreateStyleType,
   CreateReturnType,
   CreateStatic,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "9.1.2",
+  "version": "10.0.1",
   "description": "A styling system that disappears.",
   "author": "Refirst 11",
   "license": "MIT",
@@ -14,20 +14,12 @@
   "bugs": {
     "url": "https://github.com/zss-in-js/plumeria/issues"
   },
-  "keywords": [
-    "atomic-css",
-    "css-in-js",
-    "zero-runtime",
-    "stylex",
-    "pigment-css",
-    "vanilla-extract"
-  ],
   "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
-      "types": "./lib/style.d.ts",
-      "import": "./lib/style.js"
+      "types": "./lib/css.d.ts",
+      "import": "./lib/css.js"
     }
   },
   "files": [