zss-engine 0.2.80 → 0.2.82

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 (7) hide show
  1. package/dist/cjs/index.js +1 -2
  2. package/dist/cjs/utils/inject-client-css.js +39 -40
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/utils/inject-client-css.js +38 -39
  5. package/dist/types/index.d.ts +1 -1
  6. package/dist/types/utils/inject-client-css.d.ts +1 -1
  7. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.isHashInStyleSheets = exports.injectClientGlobalCSS = exports.injectClientQuery = exports.injectClientCSS = exports.applyCssValue = exports.camelToKebabCase = exports.build = exports.processAtomicProps = exports.splitAtomicAndNested = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = exports.isTestingDevelopment = exports.isDevelopment = exports.isServer = void 0;
3
+ exports.isHashInStyleSheets = exports.injectClientGlobalCSS = exports.injectClientCSS = exports.applyCssValue = exports.camelToKebabCase = exports.build = exports.processAtomicProps = exports.splitAtomicAndNested = exports.transpileAtomic = exports.transpile = exports.genBase36Hash = exports.isTestingDevelopment = exports.isDevelopment = exports.isServer = void 0;
4
4
  var helper_js_1 = require("./utils/helper.js");
5
5
  Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return helper_js_1.isServer; } });
6
6
  Object.defineProperty(exports, "isDevelopment", { enumerable: true, get: function () { return helper_js_1.isDevelopment; } });
