@master/css-runtime 2.0.0-rc.54 → 2.0.0-rc.56

package/dist/index.development.mjs

@@ -0,0 +1,440 @@
+import { MasterCSS, config, Rule } from '@master/css';
+import { installHook } from '@master/css-devtools-hook';
+
+const createLogger = (type)=>{
+    return (message, ...args)=>{
+        if (console[type]) {
+            console[type](`%cMaster CSS%c ${message}`, 'color: gray;', 'color: inherit;', ...args);
+        }
+    };
+};
+const loggers = {
+    debug: createLogger('debug'),
+    info: createLogger('info'),
+    warn: createLogger('warn'),
+    error: createLogger('error'),
+    trace: createLogger('trace'),
+    table: console.table,
+    group: console.group,
+    groupCollapsed: console.group,
+    groupEnd: console.groupEnd,
+    time: console.time,
+    timeEnd: console.timeEnd
+};
+const log = createLogger('log');
+Object.assign(log, loggers);
+
+function startDebug() {
+    log('debug mode is enabled by default in development.');
+    const hook = installHook();
+    hook.on('mutated', ({ records, classCounts, cssRuntime })=>{
+        const actualClassCounts = {};
+        let errored = false;
+        const resolveClass = (className)=>{
+            if (Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
+                actualClassCounts[className]++;
+            } else {
+                actualClassCounts[className] = 1;
+            }
+        };
+        (cssRuntime.root.constructor.name === 'HTMLDocument' ? cssRuntime.host : cssRuntime.container).querySelectorAll('[class]').forEach((element)=>{
+            element.classList.forEach(resolveClass);
+        });
+        cssRuntime.host.classList.forEach(resolveClass);
+        for(const className in actualClassCounts){
+            const eachCount = cssRuntime.classCounts.get(className);
+            const eachActualCount = actualClassCounts[className];
+            if (eachCount !== eachActualCount) {
+                log.error(`Count mismatch for`, {
+                    class: className,
+                    expected: eachActualCount,
+                    received: eachCount
+                });
+                errored = true;
+            }
+        }
+        cssRuntime.classCounts.forEach((eachCount, className)=>{
+            if (!Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
+                log.error(`Count mismatch for`, {
+                    class: className,
+                    expected: 0,
+                    received: eachCount
+                });
+                errored = true;
+            }
+        });
+        if (errored) {
+            console.debug('Records:', records);
+            console.debug('Counts:', classCounts);
+        }
+    });
+}
+
+function registerGlobal(CSSRuntime) {
+    if (!globalThis.CSSRuntime) globalThis.CSSRuntime = CSSRuntime;
+    installHook();
+    {
+        startDebug();
+    }
+}
+
+class CSSRuntime extends MasterCSS {
+    root;
+    customConfig;
+    static instances = new WeakMap();
+    host;
+    observing;
+    progressive;
+    container;
+    observer;
+    constructor(root = document, customConfig = config){
+        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false;
+        const rootConstructorName = root?.constructor.name;
+        if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
+            this.root.defaultView.globalThis.cssRuntime = this;
+            this.container = this.root.head;
+            this.host = this.root.documentElement;
+        } else {
+            this.container = this.root;
+            this.host = this.root.host;
+        }
+        this.supportVendors = new Set();
+        const styleDeclaration = document.documentElement.style;
+        if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
+        if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
+        if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
+        if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
+        globalThis.CSSRuntime.instances.set(this.root, this);
+    }
+    /**
+     * Observe the DOM for changes and update the running stylesheet. (browser only)
+     * @param options mutation observer options
+     * @returns this
+     */ observe() {
+        if (this.observing) return this;
+        if (this.root.styleSheets) for (const sheet of this.root.styleSheets){
+            const { ownerNode } = sheet;
+            if (ownerNode && ownerNode.id === 'master') {
+                this.style = ownerNode;
+                // @ts-ignore
+                this.progressive = true;
+                break;
+            }
+        }
+        if (this.progressive) {
+            this.hydrate(this.style.sheet.cssRules);
+        } else {
+            this.style = document.createElement('style');
+            this.style.id = 'master';
+            this.container.append(this.style);
+            this.style.sheet.insertRule(this.layerStatementRule.text);
+            this.layerStatementRule.nodes[0].native = this.style.sheet.cssRules.item(0);
+        }
+        const firstConnectedElementsClasses = new Map();
+        const addClasses = (element)=>{
+            element.classList.forEach((className)=>{
+                if (this.classCounts.has(className)) {
+                    this.classCounts.set(className, this.classCounts.get(className) + 1);
+                } else {
+                    this.classCounts.set(className, 1);
+                    this.add(className);
+                }
+                const classes = firstConnectedElementsClasses.get(element);
+                if (classes) {
+                    classes.push(className);
+                } else {
+                    firstConnectedElementsClasses.set(element, [
+                        className
+                    ]);
+                }
+            });
+        };
+        addClasses(this.host);
+        /**
+         * 待所有 DOM 結構完成解析後，開始繪製 Rule 樣式
+         */ (this.root.constructor.name === 'HTMLDocument' ? this.host : this.container).querySelectorAll('[class]').forEach((element)=>{
+            addClasses(element);
+        });
+        // @ts-expect-error readonly
+        this.observer = new MutationObserver((mutationRecords)=>{
+            // console.clear()
+            // const test = ''
+            // if (test) {
+            //     console.log('')
+            //     console.log(`${test}: ${this.classCounts.get(test)}`)
+            // }
+            const eachClassCounts = new Map();
+            const targetFirstAttrMutationRecord = new Map();
+            const updateClassCount = (classes, isAdding = false)=>{
+                const usage = isAdding ? 1 : -1;
+                classes.forEach((className)=>{
+                    eachClassCounts.set(className, (eachClassCounts.get(className) || 0) + usage);
+                });
+            };
+            const connectedStatusMap = new Map();
+            const disconnectedStatusMap = new Map();
+            const recordStatus = (target, mutationRecord, map, adding)=>{
+                const status = map.get(target);
+                if (status) {
+                    status.change += adding ? 1 : -1;
+                    status.mutationRecord = mutationRecord;
+                } else {
+                    map.set(target, {
+                        change: adding ? 1 : -1,
+                        mutationRecord
+                    });
+                }
+            };
+            mutationRecords.forEach((mutationRecord)=>{
+                const target = mutationRecord.target;
+                switch(mutationRecord.type){
+                    case 'attributes':
+                        if (!targetFirstAttrMutationRecord.has(target)) {
+                            targetFirstAttrMutationRecord.set(target, mutationRecord);
+                        }
+                        break;
+                    case 'childList':
+                        const targetStatusMap = target.isConnected ? connectedStatusMap : disconnectedStatusMap;
+                        mutationRecord.addedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, true));
+                        mutationRecord.removedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, false));
+                        break;
+                }
+            });
+            const updatedTargetChangeMap = new Map();
+            const updateTarget = (target, adding)=>{
+                const change = updatedTargetChangeMap.get(target) || 0;
+                const newChange = change + (adding ? 1 : -1);
+                if (newChange >= -1 && newChange <= 1) {
+                    updatedTargetChangeMap.set(target, newChange);
+                    const firstAttrMutationRecord = targetFirstAttrMutationRecord.get(target);
+                    if (firstAttrMutationRecord) {
+                        targetFirstAttrMutationRecord.delete(target);
+                    }
+                    if (adding) {
+                        updateClassCount(target.classList, adding);
+                    } else {
+                        if (firstAttrMutationRecord) {
+                            updateClassCount(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
+                        } else {
+                            updateClassCount(target.classList, adding);
+                        }
+                        disconnectedStatusMap.forEach((disconnectedTargetStatus, disconnectedTarget)=>{
+                            if (disconnectedTargetStatus.mutationRecord.target === target && disconnectedTargetStatus.change !== 0) {
+                                updateTarget(disconnectedTarget, disconnectedTargetStatus.change > 0);
+                            }
+                        });
+                    }
+                    for (const child of target.children){
+                        updateTarget(child, adding);
+                    }
+                }
+            };
+            connectedStatusMap.forEach(({ change }, target)=>change !== 0 && updateTarget(target, change > 0));
+            targetFirstAttrMutationRecord.forEach((mutation, target)=>{
+                if (!target.isConnected) return;
+                const oldClassList = mutation.oldValue ? mutation.oldValue.split(/\s+/) : [];
+                const newClassList = target.classList;
+                const addedClasses = [];
+                newClassList.forEach((c)=>{
+                    if (!oldClassList.includes(c)) addedClasses.push(c);
+                });
+                const removedClasses = oldClassList.filter((c)=>!newClassList.contains(c));
+                if (addedClasses.length) {
+                    // console.log('[attribute]', '[add]   ', addedClasses, target)
+                    updateClassCount(addedClasses, true);
+                }
+                if (removedClasses.length) {
+                    // console.log('[attribute]', '[remove]', removedClasses, target)
+                    updateClassCount(removedClasses, false);
+                }
+            });
+            /**
+             * Merge the class usage changes into the current class usage map.
+             */ eachClassCounts.forEach((countChange, className)=>{
+                let currentCount = this.classCounts.get(className) || 0;
+                let newCount = currentCount + countChange;
+                if (newCount > 0) {
+                    this.classCounts.set(className, newCount);
+                    if (currentCount === 0) {
+                        this.add(className);
+                    }
+                } else {
+                    this.classCounts.delete(className);
+                    this.remove(className);
+                }
+            });
+            globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('mutated', {
+                records: mutationRecords,
+                classCounts: eachClassCounts,
+                cssRuntime: this
+            });
+        });
+        this.observer.observe(this.root, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: [
+                'class'
+            ],
+            childList: true,
+            subtree: true
+        });
+        if (!this.progressive) {
+            this.host.removeAttribute('hidden');
+        }
+        // @ts-ignore
+        this.observing = true;
+        return this;
+    }
+    hydrate(nativeLayerRules) {
+        const cssLayerRules = [];
+        const checkSheet = new CSSStyleSheet();
+        for(let i = 0; i < nativeLayerRules.length; i++){
+            const eachNativeCSSRule = nativeLayerRules[i];
+            if (eachNativeCSSRule.constructor.name === 'CSSLayerBlockRule') {
+                const eachCSSLayerRule = eachNativeCSSRule;
+                if (eachNativeCSSRule.name === 'theme') {
+                    this.themeLayer.native = eachCSSLayerRule;
+                    let variableRule;
+                    let lastVariableName;
+                    for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
+                        const cssRule = eachCSSLayerRule.cssRules[j];
+                        const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
+                        const variableName = variableCSSRule.style[0].slice(2);
+                        if (variableName !== lastVariableName) {
+                            lastVariableName = variableName;
+                            variableRule = new Rule(variableName);
+                            this.themeLayer.rules.push(variableRule);
+                            this.themeLayer.usages[variableRule.name] = 0;
+                        }
+                        variableRule?.nodes.push({
+                            native: cssRule,
+                            text: cssRule.cssText
+                        });
+                    }
+                    if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
+                } else {
+                    cssLayerRules.push(eachCSSLayerRule);
+                }
+            } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
+                this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
+            } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
+                const keyframsRule = eachNativeCSSRule;
+                const animationRule = new Rule(keyframsRule.name, [
+                    {
+                        native: keyframsRule,
+                        text: keyframsRule.cssText
+                    }
+                ]);
+                this.animationsNonLayer.rules.push(animationRule);
+                this.rules.push(animationRule);
+                this.animationsNonLayer.usages[animationRule.name] = 0;
+            }
+        }
+        for (const eachCSSLayerRule of cssLayerRules){
+            const nativeLayerRules = Array.from(eachCSSLayerRule.cssRules);
+            let layer;
+            switch(eachCSSLayerRule.name){
+                case 'base':
+                    layer = this.baseLayer;
+                    break;
+                case 'preset':
+                    layer = this.presetLayer;
+                    break;
+                case 'components':
+                    layer = this.componentsLayer;
+                    break;
+                default:
+                    layer = this.generalLayer;
+                    break;
+            }
+            layer.native = eachCSSLayerRule;
+            for (const eachNativeRule of nativeLayerRules){
+                const selectorText = this.getSelectorText(eachNativeRule);
+                if (!selectorText) {
+                    console.error(`Cannot get the selector text from \`${eachNativeRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                    continue;
+                }
+                const createdRules = this.createFromSelectorText(selectorText);
+                if (createdRules) {
+                    for (const createdRule of createdRules){
+                        layer.rules.push(createdRule);
+                        layer.insertVariables(createdRule);
+                        layer.insertAnimations(createdRule);
+                        createdRule.nodes.forEach((node)=>{
+                            const createdNodeNativeRule = checkSheet.cssRules.item(checkSheet.insertRule(node.text));
+                            if (createdNodeNativeRule) {
+                                for (const eachFindingNativeRule of nativeLayerRules){
+                                    if (createdNodeNativeRule.cssText === eachFindingNativeRule.cssText) {
+                                        node.native = eachFindingNativeRule;
+                                        nativeLayerRules.splice(nativeLayerRules.indexOf(eachFindingNativeRule), 1);
+                                        return;
+                                    }
+                                }
+                            }
+                            console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                        });
+                    }
+                } else {
+                    console.error(`Cannot recognize \`${eachNativeRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                }
+            }
+            if (layer.rules.length) this.rules.push(layer);
+        }
+    }
+    getSelectorText(cssRule) {
+        if ('selectorText' in cssRule) {
+            return cssRule.selectorText;
+        } else if ('cssRules' in cssRule) {
+            return this.getSelectorText(cssRule.cssRules.item(0));
+        }
+    }
+    disconnect() {
+        if (!this.observing) return;
+        if (this.observer) {
+            this.observer.disconnect();
+            // @ts-expect-error readonly
+            this.observer = undefined;
+        }
+        // @ts-ignore
+        this.observing = false;
+        this.reset();
+        this.classCounts.clear();
+        if (!this.progressive) {
+            this.style?.remove();
+            this.style = null;
+        }
+        return this;
+    }
+    refresh(customConfig = this.customConfig) {
+        if (!this.observing || !this.style.sheet) return this;
+        for(let i = 1; i <= this.style.sheet.cssRules.length - 1; i++){
+            this.style.sheet.deleteRule(i);
+        }
+        super.refresh(customConfig);
+        return this;
+    }
+    destroy() {
+        this.disconnect();
+        globalThis.CSSRuntime.instances.delete(this.root);
+        return this;
+    }
+}
+(function(CSSRuntime) {
+    registerGlobal(CSSRuntime);
+})(CSSRuntime);
+
+/**
+ * Initialize a new CSSRuntime instance and observe the target root
+ * @param config master css config
+ * @param root target root to observe
+ * @param autoObserve auto observe the target root
+ * @returns master css instance
+ */ function initCSSRuntime(config, root = document, autoObserve = true) {
+    let cssRuntime = globalThis.CSSRuntime.instances.get(root);
+    if (cssRuntime) return cssRuntime;
+    cssRuntime = new CSSRuntime(document, config);
+    if (autoObserve) cssRuntime.observe();
+    return cssRuntime;
+}
+
+export { CSSRuntime, initCSSRuntime };

package/dist/index.mjs

@@ -1,43 +1,38 @@
 import { MasterCSS, config, Rule } from '@master/css';
+import { installHook } from '@master/css-devtools-hook';
 
-class RuntimeCSS extends MasterCSS {
+function registerGlobal(CSSRuntime) {
+    if (!globalThis.CSSRuntime) globalThis.CSSRuntime = CSSRuntime;
+    installHook();
+}
+
+class CSSRuntime extends MasterCSS {
     root;
     customConfig;
-    // @ts-expect-error
+    static instances = new WeakMap();
     host;
     observing;
     progressive;
-    // @ts-expect-error
     container;
     observer;
     constructor(root = document, customConfig = config){
         super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false;
-        this.init();
-        this.supportVendors = new Set();
-        const styleDeclaration = document.documentElement.style;
-        if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
-        if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
-        if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
-        if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
-    }
-    init() {
-        const existingRuntimeCSS = globalThis.runtimeCSSs.find((eachCSS)=>eachCSS.root === this.root);
-        if (existingRuntimeCSS) throw new Error('Cannot create multiple RuntimeCSS instances for the same root element.');
-        const rootConstructorName = this.root?.constructor.name;
+        const rootConstructorName = root?.constructor.name;
         if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
-            // @ts-ignore
-            this.root.defaultView.globalThis.runtimeCSS = this;
-            // @ts-ignore readonly
+            this.root.defaultView.globalThis.cssRuntime = this;
             this.container = this.root.head;
-            // @ts-ignore readonly
             this.host = this.root.documentElement;
         } else {
-            // @ts-ignore readonly
             this.container = this.root;
-            // @ts-ignore readonly
             this.host = this.root.host;
         }
-        runtimeCSSs.push(this);
+        this.supportVendors = new Set();
+        const styleDeclaration = document.documentElement.style;
+        if ('webkitTransform' in styleDeclaration) this.supportVendors.add('webkit');
+        if ('MozTransform' in styleDeclaration) this.supportVendors.add('moz');
+        if ('msTransform' in styleDeclaration) this.supportVendors.add('ms');
+        if ('OTransform' in styleDeclaration) this.supportVendors.add('o');
+        globalThis.CSSRuntime.instances.set(this.root, this);
     }
     /**
      * Observe the DOM for changes and update the running stylesheet. (browser only)
@@ -66,10 +61,10 @@ class RuntimeCSS extends MasterCSS {
         const firstConnectedElementsClasses = new Map();
         const addClasses = (element)=>{
             element.classList.forEach((className)=>{
-                if (this.classUsages.has(className)) {
-                    this.classUsages.set(className, this.classUsages.get(className) + 1);
+                if (this.classCounts.has(className)) {
+                    this.classCounts.set(className, this.classCounts.get(className) + 1);
                 } else {
-                    this.classUsages.set(className, 1);
+                    this.classCounts.set(className, 1);
                     this.add(className);
                 }
                 const classes = firstConnectedElementsClasses.get(element);
@@ -94,14 +89,14 @@ class RuntimeCSS extends MasterCSS {
             // const test = ''
             // if (test) {
             //     console.log('')
-            //     console.log(`${test}: ${this.classUsages.get(test)}`)
+            //     console.log(`${test}: ${this.classCounts.get(test)}`)
             // }
-            const eachClassUsages = new Map();
+            const eachClassCounts = new Map();
             const targetFirstAttrMutationRecord = new Map();
-            const updateClassUsage = (classes, isAdding = false)=>{
+            const updateClassCount = (classes, isAdding = false)=>{
                 const usage = isAdding ? 1 : -1;
                 classes.forEach((className)=>{
-                    eachClassUsages.set(className, (eachClassUsages.get(className) || 0) + usage);
+                    eachClassCounts.set(className, (eachClassCounts.get(className) || 0) + usage);
                 });
             };
             const connectedStatusMap = new Map();
@@ -144,12 +139,12 @@ class RuntimeCSS extends MasterCSS {
                         targetFirstAttrMutationRecord.delete(target);
                     }
                     if (adding) {
-                        updateClassUsage(target.classList, adding);
+                        updateClassCount(target.classList, adding);
                     } else {
                         if (firstAttrMutationRecord) {
-                            updateClassUsage(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
+                            updateClassCount(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
                         } else {
-                            updateClassUsage(target.classList, adding);
+                            updateClassCount(target.classList, adding);
                         }
                         disconnectedStatusMap.forEach((disconnectedTargetStatus, disconnectedTarget)=>{
                             if (disconnectedTargetStatus.mutationRecord.target === target && disconnectedTargetStatus.change !== 0) {
@@ -174,59 +169,33 @@ class RuntimeCSS extends MasterCSS {
                 const removedClasses = oldClassList.filter((c)=>!newClassList.contains(c));
                 if (addedClasses.length) {
                     // console.log('[attribute]', '[add]   ', addedClasses, target)
-                    updateClassUsage(addedClasses, true);
+                    updateClassCount(addedClasses, true);
                 }
                 if (removedClasses.length) {
                     // console.log('[attribute]', '[remove]', removedClasses, target)
-                    updateClassUsage(removedClasses, false);
+                    updateClassCount(removedClasses, false);
                 }
             });
             /**
              * Merge the class usage changes into the current class usage map.
-             */ eachClassUsages.forEach((countChange, className)=>{
-                let currentCount = this.classUsages.get(className) || 0;
+             */ eachClassCounts.forEach((countChange, className)=>{
+                let currentCount = this.classCounts.get(className) || 0;
                 let newCount = currentCount + countChange;
                 if (newCount > 0) {
-                    this.classUsages.set(className, newCount);
+                    this.classCounts.set(className, newCount);
                     if (currentCount === 0) {
                         this.add(className);
                     }
                 } else {
-                    this.classUsages.delete(className);
+                    this.classCounts.delete(className);
                     this.remove(className);
                 }
             });
-        // start: debug
-        // const safeClassUsages: any = {};
-        // ((this.root.constructor.name === 'HTMLDocument') ? this.host : this.container)
-        //     .querySelectorAll('[class]')
-        //     .forEach((element) => {
-        //         element.classList.forEach((className) => {
-        //             if (Object.prototype.hasOwnProperty.call(safeClassUsages, className)) {
-        //                 safeClassUsages[className]++
-        //             } else {
-        //                 safeClassUsages[className] = 1
-        //             }
-        //         })
-        //     })
-        // this.host.classList.forEach((className) => {
-        //     if (Object.prototype.hasOwnProperty.call(safeClassUsages, className)) {
-        //         safeClassUsages[className]++
-        //     } else {
-        //         safeClassUsages[className] = 1
-        //     }
-        // })
-        // for (const className in safeClassUsages) {
-        //     if (this.classUsages.get(className) !== safeClassUsages[className]) {
-        //         throw new Error(`[css] ${className} ${this.classUsages.get(className)} (correct: ${safeClassUsages[className]})`)
-        //     }
-        // }
-        // this.classUsages.forEach((count, className) => {
-        //     if (!Object.prototype.hasOwnProperty.call(safeClassUsages, className)) {
-        //         throw new Error(`[css] ${className} ${count} (correct: 0)`)
-        //     }
-        // })
-        // end: debug
+            globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('mutated', {
+                records: mutationRecords,
+                classCounts: eachClassCounts,
+                cssRuntime: this
+            });
         });
         this.observer.observe(this.root, {
             attributes: true,
@@ -238,7 +207,7 @@ class RuntimeCSS extends MasterCSS {
             subtree: true
         });
         if (!this.progressive) {
-            this.host.style.removeProperty('display');
+            this.host.removeAttribute('hidden');
         }
         // @ts-ignore
         this.observing = true;
@@ -357,7 +326,7 @@ class RuntimeCSS extends MasterCSS {
         // @ts-ignore
         this.observing = false;
         this.reset();
-        this.classUsages.clear();
+        this.classCounts.clear();
         if (!this.progressive) {
             this.style?.remove();
             this.style = null;
@@ -374,23 +343,26 @@ class RuntimeCSS extends MasterCSS {
     }
     destroy() {
         this.disconnect();
-        runtimeCSSs.splice(runtimeCSSs.indexOf(this), 1);
+        globalThis.CSSRuntime.instances.delete(this.root);
         return this;
     }
 }
-const runtimeCSSs = [];
-(()=>{
-    globalThis.RuntimeCSS = RuntimeCSS;
-    globalThis.runtimeCSSs = runtimeCSSs;
-})();
+(function(CSSRuntime) {
+    registerGlobal(CSSRuntime);
+})(CSSRuntime);
 
 /**
- * Initialize a new RuntimeCSS instance and observe the target root
+ * Initialize a new CSSRuntime instance and observe the target root
  * @param config master css config
- * @param targetRoot target root to observe
+ * @param root target root to observe
+ * @param autoObserve auto observe the target root
  * @returns master css instance
- */ function initCSSRuntime(config) {
-    return new RuntimeCSS(document, config).observe();
+ */ function initCSSRuntime(config, root = document, autoObserve = true) {
+    let cssRuntime = globalThis.CSSRuntime.instances.get(root);
+    if (cssRuntime) return cssRuntime;
+    cssRuntime = new CSSRuntime(document, config);
+    if (autoObserve) cssRuntime.observe();
+    return cssRuntime;
 }
 
-export { RuntimeCSS, RuntimeCSS as default, initCSSRuntime };
+export { CSSRuntime, CSSRuntime as default, initCSSRuntime };