@master/css-runtime 2.0.0-rc.5 → 2.0.0-rc.50

package/dist/index.mjs

@@ -0,0 +1,409 @@
+import { MasterCSS, config, Rule } from '@master/css';
+
+class RuntimeCSS extends MasterCSS {
+    root;
+    customConfig;
+    // @ts-expect-error
+    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();
+    }
+    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;
+        if (rootConstructorName === 'HTMLDocument' || rootConstructorName === 'Document') {
+            // @ts-ignore
+            this.root.defaultView.globalThis.runtimeCSS = this;
+            // @ts-ignore readonly
+            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);
+    }
+    /**
+     * 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.classUsages.has(className)) {
+                    this.classUsages.set(className, this.classUsages.get(className) + 1);
+                } else {
+                    this.classUsages.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()
+            // console.log('-----------')
+            // const test = 'swiper-slide-next'
+            // console.log(`${test}: ${this.classUsages.get(test)}`)
+            const eachClassUsages = new Map();
+            const updatedAttrElements = new Set();
+            const updatedConnectedElements = new Set();
+            const updatedElements = new Set();
+            const updateClassUsage = (classes, isAdding = false)=>{
+                const usage = isAdding ? 1 : -1;
+                classes.forEach((className)=>{
+                    // if (className === test) console.log(`  ${isAdding ? '+' : '-'} ${className} ${(eachClassUsages.get(className) || 0) + usage}`, target)
+                    eachClassUsages.set(className, (eachClassUsages.get(className) || 0) + usage);
+                });
+            };
+            const updateElementTree = (element, adding)=>{
+                if (element.isConnected) {
+                    updatedConnectedElements.add(element);
+                }
+                updatedElements.add(element);
+                updateClassUsage(element.classList, adding);
+                for (const child of element.children){
+                    updateElementTree(child, adding);
+                }
+            };
+            // console.log('///')
+            mutationRecords.forEach((mutation)=>{
+                const target = mutation.target;
+                switch(mutation.type){
+                    case 'attributes':
+                        const oldClassList = mutation.oldValue ? mutation.oldValue.split(/\s+/) : [];
+                        const newClassList = target.classList;
+                        newClassList.forEach((c)=>{
+                            if (!oldClassList.includes(c)) ;
+                        });
+                        break;
+                }
+            });
+            // console.log('///')
+            mutationRecords.forEach((mutation)=>{
+                const target = mutation.target;
+                switch(mutation.type){
+                    case 'attributes':
+                        /**
+                         * We only need to determine the first attribute record of the same target,
+                         * because the first record has the original old class name.
+                         *
+                         * The target is skipped if it is contained in the unhandled childList.
+                         */ if (updatedAttrElements.has(target) || updatedElements.has(target)) return;
+                        updatedAttrElements.add(target);
+                        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)
+                        if (addedClasses.length) updateClassUsage(addedClasses, true);
+                        // if (removedClasses.length) console.log('[attribute]', '[remove]', removedClasses, target)
+                        if (removedClasses.length) updateClassUsage(removedClasses, false);
+                        break;
+                    case 'childList':
+                        if (updatedConnectedElements.has(target)) return;
+                        // if (mutation.addedNodes.length) console.log('[childList]', '[add]', mutation.addedNodes)
+                        mutation.addedNodes.forEach((node)=>'classList' in node && updateElementTree(node, true));
+                        // if (mutation.removedNodes.length) console.log('[childList]', '[remove]', mutation.removedNodes)
+                        mutation.removedNodes.forEach((node)=>'classList' in node && updateElementTree(node, false));
+                        break;
+                }
+            });
+            /**
+             * Merge the class usage changes into the current class usage map.
+             */ eachClassUsages.forEach((countChange, className)=>{
+                let currentCount = this.classUsages.get(className) || 0;
+                let newCount = currentCount + countChange;
+                if (newCount > 0) {
+                    this.classUsages.set(className, newCount);
+                    if (currentCount === 0) {
+                        this.add(className);
+                    }
+                } else {
+                    this.classUsages.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
+        //     }
+        // })
+        // // 與 this.classUsages 比較並且打印不同的部分
+        // for (const className in safeClassUsages) {
+        //     if (this.classUsages.get(className) !== safeClassUsages[className]) {
+        //         throw new Error(`[css] ${className} ${this.classUsages.get(className)} (correct: ${safeClassUsages[className]})`)
+        //     }
+        // }
+        // end: debug
+        });
+        this.observer.observe(this.root, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: [
+                'class'
+            ],
+            childList: true,
+            subtree: true
+        });
+        if (!this.progressive) {
+            this.host.style.removeProperty('display');
+        }
+        // @ts-ignore
+        this.observing = true;
+        return this;
+    }
+    hydrate(nativeCSSRules) {
+        const cssSyntaxLayerBlockRules = [];
+        for(let i = 0; i < nativeCSSRules.length; i++){
+            const eachNativeCSSRule = nativeCSSRules[i];
+            if (eachNativeCSSRule.constructor.name === 'CSSLayerBlockRule') {
+                const cssLayerBlockRule = eachNativeCSSRule;
+                if (eachNativeCSSRule.name === 'theme') {
+                    this.themeLayer.native = cssLayerBlockRule;
+                    let variableRule;
+                    let lastVariableName;
+                    for(let j = 0; j < cssLayerBlockRule.cssRules.length; j++){
+                        const cssRule = cssLayerBlockRule.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 {
+                    cssSyntaxLayerBlockRules.push(cssLayerBlockRule);
+                }
+            } 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 cssLayerBlockRule of cssSyntaxLayerBlockRules){
+            const handleSyntaxLayer = (layer)=>{
+                layer.native = cssLayerBlockRule;
+                for(let j = 0; j < cssLayerBlockRule.cssRules.length; j++){
+                    const cssRule = cssLayerBlockRule.cssRules[j];
+                    const createSyntaxRule = (cssRule)=>{
+                        if (cssRule.selectorText) {
+                            const syntaxRule = this.createFromSelectorText(cssRule.selectorText)[0];
+                            if (syntaxRule) return syntaxRule;
+                        } else if (cssRule.cssRules) {
+                            for (const eachCSSRule of cssRule.cssRules){
+                                const syntaxRule = createSyntaxRule(eachCSSRule);
+                                if (syntaxRule) return syntaxRule;
+                            }
+                        }
+                    };
+                    const syntaxRule = createSyntaxRule(cssRule);
+                    if (syntaxRule) {
+                        layer.rules.push(syntaxRule);
+                        layer.insertVariables(syntaxRule);
+                        layer.insertAnimations(syntaxRule);
+                        for (const eachNode of syntaxRule.nodes){
+                            if (!eachNode.native) eachNode.native = cssRule;
+                        }
+                    } else {
+                        cssLayerBlockRule.deleteRule?.(j--);
+                        console.error(`Cannot recognize the CSS rule in the ${layer.name} layer. \`${cssRule.cssText}\` (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);
+                        }
+                    }
+                }
+                if (layer.rules.length) this.rules.push(layer);
+            };
+            switch(cssLayerBlockRule.name){
+                case 'base':
+                    handleSyntaxLayer(this.baseLayer);
+                    break;
+                case 'preset':
+                    handleSyntaxLayer(this.presetLayer);
+                    break;
+                case 'components':
+                    this.componentsLayer.native = cssLayerBlockRule;
+                    let stylePreText;
+                    const createSyntaxRules = (cssRule)=>{
+                        if (cssRule.selectorText) {
+                            const syntaxRules = this.createFromSelectorText(cssRule.selectorText);
+                            if (syntaxRules.length) {
+                                stylePreText = cssRule.selectorText + '{';
+                                return syntaxRules;
+                            }
+                        } else if (cssRule.cssRules) {
+                            for (const eachCSSRule of cssRule.cssRules){
+                                const syntaxRules = this.createFromSelectorText(eachCSSRule.selectorText);
+                                if (syntaxRules) return syntaxRules;
+                            }
+                        }
+                    };
+                    for(let j = 0; j < cssLayerBlockRule.cssRules.length; j++){
+                        const cssRule = cssLayerBlockRule.cssRules[j];
+                        const syntaxRules = createSyntaxRules(cssRule);
+                        if (syntaxRules) {
+                            let matched = false;
+                            for (const eachSyntaxRule of syntaxRules){
+                                for (const node of eachSyntaxRule.nodes){
+                                    if (!node.native && node.text.includes(stylePreText)) {
+                                        node.native = cssRule;
+                                        if (!this.componentsLayer.rules.includes(eachSyntaxRule)) {
+                                            this.componentsLayer.rules.push(eachSyntaxRule);
+                                            this.componentsLayer.insertVariables(eachSyntaxRule);
+                                            this.componentsLayer.insertAnimations(eachSyntaxRule);
+                                        }
+                                        matched = true;
+                                        break;
+                                    }
+                                }
+                                if (matched) break;
+                            }
+                        } else {
+                            cssLayerBlockRule?.deleteRule?.(j--);
+                            console.error(`Cannot recognize the CSS rule in the components layer. \`${cssRule.cssText}\` (https://rc.css.master.co/messages/hydration-errors)`);
+                        }
+                    }
+                    for (const eachRule of this.componentsLayer.rules){
+                        for(let k = eachRule.nodes.length - 1; k >= 0; k--){
+                            if (!eachRule.nodes[k].native) {
+                                eachRule.nodes.splice(k, 1);
+                            }
+                        }
+                    }
+                    if (this.componentsLayer.rules.length) this.rules.push(this.componentsLayer);
+                    break;
+                case 'general':
+                    handleSyntaxLayer(this.generalLayer);
+                    break;
+            }
+        }
+    }
+    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.classUsages.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();
+        runtimeCSSs.splice(runtimeCSSs.indexOf(this), 1);
+        return this;
+    }
+}
+const runtimeCSSs = [];
+(()=>{
+    globalThis.RuntimeCSS = RuntimeCSS;
+    globalThis.runtimeCSSs = runtimeCSSs;
+})();
+
+/**
+ * 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
+ */ function initCSSRuntime(config) {
+    return new RuntimeCSS(document, config).observe();
+}
+
+export { RuntimeCSS, RuntimeCSS as default, initCSSRuntime };

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

