@master/css-runtime 2.0.0-rc.6 → 2.0.0-rc.61

package/dist/index.development.mjs

@@ -0,0 +1,606 @@
+import { Layer, withSyntaxLayer, MasterCSS, config, Rule } from '@master/css';
+import { installHook } from '@master/css-devtools-hook';
+
+const createLogger = (type)=>{
+    return (message, ...args)=>{
+        if (!type) return console.log(message, ...args);
+        if (console[type]) {
+            console[type](`%c[Master CSS]%c ${message}`, 'color: gray;', 'color: inherit;', ...args);
+        }
+    };
+};
+const loggers = {
+    info: createLogger('info'),
+    debug: createLogger('debug'),
+    warn: console.warn,
+    error: console.error,
+    trace: console.trace,
+    table: console.table,
+    group: console.group,
+    groupCollapsed: console.group,
+    groupEnd: console.groupEnd,
+    time: console.time,
+    timeEnd: console.timeEnd
+};
+const log = createLogger();
+Object.assign(log, loggers);
+
+function registerClassCountDebugger() {
+    const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
+    hook.on('runtime:mutated', ({ records, classCounts, cssRuntime })=>{
+        const actualClassCounts = {};
+        let errored = false;
+        const resolveClass = (className)=>{
+            if (Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
+                actualClassCounts[className]++;
+            } else {
+                actualClassCounts[className] = 1;
+            }
+        };
+        (cssRuntime.root.constructor.name === 'HTMLDocument' ? cssRuntime.host : cssRuntime.container).querySelectorAll('[class]').forEach((element)=>{
+            element.classList.forEach(resolveClass);
+        });
+        cssRuntime.host.classList.forEach(resolveClass);
+        for(const className in actualClassCounts){
+            const eachCount = cssRuntime.classCounts.get(className);
+            const eachActualCount = actualClassCounts[className];
+            if (eachCount !== eachActualCount) {
+                log.error(`Class count mismatch for '${className}' (expected ${eachActualCount}) (received ${eachCount})`);
+                errored = true;
+            }
+        }
+        cssRuntime.classCounts.forEach((eachCount, className)=>{
+            if (!Object.prototype.hasOwnProperty.call(actualClassCounts, className)) {
+                log.error(`Class count mismatch for '${className}' (expected ${0}) (received ${eachCount})`);
+                errored = true;
+            }
+        });
+        if (errored) {
+            log.debug('Records:', records);
+            log.debug('Counts:', classCounts);
+        }
+    });
+}
+
+function registerLifecycleDebugger() {
+    const hook = globalThis.__MASTER_CSS_DEVTOOLS_HOOK__;
+    hook.on('runtime:created', ({ cssRuntime })=>{
+        log.debug('created', cssRuntime);
+    });
+    hook.on('runtime:hydrated', ({ cssRuntime })=>{
+        log.debug('hydrated', cssRuntime);
+    });
+    hook.on('runtime:observed', ({ cssRuntime })=>{
+        log.debug('observed', cssRuntime);
+        if (cssRuntime.progressive) {
+            log.info('Progressive rendering is adopted.');
+            log.debug('pre-rendered CSS', cssRuntime.style);
+        } else {
+            log.info('Runtime rendering is adopted.');
+        }
+    });
+    hook.on('runtime:refreshed', ({ cssRuntime, customConfig })=>{
+        log.debug('refreshed', cssRuntime, customConfig);
+    });
+    hook.on('runtime:disconnected', ({ cssRuntime })=>{
+        log.debug('disconnected', cssRuntime);
+    });
+    hook.on('runtime:destroyed', ({ cssRuntime })=>{
+        log.debug('destroyed', cssRuntime);
+    });
+}
+
+function startDebuggers() {
+    log.info('Debug mode is enabled by default in development.');
+    registerClassCountDebugger();
+    registerLifecycleDebugger();
+}
+
+function registerGlobal(CSSRuntime) {
+    if (!globalThis.CSSRuntime) globalThis.CSSRuntime = CSSRuntime;
+    installHook();
+    {
+        startDebuggers();
+    }
+}
+
+function findNativeCSSRuleIndex(cssRules, nativeRule) {
+    for(let i = 0; i < cssRules.length; i++){
+        if (cssRules[i] === nativeRule) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+class RuntimeLayer extends 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;){
+                const node = rule.nodes[i];
+                try {
+                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
+                    node.native = this.native.cssRules.item(insertedIndex);
+                    cssRuleIndex++;
+                    i++;
+                } catch (error) {
+                    console.error(error, node);
+                    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 = withSyntaxLayer(RuntimeLayer);
+
+class CSSRuntime extends MasterCSS {
+    root;
+    customConfig;
+    static instances = new WeakMap();
+    host;
+    observing;
+    progressive;
+    container;
+    observer;
+    baseLayer;
+    themeLayer;
+    presetLayer;
+    componentsLayer;
+    generalLayer;
+    classCounts;
+    constructor(root = document, customConfig = config){
+        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;
+            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;
+        // 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') {
+                this.style = ownerNode;
+                if (this.style.sheet?.cssRules.length) {
+                    // @ts-ignore
+                    this.progressive = true;
+                }
+                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) {
+            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);
+            }
+        }
+        // @ts-expect-error readonly
+        this.observer = new MutationObserver((mutationRecords)=>{
+            const eachClassCounts = new Map();
+            const targetFirstAttrMutationRecord = new Map();
+            const updateClassCount = (classes, isAdding = false)=>{
+                const usage = isAdding ? 1 : -1;
+                classes.forEach((className)=>{
+                    eachClassCounts.set(className, (eachClassCounts.get(className) || 0) + usage);
+                });
+            };
+            const connectedStatusMap = new Map();
+            const disconnectedStatusMap = new Map();
+            const recordStatus = (target, mutationRecord, map, adding)=>{
+                const status = map.get(target);
+                if (status) {
+                    status.change += adding ? 1 : -1;
+                    status.mutationRecord = mutationRecord;
+                } else {
+                    map.set(target, {
+                        change: adding ? 1 : -1,
+                        mutationRecord
+                    });
+                }
+                for (const child of target.children){
+                    if ('classList' in child) {
+                        recordStatus(child, mutationRecord, map, adding);
+                    }
+                }
+            };
+            mutationRecords.forEach((mutationRecord)=>{
+                const target = mutationRecord.target;
+                switch(mutationRecord.type){
+                    case 'attributes':
+                        if (!targetFirstAttrMutationRecord.has(target)) {
+                            targetFirstAttrMutationRecord.set(target, mutationRecord);
+                        }
+                        break;
+                    case 'childList':
+                        const targetStatusMap = target.isConnected ? connectedStatusMap : disconnectedStatusMap;
+                        mutationRecord.addedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, true));
+                        mutationRecord.removedNodes.forEach((node)=>'classList' in node && recordStatus(node, mutationRecord, targetStatusMap, false));
+                        break;
+                }
+            });
+            const updateTarget = (target, adding)=>{
+                const firstAttrMutationRecord = targetFirstAttrMutationRecord.get(target);
+                if (firstAttrMutationRecord) {
+                    targetFirstAttrMutationRecord.delete(target);
+                }
+                if (adding) {
+                    updateClassCount(target.classList, adding);
+                } else {
+                    if (firstAttrMutationRecord) {
+                        updateClassCount(firstAttrMutationRecord.oldValue ? firstAttrMutationRecord.oldValue.split(/\s+/) : [], adding);
+                    } else {
+                        updateClassCount(target.classList, adding);
+                    }
+                    disconnectedStatusMap.forEach((disconnectedTargetStatus, disconnectedTarget)=>{
+                        if (disconnectedTargetStatus.mutationRecord.target === target && disconnectedTargetStatus.change !== 0) {
+                            updateTarget(disconnectedTarget, disconnectedTargetStatus.change > 0);
+                        }
+                    });
+                }
+            };
+            connectedStatusMap.forEach(({ change }, target)=>change !== 0 && updateTarget(target, change > 0));
+            targetFirstAttrMutationRecord.forEach((mutation, target)=>{
+                if (!target.isConnected) return;
+                const oldClassList = mutation.oldValue ? mutation.oldValue.split(/\s+/) : [];
+                const newClassList = target.classList;
+                const addedClasses = [];
+                newClassList.forEach((c)=>{
+                    if (!oldClassList.includes(c)) addedClasses.push(c);
+                });
+                const removedClasses = oldClassList.filter((c)=>!newClassList.contains(c));
+                if (addedClasses.length) {
+                    updateClassCount(addedClasses, true);
+                }
+                if (removedClasses.length) {
+                    updateClassCount(removedClasses, false);
+                }
+            });
+            /**
+             * Merge the class usage changes into the current class usage map.
+             */ eachClassCounts.forEach((countChange, className)=>{
+                let currentCount = this.classCounts.get(className) || 0;
+                let newCount = currentCount + countChange;
+                if (newCount > 0) {
+                    this.classCounts.set(className, newCount);
+                    if (currentCount === 0) {
+                        this.add(className);
+                    }
+                } else {
+                    this.classCounts.delete(className);
+                    this.remove(className);
+                }
+            });
+            globalThis.__MASTER_CSS_DEVTOOLS_HOOK__?.emit('runtime:mutated', {
+                records: mutationRecords,
+                classCounts: eachClassCounts,
+                cssRuntime: this
+            });
+        });
+        this.observer.observe(this.root, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: [
+                'class'
+            ],
+            childList: true,
+            subtree: true
+        });
+        if (!this.progressive) {
+            this.host.removeAttribute('hidden');
+        }
+        // @ts-ignore
+        this.observing = true;
+        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;
+                    let lastVariableName;
+                    for(let j = 0; j < eachCSSLayerRule.cssRules.length; j++){
+                        const cssRule = eachCSSLayerRule.cssRules[j];
+                        const variableCSSRule = cssRule.constructor.name === 'CSSMediaRule' ? cssRule.cssRules[0] : cssRule;
+                        const variableName = variableCSSRule.style[0].slice(2);
+                        if (variableName !== lastVariableName) {
+                            lastVariableName = variableName;
+                            variableRule = new Rule(variableName);
+                            this.themeLayer.rules.push(variableRule);
+                            this.themeLayer.tokenCounts.set(variableRule.name, 0);
+                        }
+                        variableRule?.nodes.push({
+                            native: cssRule,
+                            text: cssRule.cssText
+                        });
+                    }
+                    if (this.themeLayer.rules.length) this.rules.push(this.themeLayer);
+                } else {
+                    cssLayerRules.push(eachCSSLayerRule);
+                }
+            } else if (eachNativeCSSRule.constructor.name === 'CSSLayerStatementRule') {
+                this.layerStatementRule.nodes[0].native = eachNativeCSSRule;
+            } else if (eachNativeCSSRule.constructor.name === 'CSSKeyframesRule') {
+                const keyframsRule = eachNativeCSSRule;
+                const animationRule = new Rule(keyframsRule.name, [
+                    {
+                        native: keyframsRule,
+                        text: keyframsRule.cssText
+                    }
+                ]);
+                this.animationsNonLayer.rules.push(animationRule);
+                this.rules.push(animationRule);
+                this.animationsNonLayer.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);
+                        createdRule.nodes.forEach((node)=>{
+                            try {
+                                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;
+                                    }
+                                }
+                                console.error(`Cannot retrieve CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                            } catch (error) {
+                                {
+                                    console.debug(`Cannot insert CSS rule for \`${node.text}\`. (${layer.name}) (https://rc.css.master.co/messages/hydration-errors)`);
+                                }
+                            }
+                        });
+                    }
+                } 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();
+            // @ts-expect-error readonly
+            this.observer = undefined;
+        }
+        // @ts-ignore
+        this.observing = false;
+        this.reset();
+        this.classCounts.clear();
+        if (!this.progressive) {
+            this.style?.remove();
+            this.style = null;
+        }
+        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);
+    if (autoObserve) cssRuntime.observe();
+    return cssRuntime;
+}
+
+export { CSSRuntime, RuntimeSyntaxLayer, initCSSRuntime };