@plumeria/core 0.18.4 → 0.19.1

package/README.md

@@ -30,76 +30,61 @@ import '@plumeria/core/stylesheet.css';
 
 ### css.create()
 
-Define a set of atomic styles:
-
 ```ts
 import { css } from '@plumeria/core';
 
 const styles = css.create({
   text: {
-    color: 'yellow', // zxxxxxx1
+    color: 'yellow',
   },
   box: {
-    width: '100%', // zxxxxxx2
-    background: 'rgb(60,60,60)', // zxxxxxx3
+    width: '100%',
+    background: 'rgb(60,60,60)',
   },
 });
+
+const className = css.props(styles.text, styles.box);
 ```
 
-### css.props()
+Plumeria compiles each style property into a unique, **atomic**, and **hashed** class name. This prevents style collisions and maximizes reusability.
 
-Use `css.props()` to combine multiple styles or switch between them conditionally.  
-css.props is compiled and style properties to the right take precedence.
+**Generated CSS:**
 
-```jsx
-<div className={css.props(styles.text, styles.box)} />
-//   className="zxxxxxx1 zxxxxxx2 zxxxxxx3"
+```css
+.xxr7afjw {
+  color: yellow;
+}
+.xq97ksf4 {
+  width: 100%;
+}
+.xk450ff8 {
+  background: rgb(60, 60, 60);
+}
 ```
 
-Shorthand and longhand property rules follow the same principles as CSS rules.
-
----
+**Resulting:**
 
-It supports media query pseudo-classes and elements in a familiar syntax.
-
-```ts
-import { css } from '@plumeria/core';
-
-const styles = css.create({
-  box: {
-    '@media (max-width: 768px)': {
-      width: '100%',
-    },
-  },
-  text: {
-    color: '#333',
-    ':hover': {
-      color: 'skyblue',
-      opacity: 0.9,
-    },
-  },
-});
+```
+className: "xxr7afjw xq97ksf4 xk450ff8"
 ```
 
-## ESLint Support
-
-The [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plugin) provides recommended rules:
+## Documentation
 
