@plumeria/core 0.13.8 → 0.14.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +20 -161
  2. package/dist/css.js +5 -5
  3. package/dist/css.mjs +2 -2
  4. package/dist/index.d.ts +12 -185
  5. package/dist/index.js +127 -64
  6. package/dist/index.mjs +104 -64
  7. package/dist/processors/css.d.ts +2 -2
  8. package/dist/processors/css.js +1 -1
  9. package/dist/processors/css.mjs +2 -2
  10. package/package.json +3 -3
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @plumeria/core
2
2
 
3
- **Scalable and intuitive styling in design systems.**
3
+ Plumeria is a JavaScript library for Scalable and optimized styling.
4
4
 
5
- ## 🌱 Installation
5
+ ## Installation
6
6
 
7
7
  To get started with Plumeria, install the core package:
8
8
 
@@ -10,7 +10,7 @@ To get started with Plumeria, install the core package:
10
10
  npm install @plumeria/core
11
11
  ```
12
12
 
13
- ### 🛠 Compiler (for static extraction)
13
+ ### Compiler (for static extraction)
14
14
 
15
15
  If you want to extract styles at build time using commands like `npx css`, install:
16
16
 
@@ -20,7 +20,7 @@ npm install --save-dev @plumeria/compiler
20
20
 
21
21
  More at: [@plumeria/compiler on npm](https://www.npmjs.com/package/@plumeria/compiler)
22
22
 
23
- ### 🎨 Stylesheet Import
23
+ ### Stylesheet Import
24
24
 
25
25
  In your app entry point, import the compiled CSS file:
26
26
 
@@ -28,49 +28,45 @@ In your app entry point, import the compiled CSS file:
28
28
  import '@plumeria/core/stylesheet.css';
29
29
  ```
30
30
 
31
- ## 📘 API Reference
31
+ ## API
32
32
 
33
- ### `css.create()`
33
+ ### css.create()
34
34
 
35
35
  Define a set of atomic styles:
36
36
 
37
37
  ```ts
38
- import { css, ps } from '@plumeria/core';
38
+ import { css } from '@plumeria/core';
39
39
 
40
40
  const styles = css.create({
41
41
  text: {
42
- color: 'yellow', // xxxhash1
42
+ color: 'yellow', // zxxxxxx1
43
43
  },
44
44
  box: {
45
- width: '100%', // xxxhash2
46
- background: 'rgb(60,60,60)', // xxxhash3
45
+ width: '100%', // zxxxxxx2
46
+ background: 'rgb(60,60,60)', // zxxxxxx3
47
47
  },
48
48
  });
49
-
50
- const className = css.props(styles.text, styles.box);
51
- // className is "xxxhash1 xxxhash2 xxxhash3"
52
49
  ```
53
50
 
54
- If you only have one style, you can get the class name directly with the $ accessor:
51
+ ### css.props()
55
52
 
56
- ```jsx
57
- <div className={styles.$text} />
58
- // className is "xxxhash1"
59
- ```
60
-
61
- Use `css.props()` to combine multiple styles or switch between them conditionally.
53
+ Use `css.props()` to combine multiple styles or switch between them conditionally.
54
+ css.props is compiled and style properties to the right take precedence.
55
+ The same goes for shorthand and longhand rules.
62
56
 
63
57
  ```jsx
64
58
  <div className={css.props(styles.text, styles.box)} />
65
- // "xxxhash1 xxxhash2 xxxhash3"
59
+ // className="zxxxxxx1 zxxxxxx2 zxxxxxx3"
66
60
  ```
67
61
 
68
62
  Supports pseudo/media queries inline:
69
63
 
70
64
  ```ts
65
+ import { css, ps, media } from '@plumeria/core';
66
+
71
67
  const styles = css.create({
72
68
  box: {
73
- [css.media.maxWidth(900)]: {
69
+ [media.maxWidth(768)]: {
74
70
  width: '100%',
75
71
  },
76
72
  },
@@ -84,144 +80,7 @@ const styles = css.create({
84
80
  });
85
81
  ```
86
82
 
