@plumeria/core 0.12.1 → 0.13.0

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 (4) hide show
  1. package/README.md +9 -6
  2. package/dist/index.js +28 -16
  3. package/dist/index.mjs +29 -17
  4. package/package.json +3 -3
package/README.md CHANGED
@@ -32,34 +32,37 @@ import '@plumeria/core/stylesheet.css';
32
32
 
33
33
  ### `css.create()`
34
34
 
35
- Define a set of styles:
35
+ Define a set of atomic styles:
36
36
 
37
37
  ```ts
38
38
  import { css, ps } from '@plumeria/core';
39
39
 
40
40
  const styles = css.create({
41
- box: {
42
- width: '100%',
43
- color: 'rgb(60,60,60)',
44
- },
45
41
  text: {
46
- color: 'yellow',
42
+ color: 'yellow', // xhash1x
43
+ },
44
+ box: {
45
+ width: '100%', // xhash2x
46
+ background: 'rgb(60,60,60)', // xhash3x
47
47
  },
48
48
  });
49
49
 
50
50
  const className = css.props(styles.text, styles.box);
51
+ // className is "xhash1x xhash2x xhash3x"
51
52
  ```
52
53
 
53
54
  If you only have one style, you can get the class name directly with the $ accessor:
54
55
 
55
56
  ```jsx
56
57
  <div className={styles.$text} />
58
+ // className is "xhash1x"
57
59
  ```
58
60
 
59
61
  Use `css.props()` to combine multiple styles or switch between them conditionally.
60
62
 
61
63
  ```jsx
62
64
  <div className={css.props(styles.text, styles.box)} />
65
+ // "xhash1x xhash2x xhash3x"
63
66
  ```
64
67
 
65
68
  Supports pseudo/media queries inline:
package/dist/index.js CHANGED
@@ -4,35 +4,47 @@ const zss_engine = require_css.__toESM(require("zss-engine"));
4
4
  const zss_utils = require_css.__toESM(require("zss-utils"));
5
5
 
6
6
  const objectToKeyHashMap = new WeakMap();
7
+ const injectedStyleSheets = new Set();
7
8
  function create(object) {
8
- const base36Hash = (0, zss_engine.genBase36Hash)(object, 6);
9
- const { styleSheet } = (0, zss_engine.transpiler)(object, base36Hash);
10
- const injectCSS = zss_engine.isServer ? zss_engine.injectServerCSS : zss_engine.injectClientCSS;
11
- const injectIfNeeded = () => {
12
- if (zss_engine.isTestingDevelopment) injectCSS(base36Hash, styleSheet);
13
- };
14
- if (typeof require_css.globalPromise_1 === "undefined") require_css.initPromise_1();
15
- require_css.resolvePromise_1(styleSheet);
16
9
  const result = {};
17
10
  Object.keys(object).forEach((key) => {
18
11
  const cssProperties = object[key];
19
- const hashedClassName = key + "_" + base36Hash;
20
- objectToKeyHashMap.set(cssProperties, hashedClassName);
12
+ const atomicHashes = new Set();
13
+ const allStyleSheets = new Set();
14
+ const flat = {};
15
+ const nonFlat = {};
16
+ (0, zss_engine.splitAtomicAndNested)(cssProperties, flat, nonFlat);
17
+ (0, zss_engine.processAtomicProps)(flat, atomicHashes, allStyleSheets);
18
+ if (Object.keys(nonFlat).length > 0) {
19
+ const nonFlatObj = { [key]: nonFlat };
20
+ const nonFlatHash = (0, zss_engine.genBase36Hash)(nonFlatObj, 1, 7);
21
+ atomicHashes.add(nonFlatHash);
22
+ 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
+ if (typeof require_css.globalPromise_1 === "undefined") require_css.initPromise_1();
27
+ require_css.resolvePromise_1([...allStyleSheets].join("\n"));
28
+ const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
29
+ uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
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"));
34
+ }
21
35
  Object.defineProperty(result, key, { get: () => {
22
- injectIfNeeded();
23
36
  return Object.freeze(cssProperties);
24
37
  } });
25
38
  Object.defineProperty(result, "$" + key, { get: () => {
26
- injectIfNeeded();
27
- return hashedClassName;
39
+ return combinedClassName;
28
40
  } });
29
41
  });
30
42
  return Object.freeze(result);
31
43
  }
32
44
 
