@plumeria/core 0.14.10 → 0.15.1

package/README.md

@@ -1,6 +1,6 @@
 # @plumeria/core
 
-Plumeria is a JavaScript library for Scalable and optimized styling.
+Plumeria is a JavaScript library for scalable and optimized styling.
 
 ## Installation
 
@@ -10,16 +10,14 @@ To get started with Plumeria, install the core package:
 npm install @plumeria/core
 ```
 
-### Compiler (for static extraction)
+### Compiler
 
-If you want to extract styles at build time using commands like `npx css`, install:
+Install the `css` command to extract styles at build time:
 
 ```sh
 npm install --save-dev @plumeria/compiler
 ```
 
-More at: [@plumeria/compiler on npm](https://www.npmjs.com/package/@plumeria/compiler)
-
 ### Stylesheet Import
 
 In your app entry point, import the compiled CSS file:
@@ -51,28 +49,31 @@ const styles = css.create({
 ### css.props()
 
 Use `css.props()` to combine multiple styles or switch between them conditionally.  
-css.props is compiled and style properties to the right take precedence.  
-The same goes for shorthand and longhand rules.
+css.props is compiled and style properties to the right take precedence.
 
 ```jsx
 <div className={css.props(styles.text, styles.box)} />
 //   className="zxxxxxx1 zxxxxxx2 zxxxxxx3"
 ```
 
-Supports pseudo/media queries inline:
+Shorthand and longhand property rules follow the same principles as CSS rules.
+
+---
+
+It supports media query pseudo-classes and elements in a familiar syntax.
 
 ```ts
