@plumeria/core 0.8.0-beta.2 → 0.8.1

package/dist/cjs/css.js

@@ -2,34 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rx = exports.cx = exports.css = void 0;
 const zss_utils_1 = require("zss-utils");
-const zss_utils_2 = require("zss-utils");
-const zss_utils_3 = require("zss-utils");
-const zss_utils_4 = require("zss-utils");
-const zss_utils_5 = require("zss-utils");
-Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return zss_utils_5.cx; } });
-Object.defineProperty(exports, "rx", { enumerable: true, get: function () { return zss_utils_5.rx; } });
+Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return zss_utils_1.cx; } });
+Object.defineProperty(exports, "rx", { enumerable: true, get: function () { return zss_utils_1.rx; } });
 class css {
     static create(object) {
         return (0, zss_utils_1.create)(object);
     }
-    static global = ((called = false) => {
-        return (object) => {
-            if (called) {
-                throw new Error('css.global() must be one');
-            }
-            called = true;
-            return (0, zss_utils_2.global)(object);
-        };
-    })();
+    static global(object) {
+        return (0, zss_utils_1.global)(object);
+    }
     static defineThemeVars(object) {
-        return (0, zss_utils_3.defineThemeVars)(object);
+        return (0, zss_utils_1.defineThemeVars)(object);
     }
     static keyframes(object) {
-        return (0, zss_utils_4.keyframes)(object);
+        return (0, zss_utils_1.keyframes)(object);
     }
-    static media = zss_utils_5.media;
-    static pseudo = zss_utils_5.pseudo;
-    static colors = zss_utils_5.colors;
-    static container = zss_utils_5.container;
+    static media = zss_utils_1.media;
+    static pseudo = zss_utils_1.pseudo;
+    static colors = zss_utils_1.colors;
+    static container = zss_utils_1.container;
 }
 exports.css = css;

package/dist/esm/css.js

@@ -1,21 +1,11 @@
-import { create } from 'zss-utils';
-import { global } from 'zss-utils';
-import { defineThemeVars } from 'zss-utils';
-import { keyframes } from 'zss-utils';
-import { media, pseudo, colors, container, cx, rx } from 'zss-utils';
+import { create, global, keyframes, defineThemeVars, media, pseudo, colors, container, cx, rx, } from 'zss-utils';
 class css {
     static create(object) {
         return create(object);
     }
-    static global = ((called = false) => {
-        return (object) => {
-            if (called) {
-                throw new Error('css.global() must be one');
-            }
-            called = true;
-            return global(object);
-        };
-    })();
+    static global(object) {
+        return global(object);
+    }
     static defineThemeVars(object) {
         return defineThemeVars(object);
     }

package/package.json

@@ -1,30 +1,34 @@
 {
   "name": "@plumeria/core",
-  "version": "0.8.0-beta.2",
-  "description": "Near Zero-runtime CSS-in-JS for efficient design systems.",
+  "version": "0.8.1",
+  "description": "Zero-runtime StyleSheet for speedy development cycle",
   "keywords": [
     "css",
     "css-in-js",
     "plumeria",
     "react",
-    "vite",
-    "next"
+    "next",
+    "vite"
   ],
-  "repository": "github:zss-in-js/plumeria",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zss-in-js/plumeria.git",
+    "directory": "packages/core"
+  },
   "license": "MIT",
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     "./stylesheet": "./stylesheet/core.css",
-    "./build-helper": {
-      "import": "./dist/esm/build-helper.js",
-      "require": "./dist/cjs/build-helper.js",
-      "types": "./types/build-helper.d.ts"
-    },
     ".": {
       "types": "./types/index.d.ts",
       "import": "./dist/esm/index.js",
       "default": "./dist/cjs/index.js"
+    },
+    "./build-helper": {
+      "types": "./types/build-helper.d.ts",
+      "import": "./dist/esm/build-helper.js",
+      "default": "./dist/cjs/build-helper.js"
     }
   },
   "main": "dist/cjs/index.js",
