@master/css-runtime 2.0.0-rc.57 → 2.0.0-rc.59

package/dist/index.cjs

@@ -10,6 +10,110 @@ function registerGlobal(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;
+    native;
+    constructor(name, cssRuntime){
+        super(name, cssRuntime), this.name = name, this.cssRuntime = cssRuntime, this.rules = [], this.tokenCounts = new Map(), this.native = null;
+    }
+    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) return;
+        if (this.native) {
+            let cssRuleIndex = 0;
+            const lastCssRule = function getLastCssRule(layer, index) {
+                let lastCssRule;
+                const previouRule = layer.rules[index];
+                if (previouRule && 'nodes' in previouRule) {
+                    if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
+                    const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
+                    lastCssRule = lastNativeRule.native;
+                }
+                return lastCssRule;
+            }(this, insertedIndex - 1);
+            if (lastCssRule) {
+                for(let i = 0; i < this.native.cssRules.length; i++){
+                    if (this.native.cssRules[i] === lastCssRule) {
+                        cssRuleIndex = i + 1;
+                        break;
+                    }
+                }
+            }
+            for(let i = 0; i < rule.nodes.length;){
+                try {
+                    const node = rule.nodes[i];
+                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
+                    node.native = this.native.cssRules.item(insertedIndex);
+                    cssRuleIndex++;
+                    i++;
+                } catch (error) {
+                    console.error(error, rule.nodes[i]);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        return insertedIndex;
+    }
+    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) return;
+        if (this.native?.cssRules && 'nodes' in deletedRule) {
+            for (const node of deletedRule.nodes){
+                if (node.native) {
+                    const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
+                    if (foundIndex !== -1) {
+                        // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
+                        this.native.deleteRule(foundIndex);
+                    }
+                }
+            }
+        }
+        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;
@@ -19,8 +123,14 @@ class CSSRuntime extends css.MasterCSS {
     progressive;
     container;
     observer;
+    baseLayer;
+    themeLayer;
+    presetLayer;
+    componentsLayer;
+    generalLayer;
+    classCounts;
     constructor(root = document, customConfig = css.config){
-        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false;
+        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false, this.baseLayer = new RuntimeSyntaxLayer('base', this), this.themeLayer = new RuntimeLayer('theme', this), this.presetLayer = new RuntimeSyntaxLayer('preset', this), this.componentsLayer = new RuntimeSyntaxLayer('components', this), this.generalLayer = new RuntimeSyntaxLayer('general', this), this.classCounts = new Map();
         const rootConstructorName = root?.constructor.name;
         if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
             this.root.defaultView.globalThis.cssRuntime = this;
@@ -47,6 +157,7 @@ class CSSRuntime extends css.MasterCSS {
      * @returns this
      */ observe() {
         if (this.observing) return this;
+        // 1. Check if the stylesheet is progressive.
         if (this.root.styleSheets) for (const sheet of this.root.styleSheets){
             const { ownerNode } = sheet;
             if (ownerNode && ownerNode.id === 'master') {
@@ -56,31 +167,35 @@ class CSSRuntime extends css.MasterCSS {
                 break;
             }
         }
+        // 2. Count the classes in the host and its children.
+        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);
+        };
+        this.host.classList.forEach(increaseClassCount);
+        (this.root.constructor.name === 'HTMLDocument' ? this.host : this.container).querySelectorAll('[class]').forEach((element)=>element.classList.forEach(increaseClassCount));
+        // 3. Hydrate the existing CSS rules or create a new one.
         if (this.progressive) {
-            this.hydrate(this.style.sheet.cssRules);
+            const hydrateResult = this.hydrate(this.style.sheet.cssRules);
+            // Add the connected class names that are not hydrated yet.
+            for (const eachConnectedName of connectedNames){
+                if (hydrateResult.allSyntaxRules.find((rule)=>(rule.fixedClass || rule.name) === eachConnectedName)) continue;
+                this.add(eachConnectedName);
+            }
         } 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);
+            for (const eachConnectedName of connectedNames){
+                this.add(eachConnectedName);
+            }
         }
-        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);
-                }
-            });
-        };
-        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()
@@ -217,6 +332,9 @@ class CSSRuntime extends css.MasterCSS {
     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') {
@@ -233,7 +351,7 @@ class CSSRuntime extends css.MasterCSS {
                             lastVariableName = variableName;
                             variableRule = new css.Rule(variableName);
                             this.themeLayer.rules.push(variableRule);
-                            this.themeLayer.usages[variableRule.name] = 0;
+                            this.themeLayer.tokenCounts.set(variableRule.name, 0);
                         }
                         variableRule?.nodes.push({
                             native: cssRule,
@@ -256,11 +374,10 @@ class CSSRuntime extends css.MasterCSS {
                 ]);
                 this.animationsNonLayer.rules.push(animationRule);
                 this.rules.push(animationRule);
-                this.animationsNonLayer.usages[animationRule.name] = 0;
+                this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
             }
         }
         for (const eachCSSLayerRule of cssLayerRules){
-            const nativeLayerRules = Array.from(eachCSSLayerRule.cssRules);
             let layer;
             switch(eachCSSLayerRule.name){
                 case 'base':
@@ -272,15 +389,23 @@ class CSSRuntime extends css.MasterCSS {
                 case 'components':
                     layer = this.componentsLayer;
                     break;
-                default:
+                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;
-            for (const eachNativeRule of nativeLayerRules){
-                const selectorText = this.getSelectorText(eachNativeRule);
+            const unresolvedCSSRules = new Map();
+            for (const rule of eachCSSLayerRule.cssRules){
+                unresolvedCSSRules.set(rule.cssText, 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 \`${eachNativeRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                    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);
@@ -289,34 +414,36 @@ class CSSRuntime extends css.MasterCSS {
                         layer.rules.push(createdRule);
                         layer.insertVariables(createdRule);
                         layer.insertAnimations(createdRule);
+                        result.allSyntaxRules.push(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;
-                                    }
+                                const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
+                                if (match) {
+                                    node.native = match;
+                                    unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
+                                    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)`);
+                    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
+            cssRuntime: this,
+            result
         });
+        return result;
     }
     getSelectorText(cssRule) {
-        if ('selectorText' in cssRule) {
+        if (cssRule instanceof CSSStyleRule) {
             return cssRule.selectorText;
-        } else if ('cssRules' in cssRule) {
+        } else if (cssRule instanceof CSSGroupingRule) {
             return this.getSelectorText(cssRule.cssRules.item(0));
         }
     }
@@ -346,6 +473,12 @@ class CSSRuntime extends css.MasterCSS {
             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

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { default as CSSRuntime, default } from './core';
 export { default as initCSSRuntime } from './init';
+export type * from './types';
+export type * from './syntax-layer';

package/dist/index.development.cjs

@@ -100,6 +100,110 @@ function registerGlobal(CSSRuntime) {
     }
 }
 
+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;
+    native;
+    constructor(name, cssRuntime){
+        super(name, cssRuntime), this.name = name, this.cssRuntime = cssRuntime, this.rules = [], this.tokenCounts = new Map(), this.native = null;
+    }
+    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) return;
+        if (this.native) {
+            let cssRuleIndex = 0;
+            const lastCssRule = function getLastCssRule(layer, index) {
+                let lastCssRule;
+                const previouRule = layer.rules[index];
+                if (previouRule && 'nodes' in previouRule) {
+                    if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
+                    const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
+                    lastCssRule = lastNativeRule.native;
+                }
+                return lastCssRule;
+            }(this, insertedIndex - 1);
+            if (lastCssRule) {
+                for(let i = 0; i < this.native.cssRules.length; i++){
+                    if (this.native.cssRules[i] === lastCssRule) {
+                        cssRuleIndex = i + 1;
+                        break;
+                    }
+                }
+            }
+            for(let i = 0; i < rule.nodes.length;){
+                try {
+                    const node = rule.nodes[i];
+                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
+                    node.native = this.native.cssRules.item(insertedIndex);
+                    cssRuleIndex++;
+                    i++;
+                } catch (error) {
+                    console.error(error, rule.nodes[i]);
+                    rule.nodes.splice(i, 1);
+                }
+            }
+        }
+        return insertedIndex;
+    }
+    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) return;
+        if (this.native?.cssRules && 'nodes' in deletedRule) {
+            for (const node of deletedRule.nodes){
+                if (node.native) {
+                    const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
+                    if (foundIndex !== -1) {
+                        // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
+                        this.native.deleteRule(foundIndex);
+                    }
+                }
+            }
+        }
+        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;
@@ -109,8 +213,14 @@ class CSSRuntime extends css.MasterCSS {
     progressive;
     container;
     observer;
+    baseLayer;
+    themeLayer;
+    presetLayer;
+    componentsLayer;
+    generalLayer;
+    classCounts;
     constructor(root = document, customConfig = css.config){
-        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false;
+        super(customConfig), this.root = root, this.customConfig = customConfig, this.observing = false, this.progressive = false, this.baseLayer = new RuntimeSyntaxLayer('base', this), this.themeLayer = new RuntimeLayer('theme', this), this.presetLayer = new RuntimeSyntaxLayer('preset', this), this.componentsLayer = new RuntimeSyntaxLayer('components', this), this.generalLayer = new RuntimeSyntaxLayer('general', this), this.classCounts = new Map();
         const rootConstructorName = root?.constructor.name;
         if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
             this.root.defaultView.globalThis.cssRuntime = this;
@@ -137,6 +247,7 @@ class CSSRuntime extends css.MasterCSS {
      * @returns this
      */ observe() {
         if (this.observing) return this;
+        // 1. Check if the stylesheet is progressive.
         if (this.root.styleSheets) for (const sheet of this.root.styleSheets){
             const { ownerNode } = sheet;
             if (ownerNode && ownerNode.id === 'master') {
@@ -146,31 +257,39 @@ class CSSRuntime extends css.MasterCSS {
                 break;
             }
         }
+        // 2. Count the classes in the host and its children.
+        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);
+        };
+        this.host.classList.forEach(increaseClassCount);
+        (this.root.constructor.name === 'HTMLDocument' ? this.host : this.container).querySelectorAll('[class]').forEach((element)=>element.classList.forEach(increaseClassCount));
+        // 3. Hydrate the existing CSS rules or create a new one.
         if (this.progressive) {
-            this.hydrate(this.style.sheet.cssRules);
+            const hydrateResult = this.hydrate(this.style.sheet.cssRules);
+            // Add the connected class names that are not hydrated yet.
+            for (const eachConnectedName of connectedNames){
+                if (hydrateResult.allSyntaxRules.find((rule)=>(rule.fixedClass || rule.name) === eachConnectedName)) continue;
+                this.add(eachConnectedName);
+                {
+                    // Basically, the style#master should have all the prerendered CSS rules that are connected in the DOM.
+                    console.debug(`The class \`${eachConnectedName}\` was added via script before calling hydrate, or the corresponding CSS rule were not properly pre-rendered.`);
+                }
+            }
         } 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);
+            for (const eachConnectedName of connectedNames){
+                this.add(eachConnectedName);
+            }
         }
-        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);
-                }
-            });
-        };
-        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()
@@ -307,6 +426,9 @@ class CSSRuntime extends css.MasterCSS {
     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') {
@@ -323,7 +445,7 @@ class CSSRuntime extends css.MasterCSS {
                             lastVariableName = variableName;
                             variableRule = new css.Rule(variableName);
                             this.themeLayer.rules.push(variableRule);
-                            this.themeLayer.usages[variableRule.name] = 0;
+                            this.themeLayer.tokenCounts.set(variableRule.name, 0);
                         }
                         variableRule?.nodes.push({
                             native: cssRule,
@@ -346,11 +468,10 @@ class CSSRuntime extends css.MasterCSS {
                 ]);
                 this.animationsNonLayer.rules.push(animationRule);
                 this.rules.push(animationRule);
-                this.animationsNonLayer.usages[animationRule.name] = 0;
+                this.animationsNonLayer.tokenCounts.set(animationRule.name, 0);
             }
         }
         for (const eachCSSLayerRule of cssLayerRules){
-            const nativeLayerRules = Array.from(eachCSSLayerRule.cssRules);
             let layer;
             switch(eachCSSLayerRule.name){
                 case 'base':
@@ -362,15 +483,23 @@ class CSSRuntime extends css.MasterCSS {
                 case 'components':
                     layer = this.componentsLayer;
                     break;
-                default:
+                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;
-            for (const eachNativeRule of nativeLayerRules){
-                const selectorText = this.getSelectorText(eachNativeRule);
+            const unresolvedCSSRules = new Map();
+            for (const rule of eachCSSLayerRule.cssRules){
+                unresolvedCSSRules.set(rule.cssText, 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 \`${eachNativeRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                    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);
@@ -379,34 +508,36 @@ class CSSRuntime extends css.MasterCSS {
                         layer.rules.push(createdRule);
                         layer.insertVariables(createdRule);
                         layer.insertAnimations(createdRule);
+                        result.allSyntaxRules.push(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;
-                                    }
+                                const match = unresolvedCSSRules.get(createdNodeNativeRule.cssText);
+                                if (match) {
+                                    node.native = match;
+                                    unresolvedCSSRules.delete(createdNodeNativeRule.cssText);
+                                    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)`);
+                    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
+            cssRuntime: this,
+            result
         });
+        return result;
     }
     getSelectorText(cssRule) {
-        if ('selectorText' in cssRule) {
+        if (cssRule instanceof CSSStyleRule) {
             return cssRule.selectorText;
-        } else if ('cssRules' in cssRule) {
+        } else if (cssRule instanceof CSSGroupingRule) {
             return this.getSelectorText(cssRule.cssRules.item(0));
         }
     }
@@ -436,6 +567,12 @@ class CSSRuntime extends css.MasterCSS {
             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