87
- ### `css.global()`
88
-
89
- Define global styles:
90
-
91
- ```ts
92
- css.global({
93
- html: {
94
- width: '100%',
95
- height: '100%',
96
- padding: 0,
97
- margin: 0,
98
- },
99
- body: {
100
- position: 'relative',
101
- width: 600,
102
- },
103
- h1: {
104
- fontSize: 32,
105
- },
106
- });
107
- ```
108
-
109
- ### `css.keyframes()`
110
-
111
- Create keyframes for animation:
112
-
113
- ```ts
114
- const fade = css.keyframes({
115
- from: {
116
- opacity: 0,
117
- },
118
- to: {
119
- opacity: 1,
120
- },
121
- });
122
-
123
- const styles = css.create({
124
- box: {
125
- animationName: fade,
126
- animationDuration: '1s',
127
- },
128
- });
129
- ```
130
-
131
- ### `css.defineConsts()`
132
-
133
- Define reusable constant values with type safety:
134
-
135
- ```ts
136
- const breakpoints = css.defineConsts({
137
- xs: css.media.maxWidth(480),
138
- sm: css.media.maxWidth(640),
139
- md: css.media.maxWidth(768),
140
- lg: css.media.maxWidth(1024),
141
- xl: css.media.maxWidth(1280),
142
- });
143
- ```
144
-
145
- Use them in your style definitions:
146
-
147
- ```ts
148
- const styles = css.create({
149
- container: {
150
- [breakpoints.sm]: {
151
- padding: 16,
152
- },
153
- [breakpoints.lg]: {
154
- padding: 32,
155
- },
156
- },
157
- });
158
- ```
159
-
160
- Constants are fully type-safe and readonly.
161
-
162
- ### `css.defineVars()`
163
-
164
- Define design tokens with CSS variables:
165
-
166
- ```ts
167
- const tokens = css.defineVars({
168
- white: 'white',
169
- black: 'black',
170
- textPrimary: '#eaeaea',
171
- textSecondary: '#333',
172
- link: 'lightblue',
173
- accent: 'purple',
174
- });
175
- ```
176
-
177
- ### `css.defineTheme()`
178
-
179
- Define theme values with responsive and conditional support:
180
-
181
- ```ts
182
- const themes = css.defineTheme({
183
- text_primary: {
184
- default: 'rgb(60,60,60)',
185
- light: 'black',
186
- dark: 'white',
187
- [css.media.maxWidth(700)]: 'gray',
188
- },
189
- bg_primary: {
190
- light: 'white',
191
- dark: 'black',
192
- },
193
- });
194
- ```
195
-
196
- ### `css.color`
197
-
198
- Color utility:
199
-
200
- ```ts
201
- color: css.color.darken('skyblue', 0.12),
202
- color: css.color.lighten('navy', 0.6),
203
-
204
- color: css.color.skyblue,
205
- color: css.color.aqua,
206
- // and many more
207
- ```
208
-
209
- ### `css.px`
210
-
211
- Pseudo expand helper:
212
-
213
- ```tsx
214
- css.px(ps.hover, ps.after);
215
- // => ":hover::after"
216
- ```
217
-
218
- `px` is also available as an export function.
219
-
220
- ```ts
221
- import { px } from '@plumeria/core';
222
- ```
223
-
224
- ## 🧹 ESLint Support
83
+ ## ESLint Support
225
84
 
226
85
  Use [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plugin) for recommended rules:
227
86
 