@@ -44,7 +48,7 @@
     "zss-utils": "0.0.8"
   },
   "peerDependencies": {
-    "@plumeria/compiler": ">=0.7.7"
+    "@plumeria/compiler": ">=0.8.2"
   },
   "publishConfig": {
     "access": "public"

package/readme.md

@@ -1,35 +1,34 @@
-# @plumeria/core
+# 💐 Plumeria
 
-Plumeria is a CSS-in-JS built using [**zss-engine**](https://www.npmjs.com/package/zss-engine) and [**zss-utils**](https://www.npmjs.com/package/zss-utils) that provides a speedy development cycle.
+Plumeria is a CSS-in-JS built with [**zss-utils**](https://www.npmjs.com/package/zss-utils) that provides a speedy development cycle.
 
 ## Installation
 
 To start using Plumeria, install the following two packages:
 
 ```sh
-npm install --save @plumeria/core
+npm install @plumeria/core
 ```
 
 ### Compiler
 
-To compile `@plumeria/core`, for example, to use `npx css`, install  
-[`@plumeria/compiler`](https://www.npmjs.com/package/@plumeria/compiler) for static extraction through the Command Line.  
-Also, it can be easily integrated into the build process.
-
-The compiler is built using [**SWC**](https://swc.rs/) and performs high-speed transpilation in memory.
+Plumeria is designed to extract styles into static CSS stylesheets using the CLI.
+Install the following libraries to enable CLI commands: [`@plumeria/compiler`](https://www.npmjs.com/package/@plumeria/compiler)
 
 ```sh
 npm install --save-dev @plumeria/compiler
 ```
 
+For more information on compiler commnads, please see the documentation  
+[API reference/css](https://plumeria.dev/docs/reference/css).
+
 ### Static StyleSheet
 
 Import stylesheet in your application's entry point.  
-CSS for all APIs is collected here.
-
 Applies the static stylesheet for production environments.
 
 ```ts
+// eg: main.ts or layout.tsx
 import '@plumeria/core/stylesheet';
 ```
 
@@ -37,7 +36,7 @@ import '@plumeria/core/stylesheet';
 
 ### css.create()
 
-Styles are defined as a map of CSS rules using css.create(). In the example below, there are 2 different CSS rules. The names "box" and "text" are arbitrary names given to the rules.
+Styles are defined as a map of CSS rules using css.create(). In the example below, there are 2 different CSS className. The className `styles.box` and `styles.text` are arbitrary names given to the rules.
 
 ```ts
 import { css } from '@plumeria/core';
@@ -53,7 +52,8 @@ const styles = css.create({
 });
 ```
 
-Pseudo and media queries can be wrapped in property style definitions:
+Pseudo and media queries can be wrapped in property style definitions:  
+Also, any properties that are not wrapped will conform to that className.
 
 ```ts
 const styles = css.create({
@@ -64,8 +64,9 @@ const styles = css.create({
     },
   },
   text: {
+    color: '#333' // standard properties of that className
     [css.pseudo.hover]: {
-      color: 'yellow',
+      color: 'skyblue',
       opacity: 0.9,
     },
   },
@@ -75,21 +76,32 @@ const styles = css.create({
 ### css.global()
 
 This API lets you define global CSS.
-Due to restrictions on avoiding collisions in HTML selectors, css.global() is designed to throw a compilation error if written more than once.
+\*Please be careful not to create selectors that conflict by creating more than one global object.
 
 ```ts
 css.global({
+  html: {
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    margin: 0,
+  },
+  body: {
+    position: 'relative',
+    width: 600,
+  },
+  h1: {
+    fontSize: 32,
+  },
   h2: {
     fontSize: 24,
   },
   h3: {
-    fontSize: 34,
+    fontSize: 16,
   },
 });
 ```
 
-The compiler extracts the CSS rules, replacing the rules in the source code with the compiled CSS.
-
 ### cx
 
 Merges strings such as class names and pseudos.
@@ -105,37 +117,6 @@ const styles = css.create({
 });
 ```
 
-### rx
-
-### React JSX only features
-
-React `inline-style` are **offloaded** using only static sheet the css variables.  
-It is can pass states to multiple variables at once.
-
-```ts
-'use client';
-
-import { useState } from 'react';
-import { css, rx } from '@plumeria/core';
-
-const styles = css.create({
-  bar: {
-    width: 'var(--width)',
-    background: 'aqua',
-  },
-});
-
-export const Component = () => {
-  const [state, setState] = useState(0);
-  return (
-    <di>
-      <button onClick={() => setState((prev) => prev + 10)}>count</button>
-      <div {...rx(styles.bar, { '--width': state + 'px' })} />
-    </di>
-  );
-};
-```
-
 ### css.keyframes()
 
 Define @keyframes and set the return value directly to animationName.
@@ -164,7 +145,7 @@ Define data-theme and regular variables as objects.
 A default compile to :root, and the rest as a string compile to data-theme, You can also use media and container here.
 
 ```ts
-const colors = css.defineThemeVars({
+const preset = css.defineThemeVars({
   normal: 'white',
   text_primary: {
     default: 'rgb(60,60,60)',
@@ -179,7 +160,7 @@ const colors = css.defineThemeVars({
 });
 ```
 
-### css.colors.darken()
+### css.colors
 
 Mixes #000 or #FFF into the color.  
 The first argument takes the color and the second argument takes the same value as opacity (string % or number).

package/types/css.d.ts

@@ -2,7 +2,7 @@ import type { CreateStyle, CustomHTMLType, CustomProperties, KeyframesDefinition
 import { cx, rx } from 'zss-utils';
 declare class css {
     static create<T extends Record<string, CustomProperties>>(object: CreateStyle<T>): ReturnType<T>;
-    static global: (object: CustomHTMLType) => void;
+    static global(object: CustomHTMLType): void;
     static defineThemeVars<const T extends VarsDefinition>(object: T): { [K in keyof T]: `var(--${string & K})`; };
     static keyframes(object: KeyframesDefinition): string;
     static media: {