33
45
  function global(object) {
34
- const base36Hash = (0, zss_engine.genBase36Hash)(object, 8);
35
- const { styleSheet } = (0, zss_engine.transpiler)(object, void 0, "--global");
46
+ const base36Hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
47
+ const { styleSheet } = (0, zss_engine.transpile)(object, void 0, "--global");
36
48
  if (typeof require_css.globalPromise_2 === "undefined") require_css.initPromise_2();
37
49
  require_css.resolvePromise_2(styleSheet);
38
50
  if (zss_engine.isTestingDevelopment) zss_engine.isServer ? (0, zss_engine.injectServerCSS)(base36Hash, styleSheet) : (0, zss_engine.injectClientGlobalCSS)(styleSheet);
@@ -61,7 +73,7 @@ const rx = (styleProps, varSet) => {
61
73
  };
62
74
 
63
75
  const keyframes = (object) => {
64
- const prefix = (0, zss_engine.genBase36Hash)(object, 8);
76
+ const prefix = (0, zss_engine.genBase36Hash)(object, 1, 8);
65
77
  global({ [`@keyframes ${prefix}`]: object });
66
78
  return prefix;
67
79
  };
package/dist/index.mjs CHANGED
@@ -1,37 +1,49 @@
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, transpiler } from "zss-engine";
2
+ import { camelToKebabCase, genBase36Hash, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isServer, isTestingDevelopment, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
3
3
  import { color, container, media, ps } from "zss-utils";
4
4
 
5
5
  const objectToKeyHashMap = new WeakMap();
6
+ const injectedStyleSheets = new Set();
6
7
  function create(object) {
7
- const base36Hash = genBase36Hash(object, 6);
8
- const { styleSheet } = transpiler(object, base36Hash);
9
- const injectCSS = isServer ? injectServerCSS : injectClientCSS;
10
- const injectIfNeeded = () => {
11
- if (isTestingDevelopment) injectCSS(base36Hash, styleSheet);
12
- };
13
- if (typeof globalPromise_1 === "undefined") initPromise_1();
14
- resolvePromise_1(styleSheet);
15
8
  const result = {};
16
9
  Object.keys(object).forEach((key) => {
17
10
  const cssProperties = object[key];
18
- const hashedClassName = key + "_" + base36Hash;
19
- objectToKeyHashMap.set(cssProperties, hashedClassName);
11
+ const atomicHashes = new Set();
12
+ const allStyleSheets = new Set();
13
+ const flat = {};
14
+ const nonFlat = {};
15
+ splitAtomicAndNested(cssProperties, flat, nonFlat);
16
+ processAtomicProps(flat, atomicHashes, allStyleSheets);
17
+ if (Object.keys(nonFlat).length > 0) {
18
+ const nonFlatObj = { [key]: nonFlat };
19
+ const nonFlatHash = genBase36Hash(nonFlatObj, 1, 7);
20
+ atomicHashes.add(nonFlatHash);
21
+ const { styleSheet } = transpile(nonFlatObj, nonFlatHash);
22
+ allStyleSheets.add(styleSheet);
23
+ }
24
+ const injectIfNeeded = isServer ? injectServerCSS : injectClientCSS;
25
+ if (typeof globalPromise_1 === "undefined") initPromise_1();
26
+ resolvePromise_1([...allStyleSheets].join("\n"));
27
+ const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
28
+ uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
29
+ const combinedClassName = [...atomicHashes].join(" ");
30
+ objectToKeyHashMap.set(cssProperties, combinedClassName);
31
+ if (isTestingDevelopment) {
32
+ if (uniqueStyleSheets.length > 0) injectIfNeeded(combinedClassName, uniqueStyleSheets.join("\n"));
33
+ }
20
34
  Object.defineProperty(result, key, { get: () => {
21
- injectIfNeeded();
22
35
  return Object.freeze(cssProperties);
23
36
  } });
24
37
  Object.defineProperty(result, "$" + key, { get: () => {
25
- injectIfNeeded();
26
- return hashedClassName;
38
+ return combinedClassName;
27
39
  } });
28
40
  });
29
41
  return Object.freeze(result);
30
42
  }
31
43
 
32
44
  function global(object) {
33
- const base36Hash = genBase36Hash(object, 8);
34
- const { styleSheet } = transpiler(object, void 0, "--global");
45
+ const base36Hash = genBase36Hash(object, 1, 8);
46
+ const { styleSheet } = transpile(object, void 0, "--global");
35
47
  if (typeof globalPromise_2 === "undefined") initPromise_2();
36
48
  resolvePromise_2(styleSheet);
37
49
  if (isTestingDevelopment) isServer ? injectServerCSS(base36Hash, styleSheet) : injectClientGlobalCSS(styleSheet);
@@ -60,7 +72,7 @@ const rx = (styleProps, varSet) => {
60
72
  };
61
73
 
62
74
  const keyframes = (object) => {
63
- const prefix = genBase36Hash(object, 8);
75
+ const prefix = genBase36Hash(object, 1, 8);
64
76
  global({ [`@keyframes ${prefix}`]: object });
65
77
  return prefix;
66
78
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@plumeria/core",
3
- "version": "0.12.1",
4
- "description": "Zero-runtime, expressive CSS-in-JS library for TypeScript.",
3
+ "version": "0.13.0",
4
+ "description": "A library for scalable and intuitive styling in design systems.",
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.48",
42
+ "zss-engine": "0.2.57",
43
43
  "zss-utils": "0.2.4"
44
44
  },
45
45
  "publishConfig": {