@@ -21,7 +21,6 @@ Object.defineProperty(exports, "camelToKebabCase", { enumerable: true, get: func
21
21
  Object.defineProperty(exports, "applyCssValue", { enumerable: true, get: function () { return helper_js_2.applyCssValue; } });
22
22
  var inject_client_css_js_1 = require("./utils/inject-client-css.js");
23
23
  Object.defineProperty(exports, "injectClientCSS", { enumerable: true, get: function () { return inject_client_css_js_1.injectClientCSS; } });
24
- Object.defineProperty(exports, "injectClientQuery", { enumerable: true, get: function () { return inject_client_css_js_1.injectClientQuery; } });
25
24
  var inject_client_global_css_js_1 = require("./utils/inject-client-global-css.js");
26
25
  Object.defineProperty(exports, "injectClientGlobalCSS", { enumerable: true, get: function () { return inject_client_global_css_js_1.injectClientGlobalCSS; } });
27
26
  var is_hash_in_style_sheets_js_1 = require("./utils/is-hash-in-style-sheets.js");
package/dist/cjs/utils/inject-client-css.js CHANGED
@@ -1,52 +1,51 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.createStyleElement = createStyleElement;
3
4
  exports.injectClientCSS = injectClientCSS;
4
- exports.injectClientQuery = injectClientQuery;
5
5
  const index_js_1 = require("../index.js");
6
- const styleCache = {};
7
- let clientStyleElement = null;
8
- let queryStyleElement = null;
9
- function createClientStyleElement() {
10
- if (!clientStyleElement) {
11
- clientStyleElement = document.querySelector('style[data-scope="client"]');
12
- if (!clientStyleElement) {
13
- clientStyleElement = document.createElement('style');
14
- clientStyleElement.setAttribute('data-scope', 'client');
15
- clientStyleElement.setAttribute('type', 'text/css');
16
- document.head.prepend(clientStyleElement);
17
- }
18
- }
19
- return clientStyleElement;
20
- }
21
- function createQueryStyleElement() {
22
- if (!queryStyleElement) {
23
- queryStyleElement = document.querySelector('style[data-scope="query"]');
24
- if (!queryStyleElement) {
25
- queryStyleElement = document.createElement('style');
26
- queryStyleElement.setAttribute('data-scope', 'query');
27
- queryStyleElement.setAttribute('type', 'text/css');
28
- document.head.appendChild(queryStyleElement);
29
- }
30
- }
31
- return queryStyleElement;
6
+ const styleSheets = {};
7
+ const hashCache = {};
8
+ function createStyleElement(hash) {
9
+ if (document.getElementById(hash))
10
+ return null;
11
+ const styleElement = document.createElement('style');
12
+ styleElement.setAttribute('id', hash);
13
+ styleElement.setAttribute('type', 'text/css');
14
+ styleSheets[hash] = styleElement;
15
+ document.head.appendChild(styleElement);
16
+ return styleSheets[hash];
32
17
  }
33
18
  function injectClientCSS(hash, sheet) {
34
19
  if (index_js_1.isServer)
35
20
  return;
36
- if (styleCache[hash])
21
+ requestAnimationFrame(() => {
22
+ styleCleanUp();
23
+ });
24
+ hashCache[hash] = hash;
25
+ const styleElement = createStyleElement(hash);
26
+ if (styleElement == null)
37
27
  return;
38
- styleCache[hash] = sheet;
39
- const clientElement = createClientStyleElement();
40
- clientElement.textContent = sheet + (clientElement.textContent || '');
28
+ styleElement.textContent = sheet;
41
29
  }
42
- function injectClientQuery(hash, sheet) {
43
- if (index_js_1.isServer)
44
- return;
45
- if (styleCache[hash])
46
- return;
47
- styleCache[hash] = sheet;
48
- if (sheet.includes('@media') || sheet.includes('@container')) {
49
- const queryElement = createQueryStyleElement();
50
- queryElement.textContent = (queryElement.textContent || '') + sheet;
30
+ function styleCleanUp() {
31
+ requestAnimationFrame(() => {
32
+ for (const hash in hashCache) {
33
+ const classElements = document.querySelectorAll(`[class*="${hash}"]`);
34
+ if (classElements.length === 0) {
35
+ removeStyleElement(hashCache[hash]);
36
+ }
37
+ }
38
+ });
39
+ }
40
+ function removeStyleElement(hash) {
41
+ if (styleSheets[hash]) {
42
+ delete styleSheets[hash];
43
+ if (hashCache.hasOwnProperty.call(hashCache, hash)) {
44
+ delete hashCache[hash];
45
+ }
46
+ const styleElement = document.getElementById(hash);
47
+ if (styleElement) {
48
+ document.head.removeChild(styleElement);
49
+ }
51
50
  }
52
51
  }
package/dist/esm/index.js CHANGED
@@ -5,6 +5,6 @@ export { transpileAtomic } from './utils/transpile-atomic.js';
5
5
  export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
6
6
  export { build } from './utils/build.js';
7
7
  export { camelToKebabCase, applyCssValue } from './utils/helper.js';
8
- export { injectClientCSS, injectClientQuery } from './utils/inject-client-css.js';
8
+ export { injectClientCSS } from './utils/inject-client-css.js';
9
9
  export { injectClientGlobalCSS } from './utils/inject-client-global-css.js';
10
10
  export { isHashInStyleSheets } from './utils/is-hash-in-style-sheets.js';
package/dist/esm/utils/inject-client-css.js CHANGED
@@ -1,48 +1,47 @@
1
1
  import { isServer } from '../index.js';
2
- const styleCache = {};
3
- let clientStyleElement = null;
4
- let queryStyleElement = null;
5
- function createClientStyleElement() {
6
- if (!clientStyleElement) {
7
- clientStyleElement = document.querySelector('style[data-scope="client"]');
8
- if (!clientStyleElement) {
9
- clientStyleElement = document.createElement('style');
10
- clientStyleElement.setAttribute('data-scope', 'client');
11
- clientStyleElement.setAttribute('type', 'text/css');
12
- document.head.prepend(clientStyleElement);
13
- }
14
- }
15
- return clientStyleElement;
16
- }
17
- function createQueryStyleElement() {
18
- if (!queryStyleElement) {
19
- queryStyleElement = document.querySelector('style[data-scope="query"]');
20
- if (!queryStyleElement) {
21
- queryStyleElement = document.createElement('style');
22
- queryStyleElement.setAttribute('data-scope', 'query');
23
- queryStyleElement.setAttribute('type', 'text/css');
24
- document.head.appendChild(queryStyleElement);
25
- }
26
- }
27
- return queryStyleElement;
2
+ const styleSheets = {};
3
+ const hashCache = {};
4
+ export function createStyleElement(hash) {
5
+ if (document.getElementById(hash))
6
+ return null;
7
+ const styleElement = document.createElement('style');
8
+ styleElement.setAttribute('id', hash);
9
+ styleElement.setAttribute('type', 'text/css');
10
+ styleSheets[hash] = styleElement;
11
+ document.head.appendChild(styleElement);
12
+ return styleSheets[hash];
28
13
  }
29
14
  export function injectClientCSS(hash, sheet) {
30
15
  if (isServer)
31
16
  return;
32
- if (styleCache[hash])
17
+ requestAnimationFrame(() => {
18
+ styleCleanUp();
19
+ });
20
+ hashCache[hash] = hash;
21
+ const styleElement = createStyleElement(hash);
22
+ if (styleElement == null)
33
23
  return;
34
- styleCache[hash] = sheet;
35
- const clientElement = createClientStyleElement();
36
- clientElement.textContent = sheet + (clientElement.textContent || '');
24
+ styleElement.textContent = sheet;
37
25
  }
38
- export function injectClientQuery(hash, sheet) {
39
- if (isServer)
40
- return;
41
- if (styleCache[hash])
42
- return;
43
- styleCache[hash] = sheet;
44
- if (sheet.includes('@media') || sheet.includes('@container')) {
45
- const queryElement = createQueryStyleElement();
46
- queryElement.textContent = (queryElement.textContent || '') + sheet;
26
+ function styleCleanUp() {
27
+ requestAnimationFrame(() => {
28
+ for (const hash in hashCache) {
29
+ const classElements = document.querySelectorAll(`[class*="${hash}"]`);
30
+ if (classElements.length === 0) {
31
+ removeStyleElement(hashCache[hash]);
32
+ }
33
+ }
34
+ });
35
+ }
36
+ function removeStyleElement(hash) {
37
+ if (styleSheets[hash]) {
38
+ delete styleSheets[hash];
39
+ if (hashCache.hasOwnProperty.call(hashCache, hash)) {
40
+ delete hashCache[hash];
41
+ }
42
+ const styleElement = document.getElementById(hash);
43
+ if (styleElement) {
44
+ document.head.removeChild(styleElement);
45
+ }
47
46
  }
48
47
  }
package/dist/types/index.d.ts CHANGED
@@ -9,6 +9,6 @@ export { transpileAtomic } from './utils/transpile-atomic.js';
9
9
  export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
10
10
  export { build } from './utils/build.js';
11
11
  export { camelToKebabCase, applyCssValue } from './utils/helper.js';
12
- export { injectClientCSS, injectClientQuery } from './utils/inject-client-css.js';
12
+ export { injectClientCSS } from './utils/inject-client-css.js';
13
13
  export { injectClientGlobalCSS } from './utils/inject-client-global-css.js';
14
14
  export { isHashInStyleSheets } from './utils/is-hash-in-style-sheets.js';
package/dist/types/utils/inject-client-css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
+ export declare function createStyleElement(hash: string): HTMLStyleElement | null;
1
2
  export declare function injectClientCSS(hash: string, sheet: string): void;
2
- export declare function injectClientQuery(hash: string, sheet: string): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zss-engine",
3
- "version": "0.2.80",
3
+ "version": "0.2.82",
4
4
  "description": "Zero-runtime StyleSheet Engine",
5
5
  "keywords": [
6
6
  "zero-runtime",