@plumeria/core 10.0.4 → 10.0.6

package/README.md

@@ -1,6 +1,19 @@
 # @plumeria/core
+![license](https://img.shields.io/badge/license-MIT-blue)
+![npm](https://img.shields.io/npm/v/@plumeria/core)
 
-**A styling system that disappears.**
+![web (prod/dev)](https://img.shields.io/badge/web%20(prod/dev)-0B-brightgreen)
+![runtime](https://img.shields.io/badge/runtime-0B-brightgreen)
+![type safe](https://img.shields.io/badge/types-100%25-brightgreen)
+
+**Plumeria** is a library for developing styled React components for the web. It is a compiler with typed syntax and linting support. The goal of Plumeria is to reduce the load on developers.
+
+## Documentation
+
+Read the [documentation](https://plumeria.dev/) for more details.
+
+## Example
+Styles can be passed to the `styleName` prop. That prop accepts static and dynamic styles as an array.
 
 ```tsx
 import * as css from '@plumeria/core';
@@ -8,57 +21,30 @@ import * as css from '@plumeria/core';
 const styles = css.create({
   text: {
     fontSize: 12,
-    color: 'navy',
   },
-  size: {
-    width: 120,
+  cond: {
+    background: 'navy'
   },
+  scale: (value) => ({
+    scale: value
+  })
 });
 
 export default function App(props) {
+  const scale = useScale();
   return (
     <div
       {...props}
       styleName={[
         styles.text, 
-        styles.size
+        cond && styles.cond,
+        styles.scale(scale)
       ]}
     />
   );
 }
 ```
 
-**Compiled:**
-
-```tsx
-<div className="xhrr6ses xvbwmxqp xhk51flp" />
-```
-
-## Documentation
-
-Read the [documentation](https://plumeria.dev/) for more details.
-
-## Installation
-
-- [Vite](https://plumeria.dev/docs/integration/vite)
-- [Next](https://plumeria.dev/docs/integration/next)
-- [Turbopack](https://plumeria.dev/docs/integration/turbopack)
-- [Webpack](https://plumeria.dev/docs/integration/webpack)
-- [PostCSS](https://plumeria.dev/docs/integration/postcss)
-- [ESLint](https://plumeria.dev/docs/integration/eslint)
-
-## Acknowledgements
-
-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/)
-
-
 ## License
 
-[MIT](https://github.com/zss-in-js/plumeria/blob/main/LICENSE) License &copy; 2023-PRESENT [Refirst 11](https://github.com/refirst11)
+Plumeria is MIT licensed.

package/lib/css.d.ts

@@ -14,7 +14,9 @@
  * ```
  */
 declare module '@plumeria/core' {
-  import type { 
+  import type {
+    StyleName,
+    CSSProperties, 
     CreateStyleValue,
     CreateStyleType,
     CreateReturnType,
@@ -26,12 +28,17 @@ declare module '@plumeria/core' {
     Variants,
     Marker,
     Extended,
-  } from './types';
+  } from '#types';
 
-  export type CSSProperties = import('./types').CSSProperties;
-  export type CreateStyle = import('./types').CreateStyle;
+  global {
+    namespace React {
+      interface HTMLAttributes<T> {
+        styleName?: StyleName;
+      }
+    }
+  }
 
-  export type create = <const T extends Record<string, CreateStyleValue>>(rule: CreateStyleType<T>)=> CreateReturnType<T>; 
+  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;
@@ -41,7 +48,7 @@ declare module '@plumeria/core' {
   export type extended = <I extends string, P extends string>(id: I, pseudo: P) => Extended<I, P>;
   export type use = (...rules: (false | CSSProperties | null | undefined)[])=> string;
 
-  export const create: create; 
+  export const create: create;
   export const createTheme: createTheme;
   export const createStatic: createStatic;
   export const keyframes: keyframes;
@@ -50,13 +57,4 @@ declare module '@plumeria/core' {
   export const marker: marker;
   export const extended: extended;
   export const use: use;
-
-  declare global {
-      namespace React {
-      import type { StyleName } from './types';
-      interface HTMLAttributes<T> {
-        styleName?: StyleName;
-      }
-    }
-  }
 }

package/lib/types.d.ts

@@ -123,10 +123,6 @@ type CreateStyleValue = CSSProperties | ((...args: never) => CSSProperties)
 
 type StyleName = CSSProperties | (false | CSSProperties | null | undefined)[];
 
-type CreateStyle = {
-  [key: string]: CSSProperties;
-};
-
 type CreateStatic = Record<string, string | number>;
 
 type CreateTheme = Record<string, Record<string, string | number>>;
@@ -157,7 +153,6 @@ type Extended<I extends string, P extends string> = `@container style(--${I}-${S
 export type {
   CSSProperties,
   StyleName,
-  CreateStyle,
   CreateStyleValue,
   CreateStyleType,
   CreateReturnType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "10.0.4",
+  "version": "10.0.6",
   "description": "A styling system that disappears.",
   "author": "Refirst 11",
   "license": "MIT",
@@ -15,12 +15,11 @@
     "url": "https://github.com/zss-in-js/plumeria/issues"
   },
   "keywords": [
-    "react",
     "css",
     "css-in-js",
-    "zero-runtime",
-    "atomic-css",
-    "stylex"
+    "plumeria",
+    "react",
+    "atomic-css"
   ],
   "sideEffects": false,
   "type": "module",
@@ -30,6 +29,9 @@
       "import": "./lib/css.js"
     }
   },
+  "imports": {
+    "#types": "./lib/types.d.ts"
+  },
   "files": [
     "lib/"
   ],