zss-engine 0.2.77 → 0.2.79

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 var helper_js_1 = require("./utils/helper.js");
 Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return helper_js_1.isServer; } });
 Object.defineProperty(exports, "isDevelopment", { enumerable: true, get: function () { return helper_js_1.isDevelopment; } });
@@ -21,6 +21,7 @@ Object.defineProperty(exports, "camelToKebabCase", { enumerable: true, get: func
 Object.defineProperty(exports, "applyCssValue", { enumerable: true, get: function () { return helper_js_2.applyCssValue; } });
 var inject_client_css_js_1 = require("./utils/inject-client-css.js");
 Object.defineProperty(exports, "injectClientCSS", { enumerable: true, get: function () { return inject_client_css_js_1.injectClientCSS; } });
+Object.defineProperty(exports, "injectClientQuery", { enumerable: true, get: function () { return inject_client_css_js_1.injectClientQuery; } });
 var inject_client_global_css_js_1 = require("./utils/inject-client-global-css.js");
 Object.defineProperty(exports, "injectClientGlobalCSS", { enumerable: true, get: function () { return inject_client_global_css_js_1.injectClientGlobalCSS; } });
 var is_hash_in_style_sheets_js_1 = require("./utils/is-hash-in-style-sheets.js");

package/dist/cjs/utils/inject-client-css.js

@@ -1,51 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStyleElement = createStyleElement;
 exports.injectClientCSS = injectClientCSS;
+exports.injectClientQuery = injectClientQuery;
 const index_js_1 = require("../index.js");
-const styleSheets = {};
-const hashCache = {};
-function createStyleElement(hash) {
-    if (document.getElementById(hash))
-        return null;
-    const styleElement = document.createElement('style');
-    styleElement.setAttribute('id', hash);
-    styleElement.setAttribute('type', 'text/css');
-    styleSheets[hash] = styleElement;
-    document.head.appendChild(styleElement);
-    return styleSheets[hash];
+const styleCache = {};
+let clientStyleElement = null;
+let queryStyleElement = null;
+function createClientStyleElement() {
+    if (!clientStyleElement) {
+        clientStyleElement = document.querySelector('style[data-scope="client"]');
+        if (!clientStyleElement) {
+            clientStyleElement = document.createElement('style');
+            clientStyleElement.setAttribute('data-scope', 'client');
+            clientStyleElement.setAttribute('type', 'text/css');
+            document.head.prepend(clientStyleElement);
+        }
+    }
+    return clientStyleElement;
+}
+function createQueryStyleElement() {
+    if (!queryStyleElement) {
+        queryStyleElement = document.querySelector('style[data-scope="query"]');
+        if (!queryStyleElement) {
+            queryStyleElement = document.createElement('style');
+            queryStyleElement.setAttribute('data-scope', 'query');
+            queryStyleElement.setAttribute('type', 'text/css');
+            document.head.appendChild(queryStyleElement);
+        }
+    }
+    return queryStyleElement;
 }
 function injectClientCSS(hash, sheet) {
     if (index_js_1.isServer)
         return;
-    requestAnimationFrame(() => {
-        styleCleanUp();
-    });
-    hashCache[hash] = hash;
-    const styleElement = createStyleElement(hash);
-    if (styleElement == null)
+    if (styleCache[hash])
         return;
-    styleElement.textContent = sheet;
-}
-function styleCleanUp() {
-    requestAnimationFrame(() => {
-        for (const hash in hashCache) {
-            const classElements = document.querySelectorAll(`[class*="${hash}"]`);
-            if (classElements.length === 0) {
-                removeStyleElement(hashCache[hash]);
-            }
-        }
-    });
+    styleCache[hash] = sheet;
+    const clientElement = createClientStyleElement();
+    clientElement.textContent = sheet + (clientElement.textContent || '');
 }
-function removeStyleElement(hash) {
-    if (styleSheets[hash]) {
-        delete styleSheets[hash];
-        if (hashCache.hasOwnProperty.call(hashCache, hash)) {
-            delete hashCache[hash];
-        }
-        const styleElement = document.getElementById(hash);
-        if (styleElement) {
-            document.head.removeChild(styleElement);
-        }
+function injectClientQuery(hash, sheet) {
+    if (index_js_1.isServer)
+        return;
+    if (styleCache[hash])
+        return;
+    styleCache[hash] = sheet;
+    if (sheet.includes('@media') || sheet.includes('@container')) {
+        const queryElement = createQueryStyleElement();
+        queryElement.textContent = (queryElement.textContent || '') + sheet;
     }
 }

package/dist/cjs/utils/is-hash-in-style-sheets.js

@@ -3,9 +3,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isHashInStyleSheets = isHashInStyleSheets;
 function isHashInStyleSheets(hash) {
     const sheets = Array.from(document.styleSheets);
+    function checkRule(rule) {
+        if (rule instanceof CSSStyleRule && rule.selectorText) {
+            return hasHashInSelector(rule.selectorText, hash);
+        }
+        if (rule instanceof CSSMediaRule) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        if (rule instanceof CSSContainerRule) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        if (rule instanceof CSSSupportsRule) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        if ('cssRules' in rule && rule.cssRules) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        return false;
+    }
+    function hasHashInSelector(selectorText, hash) {
+        const selectors = selectorText.split(',').map(s => s.trim());
+        return selectors.some(selector => {
+            const classPattern = new RegExp(`\\.${escapeRegExp(hash)}(?![\\w-])`);
+            return classPattern.test(selector);
+        });
+    }
+    function escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
     return sheets.some(sheet => {
         try {
-            return Array.from(sheet.cssRules).some(rule => rule.selectorText === `.${hash}`);
+            return Array.from(sheet.cssRules).some(checkRule);
         }
         catch (_err) {
             return false;

package/dist/esm/index.js

@@ -5,6 +5,6 @@ export { transpileAtomic } from './utils/transpile-atomic.js';
 export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
 export { build } from './utils/build.js';
 export { camelToKebabCase, applyCssValue } from './utils/helper.js';
-export { injectClientCSS } from './utils/inject-client-css.js';
+export { injectClientCSS, injectClientQuery } from './utils/inject-client-css.js';
 export { injectClientGlobalCSS } from './utils/inject-client-global-css.js';
 export { isHashInStyleSheets } from './utils/is-hash-in-style-sheets.js';

package/dist/esm/utils/inject-client-css.js

@@ -1,47 +1,48 @@
 import { isServer } from '../index.js';
-const styleSheets = {};
-const hashCache = {};
-export function createStyleElement(hash) {
-    if (document.getElementById(hash))
-        return null;
-    const styleElement = document.createElement('style');
-    styleElement.setAttribute('id', hash);
-    styleElement.setAttribute('type', 'text/css');
-    styleSheets[hash] = styleElement;
-    document.head.appendChild(styleElement);
-    return styleSheets[hash];
+const styleCache = {};
+let clientStyleElement = null;
+let queryStyleElement = null;
+function createClientStyleElement() {
+    if (!clientStyleElement) {
+        clientStyleElement = document.querySelector('style[data-scope="client"]');
+        if (!clientStyleElement) {
+            clientStyleElement = document.createElement('style');
+            clientStyleElement.setAttribute('data-scope', 'client');
+            clientStyleElement.setAttribute('type', 'text/css');
+            document.head.prepend(clientStyleElement);
+        }
+    }
+    return clientStyleElement;
+}
+function createQueryStyleElement() {
+    if (!queryStyleElement) {
+        queryStyleElement = document.querySelector('style[data-scope="query"]');
+        if (!queryStyleElement) {
+            queryStyleElement = document.createElement('style');
+            queryStyleElement.setAttribute('data-scope', 'query');
+            queryStyleElement.setAttribute('type', 'text/css');
+            document.head.appendChild(queryStyleElement);
+        }
+    }
+    return queryStyleElement;
 }
 export function injectClientCSS(hash, sheet) {
     if (isServer)
         return;
-    requestAnimationFrame(() => {
-        styleCleanUp();
-    });
-    hashCache[hash] = hash;
-    const styleElement = createStyleElement(hash);
-    if (styleElement == null)
+    if (styleCache[hash])
         return;
-    styleElement.textContent = sheet;
-}
-function styleCleanUp() {
-    requestAnimationFrame(() => {
-        for (const hash in hashCache) {
-            const classElements = document.querySelectorAll(`[class*="${hash}"]`);
-            if (classElements.length === 0) {
-                removeStyleElement(hashCache[hash]);
-            }
-        }
-    });
+    styleCache[hash] = sheet;
+    const clientElement = createClientStyleElement();
+    clientElement.textContent = sheet + (clientElement.textContent || '');
 }
-function removeStyleElement(hash) {
-    if (styleSheets[hash]) {
-        delete styleSheets[hash];
-        if (hashCache.hasOwnProperty.call(hashCache, hash)) {
-            delete hashCache[hash];
-        }
-        const styleElement = document.getElementById(hash);
-        if (styleElement) {
-            document.head.removeChild(styleElement);
-        }
+export function injectClientQuery(hash, sheet) {
+    if (isServer)
+        return;
+    if (styleCache[hash])
+        return;
+    styleCache[hash] = sheet;
+    if (sheet.includes('@media') || sheet.includes('@container')) {
+        const queryElement = createQueryStyleElement();
+        queryElement.textContent = (queryElement.textContent || '') + sheet;
     }
 }

package/dist/esm/utils/is-hash-in-style-sheets.js

@@ -1,8 +1,36 @@
 export function isHashInStyleSheets(hash) {
     const sheets = Array.from(document.styleSheets);
+    function checkRule(rule) {
+        if (rule instanceof CSSStyleRule && rule.selectorText) {
+            return hasHashInSelector(rule.selectorText, hash);
+        }
+        if (rule instanceof CSSMediaRule) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        if (rule instanceof CSSContainerRule) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        if (rule instanceof CSSSupportsRule) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        if ('cssRules' in rule && rule.cssRules) {
+            return Array.from(rule.cssRules).some(checkRule);
+        }
+        return false;
+    }
+    function hasHashInSelector(selectorText, hash) {
+        const selectors = selectorText.split(',').map(s => s.trim());
+        return selectors.some(selector => {
+            const classPattern = new RegExp(`\\.${escapeRegExp(hash)}(?![\\w-])`);
+            return classPattern.test(selector);
+        });
+    }
+    function escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
     return sheets.some(sheet => {
         try {
-            return Array.from(sheet.cssRules).some(rule => rule.selectorText === `.${hash}`);
+            return Array.from(sheet.cssRules).some(checkRule);
         }
         catch (_err) {
             return false;

package/dist/types/index.d.ts

@@ -9,6 +9,6 @@ export { transpileAtomic } from './utils/transpile-atomic.js';
 export { splitAtomicAndNested, processAtomicProps } from './utils/processor-atomic.js';
 export { build } from './utils/build.js';
 export { camelToKebabCase, applyCssValue } from './utils/helper.js';
-export { injectClientCSS } from './utils/inject-client-css.js';
+export { injectClientCSS, injectClientQuery } from './utils/inject-client-css.js';
 export { injectClientGlobalCSS } from './utils/inject-client-global-css.js';
 export { isHashInStyleSheets } from './utils/is-hash-in-style-sheets.js';

package/dist/types/utils/inject-client-css.d.ts

@@ -1,2 +1,2 @@
-export declare function createStyleElement(hash: string): HTMLStyleElement | null;
 export declare function injectClientCSS(hash: string, sheet: string): void;
+export declare function injectClientQuery(hash: string, sheet: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "0.2.77",
+  "version": "0.2.79",
   "description": "Zero-runtime StyleSheet Engine",
   "keywords": [
     "zero-runtime",