@master/css 2.0.0-alpha.69 → 2.0.0-alpha.70

package/esm/css.js

@@ -1,5 +1,5 @@
-import defaultConfig from './config';
-import { init } from './init';
+import { defaultConfig } from './config';
+import { init } from './apis/init';
 import { MasterCSSRule } from './rule';
 const selectorSymbols = [',', '.', '#', '[', '!', '*', '>', '+', '~', ':', '@'];
 const vendorPrefixSelectorRegExp = /^::-[a-z]+-/m;
@@ -18,7 +18,7 @@ const MutationObserver = isBrowser
     : Object;
 export default class MasterCSS extends MutationObserver {
     config;
-    container;
+    root;
     static init = init;
     static defaultConfig = defaultConfig;
     static instances = [];
@@ -34,155 +34,8 @@ export default class MasterCSS extends MutationObserver {
     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 semanticNames = [
-            ...(classes ? Object.keys(classes) : []),
-            ...((themes && !Array.isArray(themes))
-                ? Object.entries(themes).flatMap(([_, { classes }]) => classes ? Object.keys(classes) : [])
-                : [])
-        ];
-        const handleSemanticName = (semanticName) => {
-            if (semanticName in this.classes)
-                return;
-            const currentClass = this.classes[semanticName] = [];
-            const handleClassNames = (theme, className) => {
-                if (!className)
-                    return;
-                const classNames = Array.isArray(className)
-                    ? className
-                    : className
-                        .replace(/(?:\n(?:\s*))+/g, ' ')
-                        .trim()
-                        .split(' ');
-                for (const eachClassName of classNames) {
-                    const handle = (className) => {
-                        if (className in this.relationThemesMap) {
-                            if (theme in this.relationThemesMap[className]) {
-                                this.relationThemesMap[className][theme].push(semanticName);
-                            }
-                            else {
-                                this.relationThemesMap[className][theme] = [semanticName];
-                            }
-                        }
-                        else {
-                            this.relationThemesMap[className] = { [theme]: [semanticName] };
-                        }
-                        if (!currentClass.includes(className)) {
-                            currentClass.push(className);
-                        }
-                    };
-                    if (semanticNames.includes(eachClassName)) {
-                        handleSemanticName(eachClassName);
-                        for (const parentClassName of this.classes[eachClassName]) {
-                            handle(parentClassName);
-                        }
-                    }
-                    else {
-                        handle(eachClassName);
-                    }
-                }
-            };
-            handleClassNames('', classes?.[semanticName]);
-            if (themes && !Array.isArray(themes)) {
-                for (const [eachTheme, { classes }] of Object.entries(themes)) {
-                    handleClassNames(eachTheme, classes?.[semanticName]);
-                }
-            }
-        };
-        for (const eachSemanticName of semanticNames) {
-            handleSemanticName(eachSemanticName);
-        }
-        for (const className in this.relationThemesMap) {
-            const currentRelation = this.relations[className] = [];
-            for (const semanticNames of Object.values(this.relationThemesMap[className])) {
-                for (const eachSemanticName of semanticNames) {
-                    if (!currentRelation.includes(eachSemanticName)) {
-                        currentRelation.push(eachSemanticName);
-                    }
-                }
-            }
-        }
-        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;
-                    }, {});
-                }
-            }
-        };
-        mergeColors('', colors);
-        if (themes) {
-            if (Array.isArray(themes)) {
-                this.themeNames.push(...themes);
-            }
-            else {
-                for (const eachTheme in themes) {
-                    const themeValue = themes[eachTheme];
-                    mergeColors(eachTheme, themeValue.colors);
-                    this.themeNames.push(eachTheme);
-                }
-            }
-        }
-    }
+    countOfClass = {};
+    host;
     semantics;
     classes;
     colorsThemesMap;
