@master/css-runtime 2.0.0-rc.53 → 2.0.0-rc.55

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,
@@ -244,10 +213,11 @@ class RuntimeCSS extends MasterCSS {
         this.observing = true;
         return this;
     }
-    hydrate(nativeCSSRules) {
+    hydrate(nativeLayerRules) {
         const cssLayerRules = [];
-        for(let i = 0; i < nativeCSSRules.length; i++){
-            const eachNativeCSSRule = nativeCSSRules[i];
+        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') {
@@ -288,20 +258,8 @@ class RuntimeCSS extends MasterCSS {
                 this.animationsNonLayer.usages[animationRule.name] = 0;
             }
         }
-        const createSyntaxRules = (cssRule)=>{
-            if (cssRule.selectorText) {
-                return this.createFromSelectorText(cssRule.selectorText);
-            } else if (cssRule.cssRules) {
-                for (const eachCSSRule of cssRule.cssRules){
-                    const syntaxRules = createSyntaxRules(eachCSSRule);
-                    if (syntaxRules?.length) {
-                        return syntaxRules;
-                    }
-                }
-            }
-        };
         for (const eachCSSLayerRule of cssLayerRules){
-            const eachCSSRules = Array.from(eachCSSLayerRule.cssRules);
+            const nativeLayerRules = Array.from(eachCSSLayerRule.cssRules);
             let layer;
             switch(eachCSSLayerRule.name){
                 case 'base':
@@ -318,62 +276,46 @@ class RuntimeCSS extends MasterCSS {
                     break;
             }
             layer.native = eachCSSLayerRule;
-            eachCSSRules.forEach((eachCSSRule)=>{
-                const syntaxRules = createSyntaxRules(eachCSSRule);
-                if (syntaxRules) {
-                    const retrieveNative = (selectorText)=>{
-                        for(let eachTargetCSSRuleIndex = 0; eachTargetCSSRuleIndex < eachCSSRules.length; eachTargetCSSRuleIndex++){
-                            const eachTargetCSSRule = eachCSSRules[eachTargetCSSRuleIndex];
-                            const matchSelector = (eachSelectorText)=>{
-                                if (eachSelectorText.replace(/,\s+/g, ',') === selectorText) {
-                                    eachCSSRules.splice(eachTargetCSSRuleIndex, 1);
-                                    return true;
-                                }
-                                return false;
-                            };
-                            if (eachTargetCSSRule instanceof CSSStyleRule) {
-                                if (matchSelector(eachTargetCSSRule.selectorText)) {
-                                    return eachTargetCSSRule;
-                                }
-                            } else if (eachTargetCSSRule instanceof CSSMediaRule) {
-                                for(let eachMediaChildRuleIndex = 0; eachMediaChildRuleIndex < eachTargetCSSRule.cssRules.length; eachMediaChildRuleIndex++){
-                                    const eachMediaChildRule = eachTargetCSSRule.cssRules[eachMediaChildRuleIndex];
-                                    if (eachMediaChildRule instanceof CSSStyleRule) {
-                                        if (matchSelector(eachMediaChildRule.selectorText)) {
-                                            return eachTargetCSSRule;
-                                        }
+            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;
                                     }
                                 }
                             }
-                        }
-                    };
-                    for (const syntaxRule of syntaxRules){
-                        layer.rules.push(syntaxRule);
-                        layer.insertVariables(syntaxRule);
-                        layer.insertAnimations(syntaxRule);
-                        syntaxRule.nodes.forEach((node)=>{
-                            const native = retrieveNative(node.selectorText);
-                            if (native) {
-                                node.native = native;
-                            } else {
-                                console.error(`Cannot retrieve the CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
-                            }
+                            console.error(`Cannot retrieve CSS rule for \`${node.selectorText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
                         });
                     }
                 } else {
-                    console.error(`Cannot recognize the CSS rule \`${eachCSSRule.cssText}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
-                }
-            });
-            for (const eachRule of layer.rules){
-                for(let k = eachRule.nodes.length - 1; k >= 0; k--){
-                    if (!eachRule.nodes[k].native) {
-                        eachRule.nodes.splice(k, 1);
-                    }
+                    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) {
@@ -384,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;
@@ -401,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 };

package/dist/init.d.ts

@@ -0,0 +1,10 @@
+import CSSRuntime from './core';
+import type { Config } from '@master/css';
+/**
+ * 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
+ */
+export default function initCSSRuntime(config?: Config, root?: Document | ShadowRoot, autoObserve?: boolean): CSSRuntime;

package/dist/register-global.d.ts

@@ -0,0 +1,9 @@
+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[];
+}
+export default function registerGlobal(CSSRuntime: typeof Core): void;

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","test":"vitest","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":"./dist/index.cjs","import":"./dist/index.mjs"}},"files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/css":"^2.0.0-rc.53"},"devDependencies":{"@playwright/test":"^1.49.1","@types/cssom":"^0.4.3","css-tree":"^3.1.0","cssom":"^0.5.0","shared":"^2.0.0-rc.53"},"version":"2.0.0-rc.53"}
+{"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.55","@master/css-devtools-hook":"^2.0.0-rc.55"},"devDependencies":{"@playwright/test":"^1.49.1","shared":"^2.0.0-rc.55"},"version":"2.0.0-rc.55"}

package/dist/init-css-runtime.d.ts

@@ -1,9 +0,0 @@
-import { RuntimeCSS } from './core';
-import type { Config } from '@master/css';
-/**
- * Initialize a new RuntimeCSS instance and observe the target root
- * @param config master css config
- * @param targetRoot target root to observe
- * @returns master css instance
- */
-export default function initCSSRuntime(config?: Config): RuntimeCSS;

package/dist/types/global.d.ts

@@ -1,9 +0,0 @@
-import type { Config } from '@master/css';
-import type { RuntimeCSS as _CSSRuntime } from '../core';
-declare global {
-    var RuntimeCSS: typeof _CSSRuntime;
-    var runtimeCSSs: _CSSRuntime[];
-    var runtimeCSS: _CSSRuntime;
-    var masterCSSConfig: Config;
-    var masterCSSConfigs: Config[];
-}