@@ -237,6 +96,6 @@ Use [@plumeria/eslint-plugin](https://www.npmjs.com/package/@plumeria/eslint-plu
237
96
 
238
97
  Plumeria is best used alongside TypeScript for excellent autocomplete and validation support.
239
98
 
240
- ## 📄 License
99
+ ## License
241
100
 
242
101
  Plumeria is [MIT licensed](https://github.com/zss-in-js/plumeria/blob/main/LICENSE).
package/dist/css.js CHANGED
@@ -42,7 +42,7 @@ async function processQueue_1(filePath) {
42
42
  }
43
43
  isProcessing_1 = false;
44
44
  }
45
- async function buildCreate(filePath) {
45
+ async function buildProps(filePath) {
46
46
  if (typeof globalPromise_1 === "undefined") initPromise_1();
47
47
  if (!isProcessing_1 && sheetQueue_1.length > 0) {
48
48
  isProcessing_1 = true;
@@ -82,16 +82,16 @@ Object.defineProperty(exports, '__toESM', {
82
82
  return __toESM;
83
83
  }
84
84
  });
85
- Object.defineProperty(exports, 'buildCreate', {
85
+ Object.defineProperty(exports, 'buildGlobal', {
86
86
  enumerable: true,
87
87
  get: function () {
88
- return buildCreate;
88
+ return buildGlobal;
89
89
  }
90
90
  });
91
- Object.defineProperty(exports, 'buildGlobal', {
91
+ Object.defineProperty(exports, 'buildProps', {
92
92
  enumerable: true,
93
93
  get: function () {
94
- return buildGlobal;
94
+ return buildProps;
95
95
  }
96
96
  });
97
97
  Object.defineProperty(exports, 'globalPromise_1', {
package/dist/css.mjs CHANGED
@@ -19,7 +19,7 @@ async function processQueue_1(filePath) {
19
19
  }
20
20
  isProcessing_1 = false;
21
21
  }
22
- async function buildCreate(filePath) {
22
+ async function buildProps(filePath) {
23
23
  if (typeof globalPromise_1 === "undefined") initPromise_1();
24
24
  if (!isProcessing_1 && sheetQueue_1.length > 0) {
25
25
  isProcessing_1 = true;
@@ -53,4 +53,4 @@ async function buildGlobal(filePath) {
53
53
  }
54
54
  }
55
55
 
56
- export { buildCreate, buildGlobal, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };
56
+ export { buildGlobal, buildProps, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };
package/dist/index.d.ts CHANGED
@@ -1,198 +1,25 @@
1
- import { CSSHTML, CSSProperties, CSSProperties as CSSProperties$1, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnRx, ReturnType, ReturnVariableType, RxVariableSet } from "zss-engine";
2
- import { ps } from "zss-utils";
1
+ import { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, Join, ReturnType, ReturnVariableType, RxVariableSet } from "zss-engine";
2
+ import { color, container, media, ps } from "zss-utils";
3
3
 
4
- declare const px: <T extends readonly string[]>(...pseudos: T) => Join<T>;
5
- declare const rx: (styleProps: string | Readonly<CSSProperties$1>, varSet: RxVariableSet) => {
4
+ declare const rx: (className: string, varSet: RxVariableSet) => {
6
5
  className: string;
7
6
  style: {
8
7
  [k: string]: string;
9
8
  };
10
9
  };
11
10
 
12
- declare class css {
11
+ declare const px: <T extends readonly string[]>(...pseudos: T) => Join<T>;
12
+
13
+ declare class StyleSheet {
13
14
  private constructor();
14
15
  static create<const T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): ReturnType<T>;
15
- static global(object: CSSHTML): void;
16
+ static props(...objects: (false | Readonly<CSSProperties> | null | undefined)[]): string;
16
17
  static keyframes(object: CreateKeyframes): string;
17
- static defineConsts<const T extends CreateValues>(object: T): CreateValues;
18
+ static defineConsts<const T extends CreateValues>(object: T): T;
18
19
  static defineVars<const T extends CreateValues>(object: T): ReturnVariableType<T>;
19
20
  static defineTheme<const T extends CreateTheme>(object: T): ReturnVariableType<T>;
20
- static props(...objects: (false | Readonly<CSSProperties> | null | undefined)[]): string;
21
- static rx(cssProperties: Readonly<CSSProperties>, varSet: RxVariableSet): ReturnRx;
22
- static px<T extends readonly string[]>(...pseudos: T): Join<T>;
23
- static media: {
24
- dark: "@media (prefers-color-scheme: dark)";
25
- light: "@media (prefers-color-scheme: light)";
26
- range: <S extends string>(range: S) => `@media (${S})`;
27
- maxWidth: <V extends string | number>(value: V) => `@media (max-width: ${V}px)`;
28
- maxHeight: <V extends string | number>(value: V) => `@media (max-height: ${V}px)`;
29
- minWidth: <V extends string | number>(value: V) => `@media (min-width: ${V}px)`;
30
- minHeight: <V extends string | number>(value: V) => `@media (min-height: ${V}px)`;
31
- };
32
- static container: {
33
- range: <S extends string>(range: S) => `@container (${S})`;
34
- maxWidth: <V extends string | number>(value: V) => V extends number ? `@container (max-width: ${V}px)` : `@container (max-width: ${V})`;
35
- maxHeight: <V extends string | number>(value: V) => V extends number ? `@container (max-height: ${V}px)` : `@container (max-height: ${V})`;
36
- minWidth: <V extends string | number>(value: V) => V extends number ? `@container (min-width: ${V}px)` : `@container (min-width: ${V})`;
37
- minHeight: <V extends string | number>(value: V) => V extends number ? `@container (min-height: ${V}px)` : `@container (min-height: ${V})`;
38
- };
39
- static color: {
40
- lighten: (color: string, amount: string | number) => `color-mix(in srgb, ${string}, white ${number}%)`;
41
- darken: (color: string, amount: string | number) => `color-mix(in srgb, ${string}, black ${number}%)`;
42
- primary: "#0070f3";
43
- secondary: "#ff4081";
44
- success: "#2e7d32";
45
- warning: "#ed6c02";
46
- error: "#d32f2f";
47
- aliceblue: "aliceblue";
48
- antiquewhite: "antiquewhite";
49
- aqua: "aqua";
50
- aquamarine: "aquamarine";
51
- azure: "azure";
52
- beige: "beige";
53
- bisque: "bisque";
54
- black: "black";
55
- blanchedalmond: "blanchedalmond";
56
- blue: "blue";
57
- blueviolet: "blueviolet";
58
- brown: "brown";
59
- burlywood: "burlywood";
60
- cadetblue: "cadetblue";
61
- chartreuse: "chartreuse";
62
- chocolate: "chocolate";
63
- coral: "coral";
64
- cornflowerblue: "cornflowerblue";
65
- cornsilk: "cornsilk";
66
- crimson: "crimson";
67
- cyan: "cyan";
68
- darkblue: "darkblue";
69
- darkcyan: "darkcyan";
70
- darkgoldenrod: "darkgoldenrod";
71
- darkgray: "darkgray";
72
- darkgreen: "darkgreen";
73
- darkgrey: "darkgrey";
74
- darkkhaki: "darkkhaki";
75
- darkmagenta: "darkmagenta";
76
- darkolivegreen: "darkolivegreen";
77
- darkorange: "darkorange";
78
- darkorchid: "darkorchid";
79
- darkred: "darkred";
80
- darksalmon: "darksalmon";
81
- darkseagreen: "darkseagreen";
82
- darkslateblue: "darkslateblue";
83
- darkslategray: "darkslategray";
84
- darkslategrey: "darkslategrey";
85
- darkturquoise: "darkturquoise";
86
- darkviolet: "darkviolet";
87
- deeppink: "deeppink";
88
- deepskyblue: "deepskyblue";
89
- dimgray: "dimgray";
90
- dimgrey: "dimgrey";
91
- dodgerblue: "dodgerblue";
92
- firebrick: "firebrick";
93
- floralwhite: "floralwhite";
94
- forestgreen: "forestgreen";
95
- fuchsia: "fuchsia";
96
- gainsboro: "gainsboro";
97
- ghostwhite: "ghostwhite";
98
- gold: "gold";
99
- goldenrod: "goldenrod";
100
- gray: "gray";
101
- green: "green";
102
- greenyellow: "greenyellow";
103
- grey: "grey";
104
- honeydew: "honeydew";
105
- hotpink: "hotpink";
106
- indianred: "indianred";
107
- indigo: "indigo";
108
- ivory: "ivory";
109
- khaki: "khaki";
110
- lavender: "lavender";
111
- lavenderblush: "lavenderblush";
112
- lawngreen: "lawngreen";
113
- lemonchiffon: "lemonchiffon";
114
- lightblue: "lightblue";
115
- lightcoral: "lightcoral";
116
- lightcyan: "lightcyan";
117
- lightgoldenrodyellow: "lightgoldenrodyellow";
118
- lightgray: "lightgray";
119
- lightgreen: "lightgreen";
120
- lightgrey: "lightgrey";
121
- lightpink: "lightpink";
122
- lightsalmon: "lightsalmon";
123
- lightseagreen: "lightseagreen";
124
- lightskyblue: "lightskyblue";
125
- lightslategray: "lightslategray";
126
- lightslategrey: "lightslategrey";
127
- lightsteelblue: "lightsteelblue";
128
- lightyellow: "lightyellow";
129
- lime: "lime";
130
- limegreen: "limegreen";
131
- linen: "linen";
132
- magenta: "magenta";
133
- maroon: "maroon";
134
- mediumaquamarine: "mediumaquamarine";
135
- mediumblue: "mediumblue";
136
- mediumorchid: "mediumorchid";
137
- mediumpurple: "mediumpurple";
138
- mediumseagreen: "mediumseagreen";
139
- mediumslateblue: "mediumslateblue";
140
- mediumspringgreen: "mediumspringgreen";
141
- mediumturquoise: "mediumturquoise";
142
- mediumvioletred: "mediumvioletred";
143
- midnightblue: "midnightblue";
144
- mintcream: "mintcream";
145
- mistyrose: "mistyrose";
146
- moccasin: "moccasin";
147
- navajowhite: "navajowhite";
148
- navy: "navy";
149
- oldlace: "oldlace";
150
- olive: "olive";
151
- olivedrab: "olivedrab";
152
- orange: "orange";
153
- orangered: "orangered";
154
- orchid: "orchid";
155
- palegoldenrod: "palegoldenrod";
156
- palegreen: "palegreen";
157
- paleturquoise: "paleturquoise";
158
- palevioletred: "palevioletred";
159
- papayawhip: "papayawhip";
160
- peachpuff: "peachpuff";
161
- peru: "peru";
162
- pink: "pink";
163
- plum: "plum";
164
- powderblue: "powderblue";
165
- purple: "purple";
166
- rebeccapurple: "rebeccapurple";
167
- red: "red";
168
- rosybrown: "rosybrown";
169
- royalblue: "royalblue";
170
- saddlebrown: "saddlebrown";
171
- salmon: "salmon";
172
- sandybrown: "sandybrown";
173
- seagreen: "seagreen";
174
- seashell: "seashell";
175
- sienna: "sienna";
176
- silver: "silver";
177
- skyblue: "skyblue";
178
- slateblue: "slateblue";
179
- slategray: "slategray";
180
- slategrey: "slategrey";
181
- snow: "snow";
182
- springgreen: "springgreen";
183
- steelblue: "steelblue";
184
- tan: "tan";
185
- teal: "teal";
186
- thistle: "thistle";
187
- tomato: "tomato";
188
- transparent: "transparent";
189
- turquoise: "turquoise";
190
- violet: "violet";
191
- wheat: "wheat";
192
- white: "white";
193
- whitesmoke: "whitesmoke";
194
- yellow: "yellow";
195
- yellowgreen: "yellowgreen";
196
- };
21
+ static global(object: CSSHTML): void;
197
22
  }
198
- export { CSSHTML, CSSProperties, CreateStyle, css, ps, px, rx };
23
+ declare const css: typeof StyleSheet;
24
+
25
+ export { CSSHTML, CSSProperties, CreateStyle, color, container, css, media, ps, px, rx };
package/dist/index.js CHANGED
@@ -1,47 +1,117 @@
1
1
  "use strict";
2
2
  const require_css = require('./css.js');
3
- const zss_engine = require_css.__toESM(require("zss-engine"));
4
3
  const zss_utils = require_css.__toESM(require("zss-utils"));
4
+ const zss_engine = require_css.__toESM(require("zss-engine"));
5
5
 
6
- const objectToKeyHashMap = new WeakMap();
7
- const injectedStyleSheets = new Set();
6
+ const rx = (className, varSet) => ({
7
+ className,
8
+ style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
9
+ });
10
+
11
+ const px = (...pseudos) => {
12
+ return pseudos.filter(Boolean).join("");
13
+ };
14
+
15
+ const styleAtomMap = new WeakMap();
8
16
  function create(object) {
9
17
  const result = {};
10
- Object.keys(object).forEach((key) => {
11
- const cssProperties = object[key];
12
- const atomicHashes = new Set();
13
- const allStyleSheets = new Set();
18
+ Object.entries(object).forEach(([key, styleObj]) => {
14
19
  const flat = {};
15
20
  const nonFlat = {};
16
- (0, zss_engine.splitAtomicAndNested)(cssProperties, flat, nonFlat);
17
- (0, zss_engine.processAtomicProps)(flat, atomicHashes, allStyleSheets);
21
+ (0, zss_engine.splitAtomicAndNested)(styleObj, flat, nonFlat);
22
+ const records = [];
23
+ Object.entries(flat).forEach(([prop, value]) => {
24
+ const hashes = new Set();
25
+ const sheets = new Set();
26
+ (0, zss_engine.processAtomicProps)({ [prop]: value }, hashes, sheets);
27
+ const baseSheets = [];
28
+ const querySheets = [];
29
+ for (const sheet$1 of sheets) if (sheet$1.includes("@media") || sheet$1.includes("@container")) querySheets.push(sheet$1);
30
+ else baseSheets.push(sheet$1);
31
+ const hash = [...hashes].join(" ");
32
+ const sheet = [...baseSheets, ...querySheets].join("");
33
+ records.push({
34
+ key: prop,
35
+ hash,
36
+ sheet
37
+ });
38
+ });
18
39
  if (Object.keys(nonFlat).length > 0) {
19
40
  const nonFlatObj = { [key]: nonFlat };
20
41
  const nonFlatHash = (0, zss_engine.genBase36Hash)(nonFlatObj, 1, 7);
21
- atomicHashes.add(nonFlatHash);
22
42
  const { styleSheet } = (0, zss_engine.transpile)(nonFlatObj, nonFlatHash);
23
- allStyleSheets.add(styleSheet);
24
- }
25
- const injectIfNeeded = zss_engine.isServer ? zss_engine.injectServerCSS : zss_engine.injectClientCSS;
26
- const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
27
- uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
28
- if (typeof require_css.globalPromise_1 === "undefined") require_css.initPromise_1();
29
- require_css.resolvePromise_1(uniqueStyleSheets.join(""));
30
- const combinedClassName = [...atomicHashes].join(" ");
31
- objectToKeyHashMap.set(cssProperties, combinedClassName);
32
- if (zss_engine.isTestingDevelopment) {
33
- if (uniqueStyleSheets.length > 0) injectIfNeeded(combinedClassName, uniqueStyleSheets.join("\n"));
43
+ Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
44
+ Object.entries(nestedObj).forEach(([prop]) => {
45
+ records.push({
46
+ key: atRule + prop,
47
+ hash: nonFlatHash,
48
+ sheet: styleSheet
49
+ });
50
+ });
51
+ });
34
52
  }
35
- Object.defineProperty(result, key, { get: () => {
36
- return Object.freeze(cssProperties);
37
- } });
38
- Object.defineProperty(result, "$" + key, { get: () => {
39
- return combinedClassName;
40
- } });
53
+ styleAtomMap.set(styleObj, records);
54
+ Object.defineProperty(result, key, { get: () => Object.freeze(styleObj) });
41
55
  });
42
56
  return Object.freeze(result);
43
57
  }
44
58
 
59
+ const injectedStyleSheets = new Set();
60
+ function props(...objects) {
61
+ const seenSheets = new Set();
62
+ const allStyleSheets = [];
63
+ const classList = [];
64
+ const injectIfNeeded = zss_engine.isServer ? zss_engine.injectServerCSS : zss_engine.injectClientCSS;
65
+ const chosen = new Map();
66
+ const rightmostKeys = [];
67
+ const orderedKeys = [];
68
+ for (let i = objects.length - 1; i >= 0; i--) {
69
+ const obj = objects[i];
70
+ if (!obj) continue;
71
+ const records = styleAtomMap.get(obj);
72
+ if (!records) continue;
73
+ for (const { key, hash, sheet } of records) if (!chosen.has(key)) chosen.set(key, {
74
+ hash,
75
+ sheet,
76
+ propsIdx: i
77
+ });
78
+ }
79
+ for (let i = 0; i < objects.length; i++) {
80
+ const obj = objects[i];
81
+ if (!obj) continue;
82
+ const records = styleAtomMap.get(obj);
83
+ if (!records) continue;
84
+ for (const { key } of records) if (chosen.has(key) && chosen.get(key).propsIdx === i) {
85
+ if (i === objects.length - 1) rightmostKeys.push({
86
+ ...chosen.get(key),
87
+ key
88
+ });
89
+ else orderedKeys.push({
90
+ ...chosen.get(key),
91
+ key
92
+ });
93
+ chosen.delete(key);
94
+ }
95
+ }
96
+ for (const { hash, sheet } of orderedKeys) if (!seenSheets.has(sheet)) {
97
+ seenSheets.add(sheet);
98
+ classList.push(hash);
99
+ allStyleSheets.push(sheet);
100
+ }
101
+ for (const { hash, sheet } of rightmostKeys) if (!seenSheets.has(sheet)) {
102
+ seenSheets.add(sheet);
103
+ classList.push(hash);
104
+ allStyleSheets.push(sheet);
105
+ }
106
+ const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
107
+ uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
108
+ if (typeof require_css.globalPromise_1 === "undefined") require_css.initPromise_1();
109
+ require_css.resolvePromise_1(uniqueStyleSheets.join(""));
110
+ const classNameHashes = classList.join(" ");
111
+ if (zss_engine.isTestingDevelopment) injectIfNeeded(classNameHashes, uniqueStyleSheets.join(""));
112
+ return classNameHashes;
113
+ }
114
+
45
115
  function global(object) {
46
116
  const base36Hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
47
117
  const { styleSheet } = (0, zss_engine.transpile)(object, void 0, "--global");
@@ -50,28 +120,6 @@ function global(object) {
50
120
  if (zss_engine.isTestingDevelopment) zss_engine.isServer ? (0, zss_engine.injectServerCSS)(base36Hash, styleSheet) : (0, zss_engine.injectClientGlobalCSS)(styleSheet);
51
121
  }
52
122
 
53
- const props = (...objects) => {
54
- const classNames = objects.filter(Boolean).map((obj) => {
55
- if (obj && typeof obj === "object") {
56
- const keyHash = objectToKeyHashMap.get(obj);
57
- if (keyHash) return keyHash;
58
- }
59
- return "";
60
- });
61
- return [...new Set(classNames)].join(" ");
62
- };
63
-
64
- const px = (...pseudos) => {
65
- return pseudos.filter(Boolean).join("");
66
- };
67
- const rx = (styleProps, varSet) => {
68
- const className = typeof styleProps === "string" ? styleProps : props(styleProps);
69
- return {
70
- className,
71
- style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
72
- };
73
- };
74
-
75
123
  const keyframes = (object) => {
76
124
  const prefix = (0, zss_engine.genBase36Hash)(object, 1, 8);
77
125
  global({ [`@keyframes ${prefix}`]: object });
@@ -116,13 +164,13 @@ const defineConsts = (constants) => {
116
164
  return constants;
117
165
  };
118
166
 
119
- var css = class {
167
+ var StyleSheet = class {
120
168
  constructor() {}
121
169
  static create(object) {
122
170
  return create(object);
123
171
  }
124
- static global(object) {
125
- return global(object);
172
+ static props(...objects) {
173
+ return props(...objects);
126
174
  }
127
175
  static keyframes(object) {
128
176
  return keyframes(object);
@@ -136,21 +184,36 @@ var css = class {
136
184
  static defineTheme(object) {
137
185
  return defineTheme(object);
138
186
  }
139
- static props(...objects) {
140
- return props(...objects);
141
- }
142
- static rx(cssProperties, varSet) {
143
- return rx(cssProperties, varSet);
144
- }
145
- static px(...pseudos) {
146
- return px(...pseudos);
187
+ static global(object) {
188
+ return global(object);
147
189
  }
148
- static media = zss_utils.media;
149
- static container = zss_utils.container;
150
- static color = zss_utils.color;
151
190
  };
191
+ const css = StyleSheet;
152
192
 
193
+ Object.defineProperty(exports, 'color', {
194
+ enumerable: true,
195
+ get: function () {
196
+ return zss_utils.color;
197
+ }
198
+ });
199
+ Object.defineProperty(exports, 'container', {
200
+ enumerable: true,
201
+ get: function () {
202
+ return zss_utils.container;
203
+ }
204
+ });
153
205
  exports.css = css;
154
- exports.ps = zss_utils.ps;
206
+ Object.defineProperty(exports, 'media', {
207
+ enumerable: true,
208
+ get: function () {
209
+ return zss_utils.media;
210
+ }
211
+ });
212
+ Object.defineProperty(exports, 'ps', {
213
+ enumerable: true,
214
+ get: function () {
215
+ return zss_utils.ps;
216
+ }
217
+ });
155
218
  exports.px = px;
156
219
  exports.rx = rx;
package/dist/index.mjs CHANGED
@@ -1,46 +1,116 @@
1
1
  import { globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 } from "./css.mjs";
2
- import { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isServer, isTestingDevelopment, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
3
2
  import { color, container, media, ps } from "zss-utils";
3
+ import { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isServer, isTestingDevelopment, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
4
4
 
5
- const objectToKeyHashMap = new WeakMap();
6
- const injectedStyleSheets = new Set();
5
+ const rx = (className, varSet) => ({
6
+ className,
7
+ style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
8
+ });
9
+
10
+ const px = (...pseudos) => {
11
+ return pseudos.filter(Boolean).join("");
12
+ };
13
+
14
+ const styleAtomMap = new WeakMap();
7
15
  function create(object) {
8
16
  const result = {};
9
- Object.keys(object).forEach((key) => {
10
- const cssProperties = object[key];
11
- const atomicHashes = new Set();
12
- const allStyleSheets = new Set();
17
+ Object.entries(object).forEach(([key, styleObj]) => {
13
18
  const flat = {};
14
19
  const nonFlat = {};
15
- splitAtomicAndNested(cssProperties, flat, nonFlat);
16
- processAtomicProps(flat, atomicHashes, allStyleSheets);
20
+ splitAtomicAndNested(styleObj, flat, nonFlat);
21
+ const records = [];
22
+ Object.entries(flat).forEach(([prop, value]) => {
23
+ const hashes = new Set();
24
+ const sheets = new Set();
25
+ processAtomicProps({ [prop]: value }, hashes, sheets);
26
+ const baseSheets = [];
27
+ const querySheets = [];
28
+ for (const sheet$1 of sheets) if (sheet$1.includes("@media") || sheet$1.includes("@container")) querySheets.push(sheet$1);
29
+ else baseSheets.push(sheet$1);
30
+ const hash = [...hashes].join(" ");
31
+ const sheet = [...baseSheets, ...querySheets].join("");
32
+ records.push({
33
+ key: prop,
34
+ hash,
35
+ sheet
36
+ });
37
+ });
17
38
  if (Object.keys(nonFlat).length > 0) {
18
39
  const nonFlatObj = { [key]: nonFlat };
19
40
  const nonFlatHash = genBase36Hash(nonFlatObj, 1, 7);
20
- atomicHashes.add(nonFlatHash);
21
41
  const { styleSheet } = transpile(nonFlatObj, nonFlatHash);
22
- allStyleSheets.add(styleSheet);
23
- }
24
- const injectIfNeeded = isServer ? injectServerCSS : injectClientCSS;
25
- const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
26
- uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
27
- if (typeof globalPromise_1 === "undefined") initPromise_1();
28
- resolvePromise_1(uniqueStyleSheets.join(""));
29
- const combinedClassName = [...atomicHashes].join(" ");
30
- objectToKeyHashMap.set(cssProperties, combinedClassName);
31
- if (isTestingDevelopment) {
32
- if (uniqueStyleSheets.length > 0) injectIfNeeded(combinedClassName, uniqueStyleSheets.join("\n"));
42
+ Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
43
+ Object.entries(nestedObj).forEach(([prop]) => {
44
+ records.push({
45
+ key: atRule + prop,
46
+ hash: nonFlatHash,
47
+ sheet: styleSheet
48
+ });
49
+ });
50
+ });
33
51
  }
34
- Object.defineProperty(result, key, { get: () => {
35
- return Object.freeze(cssProperties);
36
- } });
37
- Object.defineProperty(result, "$" + key, { get: () => {
38
- return combinedClassName;
39
- } });
52
+ styleAtomMap.set(styleObj, records);
53
+ Object.defineProperty(result, key, { get: () => Object.freeze(styleObj) });
40
54
  });
41
55
  return Object.freeze(result);
42
56
  }
43
57
 
58
+ const injectedStyleSheets = new Set();
59
+ function props(...objects) {
60
+ const seenSheets = new Set();
61
+ const allStyleSheets = [];
62
+ const classList = [];
63
+ const injectIfNeeded = isServer ? injectServerCSS : injectClientCSS;
64
+ const chosen = new Map();
65
+ const rightmostKeys = [];
66
+ const orderedKeys = [];
67
+ for (let i = objects.length - 1; i >= 0; i--) {
68
+ const obj = objects[i];
69
+ if (!obj) continue;
70
+ const records = styleAtomMap.get(obj);
71
+ if (!records) continue;
72
+ for (const { key, hash, sheet } of records) if (!chosen.has(key)) chosen.set(key, {
73
+ hash,
74
+ sheet,
75
+ propsIdx: i
76
+ });
77
+ }
78
+ for (let i = 0; i < objects.length; i++) {
79
+ const obj = objects[i];
80
+ if (!obj) continue;
81
+ const records = styleAtomMap.get(obj);
82
+ if (!records) continue;
83
+ for (const { key } of records) if (chosen.has(key) && chosen.get(key).propsIdx === i) {
84
+ if (i === objects.length - 1) rightmostKeys.push({
85
+ ...chosen.get(key),
86
+ key
87
+ });
88
+ else orderedKeys.push({
89
+ ...chosen.get(key),
90
+ key
91
+ });
92
+ chosen.delete(key);
93
+ }
94
+ }
95
+ for (const { hash, sheet } of orderedKeys) if (!seenSheets.has(sheet)) {
96
+ seenSheets.add(sheet);
97
+ classList.push(hash);
98
+ allStyleSheets.push(sheet);
99
+ }
100
+ for (const { hash, sheet } of rightmostKeys) if (!seenSheets.has(sheet)) {
101
+ seenSheets.add(sheet);
102
+ classList.push(hash);
103
+ allStyleSheets.push(sheet);
104
+ }
105
+ const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
106
+ uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
107
+ if (typeof globalPromise_1 === "undefined") initPromise_1();
108
+ resolvePromise_1(uniqueStyleSheets.join(""));
109
+ const classNameHashes = classList.join(" ");
110
+ if (isTestingDevelopment) injectIfNeeded(classNameHashes, uniqueStyleSheets.join(""));
111
+ return classNameHashes;
112
+ }
113
+
44
114
  function global(object) {
45
115
  const base36Hash = genBase36Hash(object, 1, 8);
46
116
  const { styleSheet } = transpile(object, void 0, "--global");
@@ -49,28 +119,6 @@ function global(object) {
49
119
  if (isTestingDevelopment) isServer ? injectServerCSS(base36Hash, styleSheet) : injectClientGlobalCSS(styleSheet);
50
120
  }
51
121
 
52
- const props = (...objects) => {
53
- const classNames = objects.filter(Boolean).map((obj) => {
54
- if (obj && typeof obj === "object") {
55
- const keyHash = objectToKeyHashMap.get(obj);
56
- if (keyHash) return keyHash;
57
- }
58
- return "";
59
- });
60
- return [...new Set(classNames)].join(" ");
61
- };
62
-
63
- const px = (...pseudos) => {
64
- return pseudos.filter(Boolean).join("");
65
- };
66
- const rx = (styleProps, varSet) => {
67
- const className = typeof styleProps === "string" ? styleProps : props(styleProps);
68
- return {
69
- className,
70
- style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
71
- };
72
- };
73
-
74
122
  const keyframes = (object) => {
75
123
  const prefix = genBase36Hash(object, 1, 8);
76
124
  global({ [`@keyframes ${prefix}`]: object });
@@ -115,13 +163,13 @@ const defineConsts = (constants) => {
115
163
  return constants;
116
164
  };
117
165
 
118
- var css = class {
166
+ var StyleSheet = class {
119
167
  constructor() {}
120
168
  static create(object) {
121
169
  return create(object);
122
170
  }
123
- static global(object) {
124
- return global(object);
171
+ static props(...objects) {
172
+ return props(...objects);
125
173
  }
126
174
  static keyframes(object) {
127
175
  return keyframes(object);
@@ -135,18 +183,10 @@ var css = class {
135
183
  static defineTheme(object) {
136
184
  return defineTheme(object);
137
185
  }
138
- static props(...objects) {
139
- return props(...objects);
140
- }
141
- static rx(cssProperties, varSet) {
142
- return rx(cssProperties, varSet);
143
- }
144
- static px(...pseudos) {
145
- return px(...pseudos);
186
+ static global(object) {
187
+ return global(object);
146
188
  }
147
- static media = media;
148
- static container = container;
149
- static color = color;
150
189
  };
190
+ const css = StyleSheet;
151
191
 
152
- export { css, ps, px, rx };
192
+ export { color, container, css, media, ps, px, rx };
package/dist/processors/css.d.ts CHANGED
@@ -2,10 +2,10 @@
2
2
  declare let resolvePromise_1: (value: string) => void;
3
3
  declare let globalPromise_1: Promise<string>;
4
4
  declare function initPromise_1(): void;
5
- declare function buildCreate(filePath: string): Promise<void>;
5
+ declare function buildProps(filePath: string): Promise<void>;
6
6
  declare let resolvePromise_2: (value: string) => void;
7
7
  declare let globalPromise_2: Promise<string>;
8
8
  declare function initPromise_2(): void;
9
9
  declare function buildGlobal(filePath: string): Promise<void>;
10
10
 
11
- export { buildCreate, buildGlobal, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };
11
+ export { buildGlobal, buildProps, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };
package/dist/processors/css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  const require_css = require('../css.js');
2
- exports.buildCreate = require_css.buildCreate;
3
2
  exports.buildGlobal = require_css.buildGlobal;
3
+ exports.buildProps = require_css.buildProps;
4
4
  Object.defineProperty(exports, 'globalPromise_1', {
5
5
  enumerable: true,
6
6
  get: function () {
package/dist/processors/css.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import { buildCreate, buildGlobal, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 } from "../css.mjs";
2
- export { buildCreate, buildGlobal, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };
1
+ import { buildGlobal, buildProps, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 } from "../css.mjs";
2
+ export { buildGlobal, buildProps, globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@plumeria/core",
3
- "version": "0.13.8",
4
- "description": "A library for scalable and intuitive styling in design systems.",
3
+ "version": "0.14.7",
4
+ "description": "A library for Scalable and optimized styling",
5
5
  "keywords": [
6
6
  "css",
7
7
  "css-in-js",
@@ -39,7 +39,7 @@
39
39
  "stylesheet.css"
40
40
  ],
41
41
  "dependencies": {
42
- "zss-engine": "0.2.63",
42
+ "zss-engine": "0.2.71",
43
43
  "zss-utils": "0.2.4"
44
44
  },
45
45
  "publishConfig": {