@master/css 2.0.0-alpha.6 → 2.0.0-alpha.60

package/esm/css.js

@@ -0,0 +1,877 @@
+import { defaultConfig } from './config';
+import { init } from './init';
+import { MasterCSSRule } from './rule';
+const selectorSymbols = [',', '.', '#', '[', '!', '*', '>', '+', '~', ':', '@'];
+const vendorPrefixSelectorRegExp = /^::-[a-z]+-/m;
+const hasDocument = typeof document !== 'undefined';
+let STYLE;
+if (hasDocument) {
+    STYLE = document.createElement('style');
+    STYLE.title = 'master';
+}
+const MAX_WIDTH = 'max-width';
+const MIN_WIDTH = 'min-width';
+const ATTRIBUTES = 'attributes';
+const isBrowser = typeof window !== 'undefined';
+const MutationObserver = isBrowser
+    ? window.MutationObserver
+    : Object;
+export default class MasterCSS extends MutationObserver {
+    config;
+    container;
+    static init = init;
+    static defaultConfig = defaultConfig;
+    static instances = [];
+    static root;
+    /**
+     * 全部 sheet 根據目前蒐集到的所有 DOM class 重新 findAndNew
+     */
+    static refresh(config) {
+        for (const eachInstance of this.instances) {
+            eachInstance.refresh(config);
+        }
+    }
+    style;
+    rules = [];
+    ruleOfClass = {};
+    countOfName = {};
+    cache() {
+        this.semantics = [];
+        this.classes = {};
+        this.colorsThemesMap = {};
+        this.relationThemesMap = {};
+        this.relations = {};
+        this.colorNames = [];
+        this.themeNames = [''];
+        this.selectors = {};
+        const { semantics, classes, selectors, themes, colors } = this.config;
+        function escapeString(str) {
+            return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        }
+        if (semantics) {
+            for (const semanticName in semantics) {
+                this.semantics.push([new RegExp('^' + escapeString(semanticName) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm'), semanticName]);
+            }
+        }
+        if (selectors) {
+            for (const [replacedSelectorText, newSelectorText] of Object.entries(selectors)) {
+                const regexp = new RegExp(escapeString(replacedSelectorText) + '(?![a-z-])');
+                for (const eachNewSelectorText of Array.isArray(newSelectorText) ? newSelectorText : [newSelectorText]) {
+                    const vendor = eachNewSelectorText.match(vendorPrefixSelectorRegExp)?.[0] ?? '';
+                    let selectorValues = this.selectors[vendor];
+                    if (!selectorValues) {
+                        selectorValues = this.selectors[vendor] = [];
+                    }
+                    let currentSelectValue = selectorValues.find(([_valueRegexp]) => _valueRegexp === regexp);
+                    if (!currentSelectValue) {
+                        currentSelectValue = [regexp, []];
+                        selectorValues.push(currentSelectValue);
+                    }
+                    currentSelectValue[1].push(eachNewSelectorText);
+                }
+            }
+        }
+        const mergeClasses = (theme, classes) => {
+            if (!classes)
+                return;
+            for (const semanticName in classes) {
+                const className = classes[semanticName];
+                const classNames = Array.isArray(className)
+                    ? className
+                    : className
+                        .replace(/(?:\n(?:\s*))+/g, ' ')
+                        .trim()
+                        .split(' ');
+                if (!(semanticName in this.classes)) {
+                    this.classes[semanticName] = [];
+                }
+                const currentClass = this.classes[semanticName];
+                for (const eachClassName of classNames) {
+                    if (eachClassName in this.relationThemesMap) {
+                        if (theme in this.relationThemesMap[eachClassName]) {
+                            this.relationThemesMap[eachClassName][theme].push(semanticName);
+                        }
+                        else {
+                            this.relationThemesMap[eachClassName][theme] = [semanticName];
+                        }
+                    }
+                    else {
+                        this.relationThemesMap[eachClassName] = { [theme]: [semanticName] };
+                    }
+                    if (!currentClass.includes(eachClassName)) {
+                        currentClass.push(eachClassName);
+                    }
+                }
+            }
+            for (const semanticName in this.relationThemesMap) {
+                this.relations[semanticName] = [];
+                for (const classNames of Object.values(this.relationThemesMap[semanticName])) {
+                    for (const eachClassName of classNames) {
+                        if (!this.relations[semanticName].includes(eachClassName)) {
+                            this.relations[semanticName].push(eachClassName);
+                        }
+                    }
+                }
+            }
+        };
+        const mergeColors = (theme, colors) => {
+            if (!colors)
+                return;
+            for (const colorName in colors) {
+                let levels = colors[colorName];
+                if (typeof levels === 'string') {
+                    levels = { '': levels };
+                }
+                if (colorName in this.colorsThemesMap) {
+                    const levelsThemes = this.colorsThemesMap[colorName];
+                    for (const level in levels) {
+                        const color = levels[level];
+                        if (level in levelsThemes) {
+                            levelsThemes[level][theme] = color;
+                        }
+                        else {
+                            levelsThemes[level] = { [theme]: color };
+                        }
+                    }
+                }
+                else {
+                    this.colorNames.push(colorName);
+                    this.colorsThemesMap[colorName] = Object
+                        .entries(levels)
+                        .reduce((obj, [level, color]) => {
+                        obj[level] = { [theme]: color };
+                        return obj;
+                    }, {});
+                }
+            }
+        };
+        mergeClasses('', classes);
+        mergeColors('', colors);
+        if (themes) {
+            if (Array.isArray(themes)) {
+                this.themeNames.push(...themes);
+            }
+            else {
+                for (const eachTheme in themes) {
+                    const themeValue = themes[eachTheme];
+                    mergeClasses(eachTheme, themeValue.classes);
+                    mergeColors(eachTheme, themeValue.colors);
+                    this.themeNames.push(eachTheme);
+                }
+            }
+        }
+    }
+    semantics;
+    classes;
+    colorsThemesMap;
+    colorNames;
+    themeNames;
+    relationThemesMap;
+    relations;
+    selectors;
+    constructor(config = defaultConfig, container) {
+        super((mutationRecords) => {
+            // console.time('css engine');
+            const correctionOfClassName = {};
+            const attributeMutationRecords = [];
+            const updatedElements = [];
+            const unchangedElements = [];
+            /**
+            * 取得所有深層後代的 class names
+            */
+            const handleClassNameDeeply = (element, remove) => {
+                if (remove) {
+                    element.classList.forEach(removeClassName);
+                }
+                else {
+                    element.classList.forEach(addClassName);
+                }
+                const children = element.children;
+                for (let i = 0; i < children.length; i++) {
+                    const eachChildren = children[i];
+                    if (eachChildren.classList) {
+                        updatedElements.push(eachChildren);
+                        handleClassNameDeeply(eachChildren, remove);
+                    }
+                }
+            };
+            const addClassName = (className) => {
+                if (className in correctionOfClassName) {
+                    correctionOfClassName[className]++;
+                }
+                else {
+                    correctionOfClassName[className] = 1;
+                }
+            };
+            const removeClassName = (className) => {
+                if (className in correctionOfClassName) {
+                    correctionOfClassName[className]--;
+                }
+                else {
+                    correctionOfClassName[className] = -1;
+                }
+            };
+            const handleNodes = (nodes, remove) => {
+                for (let i = 0; i < nodes.length; i++) {
+                    const eachNode = nodes[i];
+                    if (eachNode.classList && !updatedElements.includes(eachNode) && !unchangedElements.includes(eachNode)) {
+                        if (eachNode.isConnected !== remove) {
+                            updatedElements.push(eachNode);
+                            handleClassNameDeeply(eachNode, remove);
+                        }
+                        else {
+                            unchangedElements.push(eachNode);
+                        }
+                    }
+                }
+            };
+            for (let i = 0; i < mutationRecords.length; i++) {
+                const mutationRecord = mutationRecords[i];
+                const { addedNodes, removedNodes, type, target, oldValue } = mutationRecord;
+                if (type === ATTRIBUTES) {
+                    /**
+                     * 防止同樣的 MutationRecord 重複執行
+                     * According to this history,
+                     * MutationObserver was designed to work that way.
+                     * Any call to setAttribute triggers a mutation,
+                     * regardless of whether the value is being changed or set to the current value
+                     */
+                    if (target['className'] === oldValue // prevent same class to execute
+                        || attributeMutationRecords
+                            .find((eachAttributeMutationRecord) => eachAttributeMutationRecord.target === target)) {
+                        continue;
+                    }
+                    else {
+                        /**
+                         * 第一個匹配到的 oldValue 一定是該批變動前的原始狀態值
+                         */
+                        attributeMutationRecords.push(mutationRecord);
+                    }
+                }
+                else {
+                    // 先判斷節點新增或移除
+                    handleNodes(addedNodes, false);
+                    handleNodes(removedNodes, true);
+                }
+            }
+            if (!attributeMutationRecords.length && !Object.keys(correctionOfClassName).length) {
+                // console.timeEnd('css engine');
+                return;
+            }
+            for (const { oldValue, target } of attributeMutationRecords) {
+                /**
+                 * 如果被操作的元素中包含了屬性變更的目標，
+                 * 則將該目標從 existedAttributeMutationTargets 中移除，
+                 * 以防止執行接下來的屬性變更處理
+                 *
+                 * 該批 mutationRecords 中，某個 target 同時有 attribute 及 childList 的變更，
+                 * 則以 childList 節點插入及移除的 target.className 為主
+                 */
+                const updated = updatedElements.includes(target);
+                const classNames = target.classList;
+                const oldClassNames = oldValue ? oldValue.split(' ') : [];
+                if (updated) {
+                    if (target.isConnected) {
+                        continue;
+                    }
+                    else {
+                        for (const oldClassName of oldClassNames) {
+                            if (!classNames.contains(oldClassName)) {
+                                removeClassName(oldClassName);
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (target.isConnected) {
+                        classNames.forEach((className) => {
+                            if (!oldClassNames.includes(className)) {
+                                addClassName(className);
+                            }
+                        });
+                        for (const oldClassName of oldClassNames) {
+                            if (!classNames.contains(oldClassName)) {
+                                removeClassName(oldClassName);
+                            }
+                        }
+                    }
+                    else {
+                        for (const oldClassName of oldClassNames) {
+                            removeClassName(oldClassName);
+                        }
+                    }
+                }
+            }
+            for (const className in correctionOfClassName) {
+                const correction = correctionOfClassName[className];
+                const count = (this.countOfName[className] || 0) + correction;
+                if (count === 0) {
+                    // remove
+                    delete this.countOfName[className];
+                    /**
+                     * class name 從 DOM tree 中被移除，
+                     * 匹配並刪除對應的 rule
+                     */
+                    this.delete(className);
+                }
+                else {
+                    if (!(className in this.countOfName)) {
+                        // add
+                        /**
+                         * 新 class name 被 connected 至 DOM tree，
+                         * 匹配並創建對應的 Rule
+                         */
+                        this.findAndInsert(className);
+                    }
+                    this.countOfName[className] = count;
+                }
+            }
+            // console.timeEnd('css engine');
+        });
+        this.config = config;
+        this.container = container;
+        this.cache();
+        if (!hasDocument) {
+            return;
+        }
+        if (container) {
+            let rootStyle;
+            // @ts-ignore
+            for (let sheet of (container.shadowRoot?.styleSheets || document.styleSheets)) {
+                if (sheet.title === 'master') {
+                    rootStyle = sheet.ownerNode;
+                }
+            }
+            if (rootStyle) {
+                this.style = rootStyle;
+                for (let index = 0; index < this.style.sheet.cssRules.length; index++) {
+                    const getRule = (cssRule) => {
+                        if (cssRule.selectorText) {
+                            const selectorTexts = cssRule.selectorText.split(', ');
+                            const escapedClassNames = selectorTexts[0].split(' ');
+                            for (let i = 0; i < escapedClassNames.length; i++) {
+                                const eachSelectorText = escapedClassNames[i];
+                                if (eachSelectorText[0] === '.') {
+                                    const escapedClassName = eachSelectorText.slice(1);
+                                    let className = '';
+                                    for (let j = 0; j < escapedClassName.length; j++) {
+                                        const char = escapedClassName[j];
+                                        const nextChar = escapedClassName[j + 1];
+                                        if (char === '\\') {
+                                            j++;
+                                            if (nextChar !== '\\') {
+                                                className += nextChar;
+                                                continue;
+                                            }
+                                        }
+                                        else if (selectorSymbols.includes(char)) {
+                                            break;
+                                        }
+                                        className += char;
+                                    }
+                                    if (!(className in this.ruleOfClass) && !(className in this.classes)) {
+                                        const currentRule = this.findAndNew(className);
+                                        if (currentRule)
+                                            return currentRule;
+                                    }
+                                }
+                            }
+                        }
+                        else if (cssRule.cssRules) {
+                            for (let index = 0; index < cssRule.cssRules.length; index++) {
+                                const currentRule = getRule(cssRule.cssRules[index]);
+                                if (currentRule)
+                                    return currentRule;
+                            }
+                        }
+                    };
+                    const rule = getRule(this.style.sheet.cssRules[index]);
+                    if (rule) {
+                        this.rules.push(rule);
+                        this.ruleOfClass[rule.className] = rule;
+                        for (let i = 0; i < rule.natives.length; i++) {
+                            rule.natives[i].cssRule = this.style.sheet.cssRules[index + i];
+                        }
+                        index += rule.natives.length - 1;
+                    }
+                }
+            }
+            else {
+                this.style = STYLE.cloneNode();
+                /** 使用 prepend 而非 append 去降低 rules 類的優先層級，無法強制排在所有 <style> 之後 */
+                this.container?.prepend(this.style);
+            }
+        }
+        MasterCSS.instances.push(this);
+    }
+    observe(target, options = { subtree: true, childList: true }) {
+        if (options.subtree) {
+            /**
+             * 待所有 DOM 結構完成解析後，開始繪製 MasterCSSRule 樣式
+             */
+            target
+                .querySelectorAll('[class]')
+                .forEach((element) => {
+                element.classList.forEach((className) => {
+                    if (className in this.countOfName) {
+                        this.countOfName[className]++;
+                    }
+                    else {
+                        this.countOfName[className] = 1;
+                        this.findAndInsert(className);
+                    }
+                });
+            });
+        }
+        super.observe(target, {
+            ...options,
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ['class'],
+        });
+        return this;
+    }
+    disconnect() {
+        super.disconnect();
+        // @ts-ignore
+        this.ruleOfClass = {};
+        // @ts-ignore
+        this.countOfName = {};
+        this.rules.length = 0;
+        const sheet = this.style.sheet;
+        if (sheet) {
+            for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
+                sheet.deleteRule(i);
+            }
+        }
+    }
+    /**
+     * 尋找匹配的 MasterCSSRule 生成實例
+     */
+    findAndNew(name) {
+        const findAndNewRule = (className) => {
+            if (className in this.ruleOfClass)
+                return this.ruleOfClass[className];
+            for (const EachRule of this.config.Rules) {
+                const matching = EachRule.match(className, this.colorNames);
+                if (matching)
+                    return new EachRule(className, matching, this);
+            }
+            for (const eachSemanticEntry of this.semantics) {
+                if (className.match(eachSemanticEntry[0]))
+                    return new MasterCSSRule(className, { origin: 'semantics', value: eachSemanticEntry[1] }, this);
+            }
+        };
+        return name in this.classes
+            ? this.classes[name]
+                .map(findAndNewRule)
+                .filter(eachRule => eachRule)
+            : findAndNewRule(name);
+    }
+    /**
+     * 根據目前蒐集到的所有 DOM class 重新 findAndNew
+     */
+    refresh(config) {
+        this.config = config;
+        this.cache();
+        if (!this.style) {
+            return;
+        }
+        const element = STYLE.cloneNode();
+        this.style.replaceWith(element);
+        // @ts-ignore
+        this.style = style;
+        this.rules.length = 0;
+        // @ts-ignore
+        this.ruleOfClass = {};
+        /**
+         * 拿當前所有的 classNames 按照最新的 colors, breakpoints, config.Rules 匹配並生成新的 style
+         * 所以 refresh 過後 rules 可能會變多也可能會變少
+         */
+        for (const name in this.countOfName) {
+            this.findAndInsert(name);
+        }
+    }
+    destroy() {
+        const instances = MasterCSS.instances;
+        this.disconnect();
+        instances.splice(instances.indexOf(this), 1);
+        this.style.remove();
+    }
+    /**
+     * 1. where
+     * 2. normal
+     * 3. where selectors
+     * 4. normal selectors
+     * 5. media where
+     * 6. media normal
+     * 7. media selectors
+     * 8. media width where
+     * 9. media width
+     * 10. media width selectors
+     */
+    insert(rule) {
+        if (this.ruleOfClass[rule.className])
+            return;
+        const { validateRule } = this.config;
+        if (validateRule && !validateRule(rule, this)) {
+            return;
+        }
+        let index;
+        /**
+         * 必須按斷點值遞增，並透過索引插入，
+         * 以實現響應式先後套用的規則
+         * @example <1  <2  <3  ALL  >=1 >=2 >=3
+         * @description
+         */
+        const endIndex = this.rules.length - 1;
+        const { media, order, prioritySelectorIndex, hasWhere, className } = rule;
+        const findPrioritySelectorInsertIndex = (rules, findStartIndex, findEndIndex, ignoreRule) => {
+            let targetRules;
+            let sIndex = 0;
+            let eIndex;
+            // 1. 找尋目標陣列
+            if (findStartIndex) {
+                sIndex = rules.findIndex(findStartIndex);
+            }
+            if (findEndIndex) {
+                eIndex = rules.findIndex(findEndIndex);
+            }
+            if (sIndex === -1) {
+                sIndex = rules.length;
+            }
+            if (eIndex === undefined || eIndex === -1) {
+                eIndex = rules.length;
+            }
+            targetRules = rules.slice(sIndex, eIndex);
+            // 2. 由目標陣列找尋插入點
+            for (let i = 0; i < targetRules.length; i++) {
+                const currentRule = targetRules[i];
+                if (currentRule.prioritySelectorIndex === -1 || ignoreRule && ignoreRule(currentRule))
+                    continue;
+                if (currentRule.prioritySelectorIndex < prioritySelectorIndex
+                    || currentRule.prioritySelectorIndex === prioritySelectorIndex
+                        && (hasWhere && !currentRule.hasWhere
+                            || currentRule.order >= order))
+                    return sIndex + i;
+            }
+            return sIndex + targetRules.length;
+        };
+        if (media) {
+            const mediaStartIndex = this.rules.findIndex(eachRule => eachRule.media);
+            if (mediaStartIndex !== -1) {
+                const maxWidthFeature = media.features[MAX_WIDTH];
+                const minWidthFeature = media.features[MIN_WIDTH];
+                if (maxWidthFeature && minWidthFeature) {
+                    /**
+                     * 範圍越小 ( 越限定 越侷限 ) 越優先，
+                     * 按照範圍 max-width - min-width 遞減排序
+                     * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
+                     * 並插入在該 rule 之後，讓自己優先被套用
+                     */
+                    const range = maxWidthFeature.value - minWidthFeature.value;
+                    for (let i = endIndex; i >= mediaStartIndex; i--) {
+                        index = i;
+                        const eachRule = this.rules[i];
+                        const eachMedia = eachRule.media;
+                        const eachMaxWidthFeature = eachMedia.features[MAX_WIDTH];
+                        const eachMinWidthFeature = eachMedia.features[MIN_WIDTH];
+                        if (!eachMaxWidthFeature || !eachMinWidthFeature) {
+                            index++;
+                            break;
+                        }
+                        const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
+                        if (eachRange === range) {
+                            if (hasWhere !== eachRule.hasWhere)
+                                continue;
+                            if (prioritySelectorIndex !== -1) {
+                                const sameRangeRules = [this.rules[i]];
+                                for (let j = i - 1; j >= mediaStartIndex; j--) {
+                                    const currentMediaRule = this.rules[j];
+                                    if (currentMediaRule.hasWhere !== hasWhere)
+                                        break;
+                                    const currentMedia = currentMediaRule.media;
+                                    const currentMaxWidthFeature = currentMedia.features[MAX_WIDTH];
+                                    const currentMinWidthFeature = currentMedia.features[MIN_WIDTH];
+                                    if (!currentMaxWidthFeature
+                                        || !currentMinWidthFeature
+                                        || (currentMaxWidthFeature.value - currentMinWidthFeature.value !== eachRange))
+                                        break;
+                                    sameRangeRules.unshift(this.rules[j]);
+                                }
+                                index = findPrioritySelectorInsertIndex(this.rules, eachRule => eachRule.media && eachRule.prioritySelectorIndex !== -1 && eachRule.media.features[MIN_WIDTH] && eachRule.media.features[MAX_WIDTH]);
+                            }
+                            break;
+                        }
+                        else if (eachRange > range) {
+                            break;
+                        }
+                    }
+                }
+                else if (minWidthFeature) {
+                    /**
+                     * find 第一個所遇到同樣 feature 且值比自己大的 rule，
+                     * 並插入在該 rule 之後，讓自己優先被套用
+                     */
+                    for (let i = mediaStartIndex; i <= endIndex; i++) {
+                        index = i;
+                        const eachRule = this.rules[i];
+                        const eachMedia = eachRule.media;
+                        const eachMaxWidthFeature = eachMedia.features[MAX_WIDTH];
+                        const eachMinWidthFeature = eachMedia.features[MIN_WIDTH];
+                        if (eachMaxWidthFeature) {
+                            /**
+                             * 永遠插入在 range feature 前
+                             */
+                            if (eachMinWidthFeature) {
+                                break;
+                            }
+                            else {
+                                continue;
+                            }
+                        }
+                        const value = eachMinWidthFeature?.value;
+                        if (value === minWidthFeature.value) {
+                            if (!hasWhere && eachRule.hasWhere) {
+                                index++;
+                                continue;
+                            }
+                            if (prioritySelectorIndex !== -1) {
+                                index = findPrioritySelectorInsertIndex(this.rules, eachRule => eachRule.media, eachRule => eachRule.media && eachRule.prioritySelectorIndex !== -1 && eachRule.media.features[MIN_WIDTH] && eachRule.media.features[MAX_WIDTH], eachRule => !eachRule.media.features[MIN_WIDTH] && !eachRule.media.features[MAX_WIDTH]);
+                            }
+                            else {
+                                for (let j = i; j <= endIndex; j++) {
+                                    const currentMediaRule = this.rules[j];
+                                    const currentMedia = currentMediaRule.media;
+                                    const currentMinWidthFeature = currentMedia.features[MIN_WIDTH];
+                                    const currentMaxWidthFeature = currentMedia.features[MAX_WIDTH];
+                                    if (currentMaxWidthFeature)
+                                        continue;
+                                    if (currentMediaRule.hasWhere !== hasWhere
+                                        || currentMinWidthFeature.value !== value
+                                        || currentMediaRule.order >= order)
+                                        break;
+                                    index = j + 1;
+                                }
+                            }
+                            break;
+                        }
+                        else if (value > minWidthFeature.value) {
+                            break;
+                        }
+                        else {
+                            index++;
+                        }
+                    }
+                }
+                else if (maxWidthFeature) {
+                    /**
+                     * find 第一個所遇到同樣 feature 且值比自己大的 rule，
+                     * 並插入在該 rule 之後，讓自己優先被套用
+                     */
+                    for (let i = endIndex; i >= mediaStartIndex; i--) {
+                        index = i;
+                        const eachRule = this.rules[i];
+                        const eachMedia = eachRule.media;
+                        const eachMaxWidthFeature = eachMedia.features[MAX_WIDTH];
+                        const eachMinWidthFeature = eachMedia.features[MIN_WIDTH];
+                        if (eachMinWidthFeature) {
+                            /**
+                             * 永遠插入在 range feature 前
+                             */
+                            continue;
+                        }
+                        const value = eachMaxWidthFeature?.value;
+                        if (!value || value > maxWidthFeature.value) {
+                            index++;
+                            break;
+                        }
+                        else if (value === maxWidthFeature.value) {
+                            if (hasWhere && !eachRule.hasWhere)
+                                continue;
+                            if (prioritySelectorIndex !== -1) {
+                                index = findPrioritySelectorInsertIndex(this.rules, eachRule => eachRule.media, eachRule => eachRule.media && eachRule.prioritySelectorIndex !== -1 && eachRule.media.features[MIN_WIDTH] && eachRule.media.features[MAX_WIDTH], eachRule => !eachRule.media.features[MIN_WIDTH] && !eachRule.media.features[MAX_WIDTH]);
+                            }
+                            else {
+                                const sameRangeRules = [this.rules[i]];
+                                for (let j = i - 1; j >= mediaStartIndex; j--) {
+                                    const currentMediaRule = this.rules[j];
+                                    const currentMedia = currentMediaRule.media;
+                                    const currentMinWidthFeature = currentMedia.features[MIN_WIDTH];
+                                    const currentMaxWidthFeature = currentMedia.features[MAX_WIDTH];
+                                    if (!currentMinWidthFeature
+                                        && (!currentMaxWidthFeature
+                                            || currentMaxWidthFeature.value !== value
+                                            || currentMediaRule.hasWhere !== hasWhere))
+                                        break;
+                                    sameRangeRules.unshift(currentMediaRule);
+                                }
+                                for (let j = 0; j < sameRangeRules.length; j++) {
+                                    const currentMediaRule = sameRangeRules[j];
+                                    if (currentMediaRule.media.features[MIN_WIDTH])
+                                        continue;
+                                    if (currentMediaRule.order >= order)
+                                        break;
+                                    index = i - sameRangeRules.length + 2 + j;
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+            /**
+             * 如果找不到目標位置則插在最後面
+             */
+            if (index === undefined) {
+                if (mediaStartIndex === -1) {
+                    // 無任何 media 時，優先級最高
+                    index = endIndex + 1;
+                }
+                else if (prioritySelectorIndex !== -1) {
+                    // 含有優先 selector
+                    index = mediaStartIndex +
+                        findPrioritySelectorInsertIndex(this.rules.slice(mediaStartIndex), undefined, eachRule => eachRule.media.features[MAX_WIDTH] || eachRule.media.features[MIN_WIDTH]);
+                }
+                else if (hasWhere) {
+                    // 不含優先 selector，且含有 where，優先級最低
+                    let i = mediaStartIndex;
+                    for (; i < this.rules.length; i++) {
+                        const eachRule = this.rules[i];
+                        if (eachRule.prioritySelectorIndex !== -1 || !eachRule.hasWhere || eachRule.order >= order) {
+                            index = i;
+                            break;
+                        }
+                    }
+                    if (index === undefined) {
+                        index = i;
+                    }
+                }
+                else {
+                    // 不含優先 selector，且不含有 where，優先級緊接非 min-width / max-width 的 where 之後
+                    for (let i = mediaStartIndex; i <= endIndex; i++) {
+                        index = i;
+                        const eachRule = this.rules[i];
+                        const eachMedia = eachRule.media;
+                        if (eachRule.prioritySelectorIndex !== -1 || eachMedia.features[MAX_WIDTH] || eachMedia.features[MIN_WIDTH])
+                            break;
+                        if (eachRule.hasWhere) {
+                            index++;
+                        }
+                        else if (eachRule.order >= order) {
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            if (prioritySelectorIndex === -1) {
+                // 不含優先 selector
+                if (hasWhere) {
+                    // 含有 where，優先級最低
+                    index = this.rules.findIndex(eachRule => !eachRule.hasWhere
+                        || eachRule.media
+                        || eachRule.prioritySelectorIndex !== -1
+                        || eachRule.order >= order);
+                    if (index === -1) {
+                        index = endIndex + 1;
+                    }
+                }
+                else {
+                    // 不含 where，優先級緊接 where 之後
+                    let i = 0;
+                    for (; i < this.rules.length; i++) {
+                        const eachRule = this.rules[i];
+                        if (eachRule.media || !eachRule.hasWhere && (eachRule.order >= order || eachRule.prioritySelectorIndex !== -1)) {
+                            index = i;
+                            break;
+                        }
+                    }
+                    if (index === undefined) {
+                        index = i;
+                    }
+                }
+            }
+            else {
+                // 含有優先 selector
+                index = findPrioritySelectorInsertIndex(this.rules, undefined, eachRule => eachRule.media);
+            }
+        }
+        this.rules.splice(index, 0, rule);
+        this.ruleOfClass[className] = rule;
+        // 只在瀏覽器端運行
+        if (this.style) {
+            try {
+                const sheet = this.style.sheet;
+                let cssRuleIndex = 0;
+                const previousRule = this.rules[index - 1];
+                if (previousRule) {
+                    const lastNativeCssRule = previousRule.natives[previousRule.natives.length - 1].cssRule;
+                    for (let i = 0; i < sheet.cssRules.length; i++) {
+                        if (sheet.cssRules[i] === lastNativeCssRule) {
+                            cssRuleIndex = i + 1;
+                            break;
+                        }
+                    }
+                }
+                for (const eachNative of rule.natives) {
+                    sheet.insertRule(eachNative.text, cssRuleIndex);
+                    eachNative.cssRule = sheet.cssRules[cssRuleIndex++];
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+    }
+    delete(className) {
+        /**
+         * class name 從 DOM tree 中被移除，
+         * 匹配並刪除對應的 rule
+         */
+        const sheet = this.style.sheet;
+        const deleteRule = (name) => {
+            const rule = this.ruleOfClass[name];
+            if (!rule
+                || name in this.relations && this.relations[name].some(eachClassName => eachClassName in this.countOfName))
+                return;
+            const firstNative = rule.natives[0];
+            for (let index = 0; index < sheet.cssRules.length; index++) {
+                const eachCssRule = sheet.cssRules[index];
+                if (eachCssRule === firstNative.cssRule) {
+                    for (let i = 0; i < rule.natives.length; i++) {
+                        sheet.deleteRule(index);
+                    }
+                    this.rules.splice(this.rules.indexOf(rule), 1);
+                    delete this.ruleOfClass[className];
+                    break;
+                }
+            }
+        };
+        if (className in this.classes) {
+            for (const eachClassName of this.classes[className]) {
+                if (!(eachClassName in this.countOfName)) {
+                    deleteRule(eachClassName);
+                }
+            }
+        }
+        else {
+            deleteRule(className);
+        }
+    }
+    findAndInsert(className) {
+        const rule = this.findAndNew(className);
+        if (Array.isArray(rule)) {
+            for (const eachRule of rule) {
+                this.insert(eachRule);
+            }
+        }
+        else if (rule) {
+            this.insert(rule);
+        }
+    }
+}
+if (isBrowser) {
+    window.MasterCSS = MasterCSS;
+}