-### Rules: recommended
+Read the [documentation](https://plumeria.dev/) for more details.
 
-```
-- no-destructure: error
-- no-inner-call: error
-- no-unused-keys: warn
-- sort-properties: warn
-- validate-values: warn
-```
+## Integration
 
-It plugin provides autocomplete and validation support.
+- [Vite](https://plumeria.dev/docs/integration/vite)
+- [Next](https://plumeria.dev/docs/integration/next)
+- [Webpack](https://plumeria.dev/docs/integration/webpack)
+- [CLI](https://plumeria.dev/docs/integration/cli)
+- [ESLint](https://plumeria.dev/docs/integration/eslint)
 
 ## Acknowledgement
 
-Plumeria is made possible thanks to the valuable inspirations from the following projects:
+Plumeria is made possible thanks to the inspirations from the following projects:
+
+> in alphabetical order
 
 - [Linaria](https://linaria.dev/)
 - [React Native](https://reactnative.dev/docs/stylesheet)
@@ -110,4 +95,4 @@ Plumeria is made possible thanks to the valuable inspirations from the following
 
 ## License
 
-Plumeria is [MIT licensed](https://github.com/zss-in-js/plumeria/blob/main/LICENSE).
+[MIT](https://github.com/zss-in-js/plumeria/blob/main/LICENSE) License &copy; 2023-PRESENT [Refirst 11](https://github.com/refirst11)

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, ReturnType, ReturnVariableType, RxVariableSet } from "zss-engine";
+import { CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTokens, CreateValues, ReturnType, ReturnVariableType, RxVariableSet, ViewTransitionOptions } from "zss-engine";
 
 declare const rx: (className: string, varSet: RxVariableSet) => {
   className: string;
@@ -12,9 +12,9 @@ declare class StyleSheet {
   static create<const T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): ReturnType<T>;
   static props(...objects: (false | Readonly<CSSProperties> | null | undefined)[]): string;
   static keyframes(object: CreateKeyframes): string;
+  static viewTransition(object: ViewTransitionOptions): string;
   static defineConsts<const T extends CreateValues>(object: T): T;
-  static defineVars<const T extends CreateValues>(object: T): ReturnVariableType<T>;
-  static defineTheme<const T extends CreateTheme>(object: T): ReturnVariableType<T>;
+  static defineTokens<const T extends CreateTokens>(object: T): ReturnVariableType<T>;
 }
 declare const css: typeof StyleSheet;
 

package/dist/index.js

@@ -144,23 +144,24 @@ function global(object) {
 
 const keyframes = (object) => {
 	const hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
-	global({ [`@keyframes ${hash}`]: object });
-	return hash;
+	const animationName = `kf-${hash}`;
+	global({ [`@keyframes ${animationName}`]: object });
+	return animationName;
 };
 
-const defineVars = (object) => {
-	const styles = { ":root": {} };
-	const result = {};
-	Object.entries(object).forEach(([key, value]) => {
-		const kebabKey = (0, zss_engine.camelToKebabCase)(key);
-		result[key] = `var(--${kebabKey})`;
-		styles[":root"][`--${key}`] = value;
+const viewTransition = (object) => {
+	const hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
+	const transitionName = `vt-${hash}`;
+	global({
+		[`::view-transition-group(${transitionName})`]: object.group,
+		[`::view-transition-image-pair(${transitionName})`]: object.imagePair,
+		[`::view-transition-old(${transitionName})`]: object.old,
+		[`::view-transition-new(${transitionName})`]: object.new
 	});
-	global(styles);
-	return result;
+	return transitionName;
 };
 
-const defineTheme = (object) => {
+const defineTokens = (object) => {
 	const styles = {};
 	const result = {};
 	Object.entries(object).forEach(([key, value]) => {
@@ -202,14 +203,14 @@ var StyleSheet = class {
 	static keyframes(object) {
 		return keyframes(object);
 	}
+	static viewTransition(object) {
+		return viewTransition(object);
+	}
 	static defineConsts(object) {
 		return defineConsts(object);
 	}
-	static defineVars(object) {
-		return defineVars(object);
-	}
-	static defineTheme(object) {
-		return defineTheme(object);
+	static defineTokens(object) {
+		return defineTokens(object);
 	}
 };
 const css = StyleSheet;

package/dist/index.mjs

@@ -144,23 +144,24 @@ function global(object) {
 
 const keyframes = (object) => {
 	const hash = genBase36Hash(object, 1, 8);
-	global({ [`@keyframes ${hash}`]: object });
-	return hash;
+	const animationName = `kf-${hash}`;
+	global({ [`@keyframes ${animationName}`]: object });
+	return animationName;
 };
 
-const defineVars = (object) => {
-	const styles = { ":root": {} };
-	const result = {};
-	Object.entries(object).forEach(([key, value]) => {
-		const kebabKey = camelToKebabCase(key);
-		result[key] = `var(--${kebabKey})`;
-		styles[":root"][`--${key}`] = value;
+const viewTransition = (object) => {
+	const hash = genBase36Hash(object, 1, 8);
+	const transitionName = `vt-${hash}`;
+	global({
+		[`::view-transition-group(${transitionName})`]: object.group,
+		[`::view-transition-image-pair(${transitionName})`]: object.imagePair,
+		[`::view-transition-old(${transitionName})`]: object.old,
+		[`::view-transition-new(${transitionName})`]: object.new
 	});
-	global(styles);
-	return result;
+	return transitionName;
 };
 
-const defineTheme = (object) => {
+const defineTokens = (object) => {
 	const styles = {};
 	const result = {};
 	Object.entries(object).forEach(([key, value]) => {
@@ -202,14 +203,14 @@ var StyleSheet = class {
 	static keyframes(object) {
 		return keyframes(object);
 	}
+	static viewTransition(object) {
+		return viewTransition(object);
+	}
 	static defineConsts(object) {
 		return defineConsts(object);
 	}
-	static defineVars(object) {
-		return defineVars(object);
-	}
-	static defineTheme(object) {
-		return defineTheme(object);
+	static defineTokens(object) {
+		return defineTokens(object);
 	}
 };
 const css = StyleSheet;

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@plumeria/core",
-  "version": "0.18.4",
+  "version": "0.19.1",
   "description": "A library for scalable and optimized styling.",
+  "author": "Refirst 11",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/refirst11",
+  "homepage": "https://plumeria.dev",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zss-in-js/plumeria.git",
     "directory": "packages/core"
   },
-  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zss-in-js/plumeria/issues"
+  },
   "keywords": [
     "plumeria",
     "atomic-css",
@@ -39,7 +45,7 @@
     "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "0.2.84"
+    "zss-engine": "0.2.88"
   },
   "publishConfig": {
     "access": "public"

package/stylesheet.css

@@ -0,0 +1,3 @@
+/**
+ * Placeholder file for static css
+ */