@@ -1,9 +1,9 @@
-import { CSSRuntime } from './core';
+import { RuntimeCSS } from './core';
 import type { Config } from '@master/css';
 /**
- * Initialize a new CSSRuntime instance and observe the target root
+ * 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): CSSRuntime;
+export default function initCSSRuntime(config?: Config): RuntimeCSS;

package/dist/types/global.d.ts

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

package/package.json

@@ -1 +1 @@
-{"name":"@master/css-runtime","scripts":{"build":"pnpm run \"/^build:/\"","build:iife":"techor pack \"src/iife.ts\" --outfile \"dist/iife.bundle.js\" --bundle --format iife --no-external --no-clean","build:esm":"techor pack \"src/index.ts\" --outfile \"dist/index.bundle.mjs\" --bundle --format esm --no-clean","build:cjs":"techor pack \"src/index.ts\" --outfile \"dist/index.bundle.js\" --bundle --format cjs --no-clean","build:type":"tsc --emitDeclarationOnly --declaration --outDir dist","dev":"pnpm run \"/^build:(?!type)/\" --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"Run the Master CSS right in the browser","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","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.bundle.js","jsnext:main":"./dist/index.bundle.mjs","esnext":"./dist/index.bundle.mjs","module":"./dist/index.bundle.mjs","browser":"./dist/iife.bundle.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.bundle.js","import":"./dist/index.bundle.mjs","types":"./dist/index.d.ts"}},"files":["dist"],"publishConfig":{"access":"public"},"dependencies":{"@master/css":"^2.0.0-rc.5"},"version":"2.0.0-rc.5"}
+{"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.50"},"devDependencies":{"@playwright/test":"^1.49.1","@types/cssom":"^0.4.3","css-tree":"^3.0.1","cssom":"^0.5.0","shared":"^2.0.0-rc.50"},"version":"2.0.0-rc.50"}