@@ -191,7 +44,8 @@ export default class MasterCSS extends MutationObserver {
     relationThemesMap;
     relations;
     selectors;
-    constructor(config = defaultConfig, container) {
+    schemeMQL;
+    constructor(config = defaultConfig, root) {
         super((mutationRecords) => {
             // console.time('css engine');
             const correctionOfClassName = {};
@@ -326,10 +180,10 @@ export default class MasterCSS extends MutationObserver {
             }
             for (const className in correctionOfClassName) {
                 const correction = correctionOfClassName[className];
-                const count = (this.countOfName[className] || 0) + correction;
+                const count = (this.countOfClass[className] || 0) + correction;
                 if (count === 0) {
                     // remove
-                    delete this.countOfName[className];
+                    delete this.countOfClass[className];
                     /**
                      * class name 從 DOM tree 中被移除，
                      * 匹配並刪除對應的 rule
@@ -337,7 +191,7 @@ export default class MasterCSS extends MutationObserver {
                     this.delete(className);
                 }
                 else {
-                    if (!(className in this.countOfName)) {
+                    if (!(className in this.countOfClass)) {
                         // add
                         /**
                          * 新 class name 被 connected 至 DOM tree，
@@ -345,27 +199,28 @@ export default class MasterCSS extends MutationObserver {
                          */
                         this.findAndInsert(className);
                     }
-                    this.countOfName[className] = count;
+                    this.countOfClass[className] = count;
                 }
             }
             // console.timeEnd('css engine');
         });
         this.config = config;
-        this.container = container;
+        this.root = root;
         this.cache();
-        if (!hasDocument) {
-            return;
-        }
-        if (container) {
-            let rootStyle;
+        if (hasDocument && root) {
+            const isDocumentRoot = root === document;
+            this.host = isDocumentRoot ? document.documentElement : root.host;
+            // sync theme
+            this.scheme = this.storageScheme || config.scheme.preference;
+            const container = isDocumentRoot ? document.head : root;
+            const styleSheets = isDocumentRoot ? document.styleSheets : root.styleSheets;
             // @ts-ignore
-            for (let sheet of (container.shadowRoot?.styleSheets || document.styleSheets)) {
+            for (const sheet of styleSheets) {
                 if (sheet.title === 'master') {
-                    rootStyle = sheet.ownerNode;
+                    this.style = sheet.ownerNode;
                 }
             }
-            if (rootStyle) {
-                this.style = rootStyle;
+            if (this.style) {
                 for (let index = 0; index < this.style.sheet.cssRules.length; index++) {
                     const getRule = (cssRule) => {
                         if (cssRule.selectorText) {
@@ -421,31 +276,223 @@ export default class MasterCSS extends MutationObserver {
             else {
                 this.style = STYLE.cloneNode();
                 /** 使用 prepend 而非 append 去降低 rules 類的優先層級，無法強制排在所有 <style> 之後 */
-                this.container?.prepend(this.style);
+                container.prepend(this.style);
             }
         }
         MasterCSS.instances.push(this);
     }
-    observe(target, options = { subtree: true, childList: true }) {
+    get storageScheme() {
+        const { storage } = this.config.scheme;
+        return localStorage.getItem(storage.key);
+    }
+    #scheme;
+    theme;
+    set scheme(scheme) {
+        if (scheme !== this.#scheme) {
+            this.#scheme = scheme;
+            let theme = '';
+            const { storage } = this.config.scheme;
+            if (scheme === 'system') {
+                // 按照系統的主題切換，目前只支援 light dark
+                this.schemeMQL = window.matchMedia('(prefers-color-scheme:dark)');
+                this.schemeMQL.addEventListener('change', this.onSchemeChange);
+                localStorage.removeItem(storage.key);
+                theme = this.schemeMQL.matches ? 'dark' : 'light';
+            }
+            else {
+                this.removeSchemeListener();
+                theme = scheme;
+                if (this.storageScheme !== theme && storage.sync) {
+                    localStorage.setItem(storage.key, theme);
+                }
+            }
+            if (this.theme) {
+                this.host.classList.remove(this.theme);
+            }
+            if (this.host === document.documentElement) {
+                this.host.style.colorScheme = theme;
+            }
+            this.host.classList.add(theme);
+            this.theme = theme;
+        }
+    }
+    removeSchemeListener() {
+        if (this.schemeMQL) {
+            this.schemeMQL.removeEventListener('change', this.onSchemeChange);
+            this.schemeMQL = null;
+        }
+    }
+    onSchemeChange(mediaQueryList) {
+        this.scheme = mediaQueryList.matches ? 'dark' : 'light';
+    }
+    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 semanticNames = [
+            ...(classes ? Object.keys(classes) : []),
+            ...((themes && !Array.isArray(themes))
+                ? Object.entries(themes).flatMap(([_, { classes }]) => classes ? Object.keys(classes) : [])
+                : [])
+        ];
+        const handleSemanticName = (semanticName) => {
+            if (semanticName in this.classes)
+                return;
+            const currentClass = this.classes[semanticName] = [];
+            const handleClassNames = (theme, className) => {
+                if (!className)
+                    return;
+                const classNames = Array.isArray(className)
+                    ? className
+                    : className
+                        .replace(/(?:\n(?:\s*))+/g, ' ')
+                        .trim()
+                        .split(' ');
+                for (const eachClassName of classNames) {
+                    const handle = (className) => {
+                        if (className in this.relationThemesMap) {
+                            if (theme in this.relationThemesMap[className]) {
+                                this.relationThemesMap[className][theme].push(semanticName);
+                            }
+                            else {
+                                this.relationThemesMap[className][theme] = [semanticName];
+                            }
+                        }
+                        else {
+                            this.relationThemesMap[className] = { [theme]: [semanticName] };
+                        }
+                        if (!currentClass.includes(className)) {
+                            currentClass.push(className);
+                        }
+                    };
+                    if (semanticNames.includes(eachClassName)) {
+                        handleSemanticName(eachClassName);
+                        for (const parentClassName of this.classes[eachClassName]) {
+                            handle(parentClassName);
+                        }
+                    }
+                    else {
+                        handle(eachClassName);
+                    }
+                }
+            };
+            handleClassNames('', classes?.[semanticName]);
+            if (themes && !Array.isArray(themes)) {
+                for (const [eachTheme, { classes }] of Object.entries(themes)) {
+                    handleClassNames(eachTheme, classes?.[semanticName]);
+                }
+            }
+        };
+        for (const eachSemanticName of semanticNames) {
+            handleSemanticName(eachSemanticName);
+        }
+        for (const className in this.relationThemesMap) {
+            const currentRelation = this.relations[className] = [];
+            for (const semanticNames of Object.values(this.relationThemesMap[className])) {
+                for (const eachSemanticName of semanticNames) {
+                    if (!currentRelation.includes(eachSemanticName)) {
+                        currentRelation.push(eachSemanticName);
+                    }
+                }
+            }
+        }
+        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;
+                    }, {});
+                }
+            }
+        };
+        mergeColors('', colors);
+        if (themes) {
+            if (Array.isArray(themes)) {
+                this.themeNames.push(...themes);
+            }
+            else {
+                for (const eachTheme in themes) {
+                    const themeValue = themes[eachTheme];
+                    mergeColors(eachTheme, themeValue.colors);
+                    this.themeNames.push(eachTheme);
+                }
+            }
+        }
+    }
+    observe(options = { subtree: true, childList: true }) {
         if (options.subtree) {
             /**
              * 待所有 DOM 結構完成解析後，開始繪製 MasterCSSRule 樣式
              */
-            target
+            this.host
                 .querySelectorAll('[class]')
                 .forEach((element) => {
                 element.classList.forEach((className) => {
-                    if (className in this.countOfName) {
-                        this.countOfName[className]++;
+                    if (className in this.countOfClass) {
+                        this.countOfClass[className]++;
                     }
                     else {
-                        this.countOfName[className] = 1;
+                        this.countOfClass[className] = 1;
                         this.findAndInsert(className);
                     }
                 });
             });
         }
-        super.observe(target, {
+        super.observe(this.root, {
             ...options,
             attributes: true,
             attributeOldValue: true,
@@ -458,7 +505,7 @@ export default class MasterCSS extends MutationObserver {
         // @ts-ignore
         this.ruleOfClass = {};
         // @ts-ignore
-        this.countOfName = {};
+        this.countOfClass = {};
         this.rules.length = 0;
         const sheet = this.style.sheet;
         if (sheet) {
@@ -510,7 +557,7 @@ export default class MasterCSS extends MutationObserver {
          * 拿當前所有的 classNames 按照最新的 colors, breakpoints, config.Rules 匹配並生成新的 style
          * 所以 refresh 過後 rules 可能會變多也可能會變少
          */
-        for (const name in this.countOfName) {
+        for (const name in this.countOfClass) {
             this.findAndInsert(name);
         }
     }
@@ -519,6 +566,7 @@ export default class MasterCSS extends MutationObserver {
         this.disconnect();
         instances.splice(instances.indexOf(this), 1);
         this.style.remove();
+        this.removeSchemeListener();
     }
     /**
      * 1. where
@@ -549,7 +597,6 @@ export default class MasterCSS extends MutationObserver {
         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. 找尋目標陣列
@@ -565,7 +612,7 @@ export default class MasterCSS extends MutationObserver {
             if (eIndex === undefined || eIndex === -1) {
                 eIndex = rules.length;
             }
-            targetRules = rules.slice(sIndex, eIndex);
+            const targetRules = rules.slice(sIndex, eIndex);
             // 2. 由目標陣列找尋插入點
             for (let i = 0; i < targetRules.length; i++) {
                 const currentRule = targetRules[i];
@@ -864,7 +911,7 @@ export default class MasterCSS extends MutationObserver {
         const deleteRule = (name) => {
             const rule = this.ruleOfClass[name];
             if (!rule
-                || name in this.relations && this.relations[name].some(eachClassName => eachClassName in this.countOfName))
+                || name in this.relations && this.relations[name].some(eachClassName => eachClassName in this.countOfClass))
                 return;
             if (rule.natives.length) {
                 const firstNative = rule.natives[0];
@@ -883,7 +930,7 @@ export default class MasterCSS extends MutationObserver {
         };
         if (className in this.classes) {
             for (const eachClassName of this.classes[className]) {
-                if (!(eachClassName in this.countOfName)) {
+                if (!(eachClassName in this.countOfClass)) {
                     deleteRule(eachClassName);
                 }
             }