-import { css, ps, media } from '@plumeria/core';
+import { css } from '@plumeria/core';
 
 const styles = css.create({
   box: {
-    [media.maxWidth(768)]: {
+    '@media (max-width: 768px)': {
       width: '100%',
     },
   },
   text: {
     color: '#333',
-    [ps.hover]: {
+    ':hover': {
       color: 'skyblue',
       opacity: 0.9,
     },
@@ -82,7 +83,7 @@ const styles = css.create({
 
 ## ESLint Support
 
-Use [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plugin) for recommended rules:
+The [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plugin) provides recommended rules:
 
 ### Rules: recommended
 
@@ -94,7 +95,7 @@ Use [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plu
 - validate-values: warn
 ```
 
-Plumeria is best used alongside TypeScript for excellent autocomplete and validation support.
+It plugin provides autocomplete and validation support.
 
 ## License
 

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnType, ReturnVariableType, RxVariableSet } from "zss-engine";
-import { color, container, media, ps } from "zss-utils";
+import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, ReturnType, ReturnVariableType, RxVariableSet } from "zss-engine";
 
 declare const rx: (className: string, varSet: RxVariableSet) => {
   className: string;
@@ -8,8 +7,6 @@ declare const rx: (className: string, varSet: RxVariableSet) => {
   };
 };
 
-declare const px: <T extends readonly string[]>(...pseudos: T) => Join<T>;
-
 declare class StyleSheet {
   private constructor();
   static create<const T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): ReturnType<T>;
@@ -22,4 +19,4 @@ declare class StyleSheet {
 }
 declare const css: typeof StyleSheet;
 
-export { CSSHTML, CSSProperties, CreateStyle, color, container, css, media, ps, px, rx };
+export { CSSHTML, CSSProperties, CreateStyle, css, rx };

package/dist/index.js

@@ -1,17 +1,7 @@
 "use strict";
 const require_css = require('./css.js');
-const zss_utils = require_css.__toESM(require("zss-utils"));
 const zss_engine = require_css.__toESM(require("zss-engine"));
 
-const rx = (className, varSet) => ({
-	className,
-	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
-});
-
-const px = (...pseudos) => {
-	return pseudos.filter(Boolean).join("");
-};
-
 const styleAtomMap = new WeakMap();
 function create(object) {
 	const result = {};
@@ -61,7 +51,6 @@ function props(...objects) {
 	const seenSheets = new Set();
 	const allStyleSheets = [];
 	const classList = [];
-	const injectIfNeeded = zss_engine.isServer ? zss_engine.injectServerCSS : zss_engine.injectClientCSS;
 	const chosen = new Map();
 	const rightmostKeys = [];
 	const orderedKeys = [];
@@ -107,24 +96,23 @@ function props(...objects) {
 	uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
 	if (typeof require_css.globalPromise_1 === "undefined") require_css.initPromise_1();
 	require_css.resolvePromise_1(uniqueStyleSheets.join(""));
-	if (zss_engine.isTestingDevelopment) {
-		for (const { hash, sheet } of [...orderedKeys, ...rightmostKeys]) if (uniqueStyleSheets.includes(sheet)) injectIfNeeded(hash, sheet);
+	if (zss_engine.isTestingDevelopment && !zss_engine.isServer) {
+		for (const { hash, sheet } of [...orderedKeys, ...rightmostKeys]) if (uniqueStyleSheets.includes(sheet)) (0, zss_engine.injectClientCSS)(hash, sheet);
 	}
 	return classList.join(" ");
 }
 
 function global(object) {
-	const base36Hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
 	const { styleSheet } = (0, zss_engine.transpile)(object, void 0, "--global");
 	if (typeof require_css.globalPromise_2 === "undefined") require_css.initPromise_2();
 	require_css.resolvePromise_2(styleSheet);
-	if (zss_engine.isTestingDevelopment) zss_engine.isServer ? (0, zss_engine.injectServerCSS)(base36Hash, styleSheet) : (0, zss_engine.injectClientGlobalCSS)(styleSheet);
+	if (zss_engine.isTestingDevelopment && !zss_engine.isServer) (0, zss_engine.injectClientGlobalCSS)(styleSheet);
 }
 
 const keyframes = (object) => {
-	const prefix = (0, zss_engine.genBase36Hash)(object, 1, 8);
-	global({ [`@keyframes ${prefix}`]: object });
-	return prefix;
+	const hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
+	global({ [`@keyframes ${hash}`]: object });
+	return hash;
 };
 
 const defineVars = (object) => {
@@ -165,6 +153,11 @@ const defineConsts = (constants) => {
 	return constants;
 };
 
+const rx = (className, varSet) => ({
+	className,
+	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
+});
+
 var StyleSheet = class {
 	constructor() {}
 	static create(object) {
@@ -191,30 +184,5 @@ var StyleSheet = class {
 };
 const css = StyleSheet;
 
-Object.defineProperty(exports, 'color', {
-  enumerable: true,
-  get: function () {
-    return zss_utils.color;
-  }
-});
-Object.defineProperty(exports, 'container', {
-  enumerable: true,
-  get: function () {
-    return zss_utils.container;
-  }
-});
 exports.css = css;
-Object.defineProperty(exports, 'media', {
-  enumerable: true,
-  get: function () {
-    return zss_utils.media;
-  }
-});
-Object.defineProperty(exports, 'ps', {
-  enumerable: true,
-  get: function () {
-    return zss_utils.ps;
-  }
-});
-exports.px = px;
 exports.rx = rx;

package/dist/index.mjs

@@ -1,15 +1,5 @@
 import { globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 } from "./css.mjs";
-import { color, container, media, ps } from "zss-utils";
-import { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isServer, isTestingDevelopment, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
-
-const rx = (className, varSet) => ({
-	className,
-	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
-});
-
-const px = (...pseudos) => {
-	return pseudos.filter(Boolean).join("");
-};
+import { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, isServer, isTestingDevelopment, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
 
 const styleAtomMap = new WeakMap();
 function create(object) {
@@ -60,7 +50,6 @@ function props(...objects) {
 	const seenSheets = new Set();
 	const allStyleSheets = [];
 	const classList = [];
-	const injectIfNeeded = isServer ? injectServerCSS : injectClientCSS;
 	const chosen = new Map();
 	const rightmostKeys = [];
 	const orderedKeys = [];
@@ -106,24 +95,23 @@ function props(...objects) {
 	uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
 	if (typeof globalPromise_1 === "undefined") initPromise_1();
 	resolvePromise_1(uniqueStyleSheets.join(""));
-	if (isTestingDevelopment) {
-		for (const { hash, sheet } of [...orderedKeys, ...rightmostKeys]) if (uniqueStyleSheets.includes(sheet)) injectIfNeeded(hash, sheet);
+	if (isTestingDevelopment && !isServer) {
+		for (const { hash, sheet } of [...orderedKeys, ...rightmostKeys]) if (uniqueStyleSheets.includes(sheet)) injectClientCSS(hash, sheet);
 	}
 	return classList.join(" ");
 }
 
 function global(object) {
-	const base36Hash = genBase36Hash(object, 1, 8);
 	const { styleSheet } = transpile(object, void 0, "--global");
 	if (typeof globalPromise_2 === "undefined") initPromise_2();
 	resolvePromise_2(styleSheet);
-	if (isTestingDevelopment) isServer ? injectServerCSS(base36Hash, styleSheet) : injectClientGlobalCSS(styleSheet);
+	if (isTestingDevelopment && !isServer) injectClientGlobalCSS(styleSheet);
 }
 
 const keyframes = (object) => {
-	const prefix = genBase36Hash(object, 1, 8);
-	global({ [`@keyframes ${prefix}`]: object });
-	return prefix;
+	const hash = genBase36Hash(object, 1, 8);
+	global({ [`@keyframes ${hash}`]: object });
+	return hash;
 };
 
 const defineVars = (object) => {
@@ -164,6 +152,11 @@ const defineConsts = (constants) => {
 	return constants;
 };
 
+const rx = (className, varSet) => ({
+	className,
+	style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
+});
+
 var StyleSheet = class {
 	constructor() {}
 	static create(object) {
@@ -190,4 +183,4 @@ var StyleSheet = class {
 };
 const css = StyleSheet;
 
-export { color, container, css, media, ps, px, rx };
+export { css, rx };

package/package.json

@@ -1,15 +1,7 @@
 {
   "name": "@plumeria/core",
-  "version": "0.14.10",
-  "description": "A library for Scalable and optimized styling",
-  "keywords": [
-    "css",
-    "css-in-js",
-    "plumeria",
-    "react",
-    "next",
-    "vite"
-  ],
+  "version": "0.15.1",
+  "description": "A library for scalable and optimized styling",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zss-in-js/plumeria.git",
@@ -39,8 +31,7 @@
     "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "0.2.72",
-    "zss-utils": "0.2.4"
+    "zss-engine": "0.2.75"
   },
   "publishConfig": {
     "access": "public"