@master/css-runtime 2.0.0-rc.69 → 2.0.0-rc.70

package/dist/layer.d.ts

@@ -1,14 +1,15 @@
-import { Layer, Rule, VariableRule } from '@master/css';
+import { Layer, Rule, VariableRule } from '@master/css-engine';
 import CSSRuntime from './core';
 export default class RuntimeLayer extends Layer {
     name: string;
     cssRuntime: CSSRuntime;
-    readonly rules: Rule[];
+    readonly rules: (Rule | VariableRule)[];
     readonly tokenCounts: Map<string, number>;
     native: CSSLayerBlockRule | null;
     constructor(name: string, cssRuntime: CSSRuntime);
     attach(): void;
     insert(rule: Rule | VariableRule, index?: number): number | undefined;
+    getNativeInsertIndex(index: number): number;
     detach(): void;
     delete(key: string): Rule | VariableRule | undefined;
     reset(): void;

package/dist/native-declaration.d.ts

@@ -0,0 +1,2 @@
+import type { NativeCSSDeclarationMatcher } from '@master/css-engine';
+export declare const browserNativeDeclarationMatcher: NativeCSSDeclarationMatcher;

package/dist/register-global.d.ts

@@ -1,9 +1,6 @@
-import type { Config } from '@master/css';
 import type Core from './core';
 declare global {
-    var CSSRuntime: typeof Core;
-    var cssRuntime: Core;
-    var masterCSSConfig: Config;
-    var masterCSSConfigs: Config[];
+    var MasterCSSRuntime: typeof Core;
+    var masterCSSRuntime: Core;
 }
 export default function registerGlobal(CSSRuntime: typeof Core): void;

package/dist/theme-layer.d.ts

@@ -0,0 +1,27 @@
+import { ThemeLayer, VariableRule } from '@master/css-engine';
+import CSSRuntime from './core';
+interface NativeBucket {
+    key: string;
+    mediaText: string;
+    selectorText: string;
+    nativeRule: CSSRule;
+    styleRule: CSSStyleRule;
+}
+export default class RuntimeThemeLayer extends ThemeLayer {
+    name: string;
+    cssRuntime: CSSRuntime;
+    native: CSSLayerBlockRule | null;
+    private nativeBuckets;
+    constructor(name: string, cssRuntime: CSSRuntime);
+    attach(): void;
+    getBucketKey(mediaText: string, selectorText: string): string;
+    getStyleRule(nativeRule: CSSRule): CSSStyleRule | undefined;
+    syncNativeBuckets(): void;
+    ensureNativeBucket(mediaText: string, selectorText: string): NativeBucket | undefined;
+    getNativeBucketInsertIndex(mediaText: string, selectorText: string): number;
+    insert(rule: VariableRule, index?: number): number | undefined;
+    delete(key: string): VariableRule | undefined;
+    detach(): void;
+    reset(): void;
+}
+export {};

package/dist/types/hydrate-result.d.ts

@@ -1,4 +1,5 @@
-import type { SyntaxRule } from '@master/css';
+import type { GeneratedRule } from '@master/css-engine';
+import type HydratedGeneratedRule from '../generated-rule';
 export interface HydrateResult {
-    allSyntaxRules: SyntaxRule[];
+    allUtilities: (GeneratedRule | HydratedGeneratedRule)[];
 }

package/dist/utility-layer.d.ts

@@ -0,0 +1,13 @@
+import { Rule, type GeneratedRule } from '@master/css-engine';
+import RuntimeLayer from './layer';
+import type HydratedGeneratedRule from './generated-rule';
+type RuntimeGeneratedRule = GeneratedRule | HydratedGeneratedRule;
+export default class RuntimeUtilityLayer extends RuntimeLayer {
+    rules: (RuntimeGeneratedRule | Rule)[];
+    insert(utility: RuntimeGeneratedRule | Rule): number | undefined;
+    delete(key: string): Rule | RuntimeGeneratedRule | undefined;
+    insertVariables(utility: RuntimeGeneratedRule | Rule): void;
+    insertAnimations(utility: RuntimeGeneratedRule | Rule): void;
+}
+export declare type RuntimeUtilityLayerInstance = RuntimeUtilityLayer;
+export {};

package/dist/utils/find-native-css-rule-index.d.ts

@@ -0,0 +1 @@
+export default function findNativeCSSRuleIndex(cssRules: CSSRuleList, nativeRule: CSSRule): number;

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --exec playwright test","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"Run Master CSS right in the browser","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/runtime"},"keywords":["utility","css","lightweight","mastercss","master","runtime","cdn"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","browser":"./dist/global.min.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":{"development":"./dist/index.development.cjs","default":"./dist/index.cjs"},"import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"}}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.69","@master/css-devtools-hook":"^2.0.0-rc.69"},"devDependencies":{"@playwright/test":"^1.49.1","shared":"^2.0.0-rc.69"},"version":"2.0.0-rc.69"}
+{"name":"@master/css-runtime","type":"module","scripts":{"build":"techor build && node scripts/copy-default-manifest-json.mjs","bench":"node scripts/benchmark-runtime.mjs","dev":"pnpm build --watch","e2e":"playwright test","e2e:watch":"nodemon -e js,mjs,ts,html,css --watch dist --watch e2e --watch tests --exec playwright test","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"Run Master CSS right in the browser","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/runtime"},"keywords":["utility","css","lightweight","mastercss","master","runtime","cdn"],"sideEffects":false,"main":"./dist/index.mjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","browser":"./dist/global.min.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":{"development":"./dist/index.development.mjs","default":"./dist/index.mjs"},"default":"./dist/index.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css-engine":"^2.0.0-rc.70","@master/css-preset":"^2.0.0-rc.70","@master/css-devtools-hook":"^2.0.0-rc.70","@master/css-schema":"^2.0.0-rc.70"},"devDependencies":{"@master/css":"^2.0.0-rc.70","@master/css-compiler":"^2.0.0-rc.70","@master/css-integration":"^2.0.0-rc.70","@playwright/test":"1.61.0"},"version":"2.0.0-rc.70"}

package/dist/index.cjs

@@ -1,481 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var css = require('@master/css');
-var cssDevtoolsHook = require('@master/css-devtools-hook');
-
-function registerGlobal(CSSRuntime) {
-    if (!globalThis.CSSRuntime) globalThis.CSSRuntime = CSSRuntime;
-    cssDevtoolsHook.installHook();
-}
-
-function findNativeCSSRuleIndex(cssRules, nativeRule) {
-    for(let i = 0; i < cssRules.length; i++){
-        if (cssRules[i] === nativeRule) {
-            return i;
-        }
-    }
-    return -1;
-}
-
-class RuntimeLayer extends css.Layer {
-    name;
-    cssRuntime;
-    rules = [];
-    tokenCounts = new Map();
-    native = null;
-    constructor(name, cssRuntime){
-        super(name, cssRuntime), this.name = name, this.cssRuntime = cssRuntime;
-    }
-    attach() {
-        super.attach();
-        const nativeSheet = this.cssRuntime.style?.sheet;
-        if (nativeSheet && !this.native?.parentStyleSheet) {
-            const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
-            this.native = nativeSheet.cssRules.item(insertedIndex);
-        }
-    }
-    insert(rule, index = this.rules.length) {
-        const insertedIndex = super.insert(rule, index);
-        if (insertedIndex === undefined || !this.native) return;
-        const insertRuleSafely = (text, position)=>{
-            // Checks if the rule is inserted in a native CSS rule with this.attach()
-            if (this.rules.length === 1) {
-                return this.native.cssRules.item(position);
-            } else {
-                try {
-                    const insertedIndex = this.native.insertRule(text, position);
-                    return this.native.cssRules.item(insertedIndex);
-                } catch (error) {
-                    console.error(error, rule);
-                    /**
-                     * If the rule is invalid, remove it from the rules array.
-                     * It's important to note that the rule may break the entire CSS runtime,
-                     */ this.rules.splice(insertedIndex, 1);
-                    return;
-                }
-            }
-        };
-        if ('nodes' in rule) {
-            let currentIndex = insertedIndex;
-            rule.nodes.forEach((node)=>{
-                node.native = insertRuleSafely(node.text, currentIndex);
-                if (node.native) currentIndex++;
-            });
-        } else {
-            rule.native = insertRuleSafely(rule.text, insertedIndex);
-        }
-        return insertedIndex;
-    }
-    detach() {
-        super.detach();
-        const nativeSheet = this.cssRuntime.style?.sheet;
-        if (nativeSheet && this.native?.parentStyleSheet) {
-            const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
-            if (foundIndex !== -1) {
-                nativeSheet.deleteRule(foundIndex);
-            }
-        }
-    }
-    delete(key) {
-        const deletedRule = super.delete(key);
-        if (!deletedRule || !this.native) return;
-        const deleteRuleSafely = (rule)=>{
-            if (!rule) return;
-            const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, rule);
-            if (foundIndex !== -1) {
-                try {
-                    this.native.deleteRule(foundIndex);
-                } catch (error) {
-                    console.error(error, rule);
-                }
-            }
-        };
-        if ('nodes' in deletedRule) {
-            deletedRule.nodes.forEach((node)=>deleteRuleSafely(node.native));
-        } else {
-            deleteRuleSafely(deletedRule.native);
-        }
-        return deletedRule;
-    }
-    reset() {
-        super.reset();
-        const nativeSheet = this.cssRuntime.style?.sheet;
-        if (this.native && nativeSheet) {
-            const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
-            if (foundIndex !== -1) {
-                nativeSheet.deleteRule(foundIndex);
-            }
-            this.native = null;
-        }
-    }
-}
-
-const RuntimeSyntaxLayer = css.withSyntaxLayer(RuntimeLayer);
-
-class CSSRuntime extends css.MasterCSS {
-    root;
-    customConfig;
-    baseConfig;
-    static instances = new WeakMap();
-    host;
-    container;
-    baseLayer = new RuntimeSyntaxLayer('base', this);
-    themeLayer = new RuntimeLayer('theme', this);
-    presetLayer = new RuntimeSyntaxLayer('preset', this);
-    componentsLayer = new RuntimeSyntaxLayer('components', this);
-    generalLayer = new RuntimeSyntaxLayer('general', this);
-    classCounts = new Map();
-    observer;
-    progressive = false;
-    observing = false;
-    constructor(root = document, customConfig = css.config, baseConfig){
-        super(customConfig, baseConfig), this.root = root, this.customConfig = customConfig, this.baseConfig = baseConfig;
-        // Do not use instanceof here, because it will not work
-        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;
-        }
-        globalThis.CSSRuntime.instances.set(this.root, this);
-        __MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:created', {
-            cssRuntime: 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;
-        // Detect prerendered stylesheet
-        if (this.root.styleSheets) {
-            for (const sheet of this.root.styleSheets){
-                const { ownerNode } = sheet;
-                if (ownerNode instanceof HTMLStyleElement && ownerNode.id === 'master') {
-                    this.style = ownerNode;
-                    if (this.style.sheet?.cssRules.length) {
-                        this.progressive = true;
-                    }
-                    break;
-                }
-            }
-        }
-        // Prepare snapshot map
-        const elementClasses = new WeakMap();
-        // Initial scan and populate counts + snapshot
-        const connectedNames = new Set();
-        const increaseClassCount = (className)=>{
-            const count = this.classCounts.get(className) || 0;
-            if (!count) connectedNames.add(className);
-            this.classCounts.set(className, count + 1);
-        };
-        const elementsWithClass = this.root.querySelectorAll('[class]');
-        elementsWithClass.forEach((el)=>{
-            const clsList = el.classList;
-            if (clsList) {
-                el.classList.forEach(increaseClassCount);
-            }
-            elementClasses.set(el, new Set(clsList));
-        });
-        // Hydration or style creation
-        if (this.progressive) {
-            const hydrateResult = this.hydrate(this.style.sheet.cssRules);
-            for (const cls of connectedNames){
-                if (!hydrateResult.allSyntaxRules.find((r)=>(r.fixedClass || r.name) === cls)) {
-                    this.add(cls);
-                }
-            }
-        } else {
-            this.style = document.createElement('style');
-            this.style.id = 'master';
-            this.style.setAttribute('blocking', 'render');
-            this.container.append(this.style);
-            this.style.sheet.insertRule(this.layerStatementRule.text);
-            this.layerStatementRule.native = this.style.sheet.cssRules.item(0);
-            connectedNames.forEach((cls)=>this.add(cls));
-        }
-        this.observer = new MutationObserver((records)=>{
-            const deltaCounts = new Map();
-            const nodeMap = new Map();
-            const attrRecords = new Set();
-            const visited = new WeakSet();
-            const updateDelta = (cls, delta)=>deltaCounts.set(cls, (deltaCounts.get(cls) || 0) + delta);
-            const diffAndSnapshot = (el)=>{
-                const prev = new Set(elementClasses.get(el) || []);
-                const next = new Set(el.classList);
-                for (const c of next)if (!prev.has(c)) updateDelta(c, 1);
-                for (const c of prev)if (!next.has(c)) updateDelta(c, -1);
-                elementClasses.set(el, next);
-            };
-            const removeSnapshot = (el)=>{
-                for (const c of elementClasses.get(el) || [])updateDelta(c, -1);
-                elementClasses.delete(el);
-            };
-            for (const record of records){
-                if (record.type === 'childList') {
-                    for (const node of record.addedNodes)if (node instanceof Element && node.isConnected) nodeMap.set(node, (nodeMap.get(node) || 0) + 1);
-                    for (const node of record.removedNodes)if (node instanceof Element && !node.isConnected) nodeMap.set(node, (nodeMap.get(node) || 0) - 1);
-                } else if (record.type === 'attributes' && record.attributeName === 'class') {
-                    attrRecords.add(record.target);
-                }
-            }
-            const traverseIncludingSelf = (el, fn, visited)=>{
-                if (!visited.has(el)) {
-                    visited.add(el);
-                    fn(el);
-                    for (const child of el.children){
-                        traverseIncludingSelf(child, fn, visited);
-                    }
-                } else {
-                    nodeMap.delete(el);
-                }
-            };
-            for (const [node, count] of nodeMap){
-                if (count > 0) {
-                    traverseIncludingSelf(node, diffAndSnapshot, visited);
-                } else if (count < 0 && !node.isConnected) {
-                    traverseIncludingSelf(node, removeSnapshot, visited);
-                }
-            }
-            for (const el of attrRecords){
-                if (!visited.has(el)) diffAndSnapshot(el);
-            }
-            for (const [cls, change] of deltaCounts){
-                const current = this.classCounts.get(cls) || 0;
-                const next = current + change;
-                if (next > 0) {
-                    this.classCounts.set(cls, next);
-                    if (current === 0) this.add(cls);
-                } else {
-                    this.classCounts.delete(cls);
-                    this.remove(cls);
-                }
-            }
-            globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:mutated', {
-                records,
-                classCounts: deltaCounts,
-                cssRuntime: this
-            });
-        });
-        this.observer.observe(this.root, {
-            childList: true,
-            attributes: true,
-            attributeFilter: [
-                'class'
-            ],
-            attributeOldValue: true,
-            subtree: true
-        });
-        if (!this.progressive) this.host.removeAttribute('hidden');
-        this.observing = true;
-        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:observed', {
-            cssRuntime: this
-        });
-        return this;
-    }
-    hydrate(nativeLayerRules) {
-        const cssLayerRules = [];
-        const checkSheet = new CSSStyleSheet();
-        const result = {
-            allSyntaxRules: []
-        };
-        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;
-                    const unresolvedCSSRules = new Map();
-                    for (const rule of eachCSSLayerRule.cssRules){
-                        // trim() for fix the firefox bug that the cssText ends with \n\n
-                        unresolvedCSSRules.set(rule.cssText.trim(), rule);
-                    }
-                    for (const cssRule of eachCSSLayerRule.cssRules){
-                        if (!unresolvedCSSRules.has(cssRule.cssText)) continue;
-                        const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
-                        const variableName = variableCSSRule.style[0].slice(2);
-                        const variable = this.variables.get(variableName);
-                        if (!variable) continue;
-                        variableRule = new css.VariableRule(variableName, variable, this);
-                        this.themeLayer.rules.push(variableRule);
-                        this.themeLayer.tokenCounts.set(variableRule.name, 0);
-                        variableRule.nodes.forEach((node)=>{
-                            const checkRuleIndex = checkSheet.insertRule(node.text);
-                            const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
-                            if (checkNodeNativeRule) {
-                                const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
-                                const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
-                                if (match) {
-                                    node.native = match;
-                                    unresolvedCSSRules.delete(checkNodeNativeRuleText);
-                                    return;
-                                }
-                            }
-                        });
-                    }
-                    if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
-                } else {
-                    cssLayerRules.push(eachCSSLayerRule);
-                }
-            } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
-                this.layerStatementRule.native = eachNativeCSSRule;
-            } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
-                const nativeKeyframsRule = eachNativeCSSRule;
-                const keyframes = this.animations.get(nativeKeyframsRule.name);
-                if (!keyframes) continue;
-                const animationRule = new css.AnimationRule(nativeKeyframsRule.name, keyframes, this);
-                animationRule.native = nativeKeyframsRule;
-                this.animationsNonLayer.rules.push(animationRule);
-                this.rules.push(animationRule);
-                this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
-            }
-        }
-        for (const eachCSSLayerRule of cssLayerRules){
-            let layer;
-            switch(eachCSSLayerRule.name){
-                case 'base':
-                    layer = this.baseLayer;
-                    break;
-                case 'preset':
-                    layer = this.presetLayer;
-                    break;
-                case 'components':
-                    layer = this.componentsLayer;
-                    break;
-                case 'general':
-                    layer = this.generalLayer;
-                    break;
-                default:
-                    console.error(`Cannot recognize the layer \`${eachCSSLayerRule.name}\`. (https://rc.css.master.co/messages/hydration-errors)`);
-                    continue;
-            }
-            layer.native = eachCSSLayerRule;
-            const unresolvedCSSRules = new Map();
-            for (const rule of eachCSSLayerRule.cssRules){
-                // trim() for fix the firefox bug that the cssText ends with \n\n
-                unresolvedCSSRules.set(rule.cssText.trim(), rule);
-            }
-            for (const eachNativeLayerRule of eachCSSLayerRule.cssRules){
-                if (!unresolvedCSSRules.has(eachNativeLayerRule.cssText)) continue;
-                const selectorText = this.getSelectorText(eachNativeLayerRule);
-                if (!selectorText) {
-                    console.error(`Cannot get the selector text from \`${eachNativeLayerRule.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);
-                        result.allSyntaxRules.push(createdRule);
-                        try {
-                            const checkRuleIndex = checkSheet.insertRule(createdRule.text);
-                            const checkNodeNativeRule = checkSheet.cssRules.item(checkRuleIndex);
-                            if (checkNodeNativeRule) {
-                                const checkNodeNativeRuleText = checkNodeNativeRule.cssText.trim();
-                                const match = unresolvedCSSRules.get(checkNodeNativeRuleText);
-                                if (match) {
-                                    createdRule.native = match;
-                                    unresolvedCSSRules.delete(checkNodeNativeRuleText);
-                                    continue;
-                                }
-                            }
-                            console.error(`Cannot retrieve CSS rule for \`${createdRule.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
-                        } catch (error) {
-                        }
-                    }
-                } else {
-                    console.error(`Cannot recognize \`${eachNativeLayerRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
-                }
-            }
-            if (layer.rules.length) this.rules.push(layer);
-        }
-        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:hydrated', {
-            cssRuntime: this,
-            result
-        });
-        return result;
-    }
-    getSelectorText(cssRule) {
-        if (cssRule instanceof CSSStyleRule) {
-            return cssRule.selectorText;
-        } else if (cssRule instanceof CSSGroupingRule) {
-            return this.getSelectorText(cssRule.cssRules.item(0));
-        }
-    }
-    disconnect() {
-        if (!this.observing) return;
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = undefined;
-        }
-        // @ts-ignore
-        this.observing = false;
-        this.reset();
-        this.classCounts.clear();
-        if (!this.progressive) {
-            this.style?.remove();
-            this.style = null;
-        }
-        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:disconnected', {
-            cssRuntime: this
-        });
-        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);
-        /**
-         * 拿當前所有的 classNames 按照最新的 colors, config.rules 匹配並生成新的 style
-         * 所以 refresh 過後 rules 可能會變多也可能會變少
-         */ this.classCounts.forEach((_, className)=>{
-            this.add(className);
-        });
-        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:refreshed', {
-            cssRuntime: this,
-            customConfig
-        });
-        return this;
-    }
-    destroy() {
-        this.disconnect();
-        globalThis.CSSRuntime.instances.delete(this.root);
-        globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:destroyed', {
-            cssRuntime: this
-        });
-        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(root, config, css.config);
-    if (autoObserve) cssRuntime.observe();
-    return cssRuntime;
-}
-
-exports.CSSRuntime = CSSRuntime;
-exports.RuntimeSyntaxLayer = RuntimeSyntaxLayer;
-exports.default = CSSRuntime;
-exports.initCSSRuntime = initCSSRuntime;