@master/css 2.0.0-rc.57 → 2.0.0-rc.59

package/dist/core.mjs

@@ -3,10 +3,10 @@ import { config } from './config/index.mjs';
 import hexToRgb from './utils/hex-to-rgb.mjs';
 import { flattenObject } from './utils/flatten-object.mjs';
 import extendConfig from './utils/extend-config.mjs';
-import SyntaxLayer from './syntax-layer.mjs';
 import { Rule } from './rule.mjs';
 import SyntaxRuleType from './syntax-rule-type.mjs';
 import Layer from './layer.mjs';
+import SyntaxLayer from './syntax-layer.mjs';
 import NonLayer from './non-layer.mjs';
 import registerGlobal from './register-global.mjs';
 
@@ -15,7 +15,6 @@ class MasterCSS {
     static config = config;
     definedRules;
     config;
-    classCounts;
     layerStatementRule;
     rules;
     animationsNonLayer;
@@ -24,25 +23,14 @@ class MasterCSS {
     presetLayer;
     componentsLayer;
     generalLayer;
-    get text() {
-        return this.rules.sort((a, b)=>{
-            const order = [
-                'layer-statement',
-                'base',
-                'theme',
-                'preset',
-                'components',
-                'general'
-            ];
-            const indexA = order.indexOf(a.name) === -1 ? Infinity : order.indexOf(a.name);
-            const indexB = order.indexOf(b.name) === -1 ? Infinity : order.indexOf(b.name);
-            return indexA - indexB;
-        }).map(({ text })=>text).join('');
-    }
+    components;
+    selectors;
+    variables;
+    at;
+    animations;
     constructor(customConfig){
         this.customConfig = customConfig;
         this.definedRules = [];
-        this.classCounts = new Map();
         this.layerStatementRule = new Rule('layer-statement', [
             {
                 text: '@layer base,theme,preset,components,general;'
@@ -57,15 +45,35 @@ class MasterCSS {
         this.presetLayer = new SyntaxLayer('preset', this);
         this.componentsLayer = new SyntaxLayer('components', this);
         this.generalLayer = new SyntaxLayer('general', this);
+        this.components = new Map();
+        this.selectors = new Map();
+        this.variables = new Map();
+        this.at = new Map();
+        this.animations = new Map();
         this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
         this.resolve();
     }
+    get text() {
+        return this.rules.sort((a, b)=>{
+            const order = [
+                'layer-statement',
+                'base',
+                'theme',
+                'preset',
+                'components',
+                'general'
+            ];
+            const indexA = order.indexOf(a.name) === -1 ? Infinity : order.indexOf(a.name);
+            const indexB = order.indexOf(b.name) === -1 ? Infinity : order.indexOf(b.name);
+            return indexA - indexB;
+        }).map(({ text })=>text).join('');
+    }
     resolve() {
-        this.components = {};
-        this.selectors = {};
-        this.variables = {};
-        this.at = {};
-        this.animations = {};
+        this.components.clear();
+        this.selectors.clear();
+        this.variables.clear();
+        this.at.clear();
+        this.animations.clear();
         this.definedRules.length = 0;
         const colorVariableNames = {
             current: undefined,
@@ -85,9 +93,9 @@ class MasterCSS {
                     eachResolvedSelectorText
                 ]){
                     const vendor = eachNewSelectorText.match(/^:(?::)?-(webkit|moz|ms|o)-/m)?.[1] ?? '';
-                    let selectorValues = this.selectors[vendor];
+                    let selectorValues = this.selectors.get(vendor);
                     if (!selectorValues) {
-                        selectorValues = this.selectors[vendor] = [];
+                        this.selectors.set(vendor, selectorValues = []);
                     }
                     let currentSelectValue = selectorValues.find(([_valueRegexp])=>_valueRegexp === regexp);
                     if (!currentSelectValue) {
@@ -102,7 +110,7 @@ class MasterCSS {
             }
         }
         if (variables) {
-            const unexecutedAliasVariable = {};
+            const aliasVariableModeResolvers = new Map;
             const resolveVariable = (variableDefinition, name, mode)=>{
                 if (variableDefinition === undefined || variableDefinition === null) return;
                 const addVariable = (name, variable, replacedMode, alpha)=>{
@@ -126,12 +134,12 @@ class MasterCSS {
                     /**
                      * resolve `variables.screen-*` to `at.*`
                      */ if (variable.name.startsWith('screen-') && variable.type === 'number') {
-                        this.at[variable.name.slice(7)] = variable.value;
+                        this.at.set(variable.name.slice(7), variable.value);
                     }
                     const currentMode = replacedMode ?? mode;
                     if (currentMode !== undefined) {
-                        if (Object.prototype.hasOwnProperty.call(this.variables, flatName)) {
-                            const foundVariable = this.variables[flatName];
+                        const foundVariable = this.variables.get(flatName);
+                        if (foundVariable) {
                             if (currentMode) {
                                 if (!foundVariable.modes) {
                                     foundVariable.modes = {};
@@ -157,13 +165,13 @@ class MasterCSS {
                                 if (variable.type === 'color') {
                                     newVariable.space = variable.space;
                                 }
-                                this.variables[flatName] = newVariable;
+                                this.variables.set(flatName, newVariable);
                             } else {
-                                this.variables[flatName] = variable;
+                                this.variables.set(flatName, variable);
                             }
                         }
                     } else {
-                        this.variables[flatName] = variable;
+                        this.variables.set(flatName, variable);
                     }
                 };
                 if (typeof variableDefinition === 'object') {
@@ -201,19 +209,21 @@ class MasterCSS {
                     const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
                     const flatName = name.join('-');
                     if (aliasResult) {
-                        if (!Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, flatName)) {
-                            unexecutedAliasVariable[flatName] = {};
+                        let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
+                        if (!aliasVariableModeResolver) {
+                            aliasVariableModeResolvers.set(flatName, aliasVariableModeResolver = {});
                         }
-                        unexecutedAliasVariable[flatName][mode] = ()=>{
-                            delete unexecutedAliasVariable[flatName][mode];
+                        aliasVariableModeResolver[mode] = ()=>{
+                            delete aliasVariableModeResolver[mode];
                             const [alias, aliasMode] = aliasResult[1].split('@');
                             if (alias) {
-                                if (Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, alias)) {
-                                    for (const mode of Object.keys(unexecutedAliasVariable[alias])){
-                                        unexecutedAliasVariable[alias][mode]?.();
+                                const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(alias);
+                                if (eachAliasModeVariableResolver) {
+                                    for (const mode of Object.keys(eachAliasModeVariableResolver)){
+                                        eachAliasModeVariableResolver[mode]?.();
                                     }
                                 }
-                                const aliasVariable = this.variables[alias];
+                                const aliasVariable = this.variables.get(alias);
                                 if (aliasVariable) {
                                     if (aliasMode === undefined && aliasVariable.modes) {
                                         addVariable(name, {
@@ -282,18 +292,22 @@ class MasterCSS {
                 ]);
             }
             // todo: address to the target variable
-            for (const name of Object.keys(unexecutedAliasVariable)){
-                for (const mode of Object.keys(unexecutedAliasVariable[name])){
-                    unexecutedAliasVariable[name][mode]?.();
+            aliasVariableModeResolvers.forEach((aliasVariableModeResolver)=>{
+                for (const mode of Object.keys(aliasVariableModeResolver)){
+                    aliasVariableModeResolver[mode]?.();
                 }
-            }
+            });
         }
         if (at) {
-            Object.assign(this.at, flattenObject(at));
+            const resolvedAt = flattenObject(at);
+            for(const eachAt in resolvedAt){
+                this.at.set(eachAt, resolvedAt[eachAt]);
+            }
         }
         if (animations) {
             for(const animationName in animations){
-                const eachAnimation = this.animations[animationName] = {};
+                const eachAnimation = {};
+                this.animations.set(animationName, eachAnimation);
                 const eachKeyframes = animations[animationName];
                 for(const eachKeyframeValue in eachKeyframes){
                     const newValueByPropertyName = eachAnimation[eachKeyframeValue] = {};
@@ -307,8 +321,9 @@ class MasterCSS {
         const flattedStyles = components ? flattenObject(components) : {};
         const utilityNames = Object.keys(flattedStyles);
         const handleUtilityName = (utilityName)=>{
-            if (Object.prototype.hasOwnProperty.call(this.components, utilityName)) return;
-            const currentClass = this.components[utilityName] = [];
+            if (this.components.has(utilityName)) return;
+            const currentClass = [];
+            this.components.set(utilityName, currentClass);
             const className = flattedStyles[utilityName];
             if (!className) return;
             const classNames = className.replace(/(?:\n(?:\s*))+/g, ' ').trim().split(' ');
@@ -320,9 +335,8 @@ class MasterCSS {
                 };
                 if (utilityNames.includes(eachClassName)) {
                     handleUtilityName(eachClassName);
-                    for (const parentClassName of this.components[eachClassName]){
-                        handle(parentClassName);
-                    }
+                    const componentClasses = this.components.get(eachClassName);
+                    componentClasses?.forEach(handle);
                 } else {
                     handle(eachClassName);
                 }
@@ -380,12 +394,11 @@ class MasterCSS {
                 }
                 // todo: 不可使用 startsWith 判斷，應改為更精準的從 config.variables 取得目標變數群組，但 config.variables 中的值還沒被 resolve 像是 Array
                 const addResolvedVariables = (groupName)=>{
-                    for(const eachVariableName in this.variables){
-                        const eachVariable = this.variables[eachVariableName];
+                    this.variables.forEach((eachVariable)=>{
                         if (eachVariable.group === groupName) {
                             syntax.variables[eachVariable.key] = eachVariable;
                         }
-                    }
+                    });
                 };
                 // 1. custom `config.rules[id].variables`
                 if (eachSyntaxRuleDefinition.variables) {
@@ -441,8 +454,8 @@ class MasterCSS {
                 }
             });
         }
-        for(const utilityName in this.components){
-            const syntaxRulesByStateToken = this.components[utilityName].map((eachSyntax)=>this.create(eachSyntax)).filter((eachSyntax)=>eachSyntax?.text).reduce((obj, eachSyntaxRule)=>{
+        this.components.forEach((componentClasses, componentClass)=>{
+            const syntaxRulesByStateToken = componentClasses.map((eachSyntax)=>this.create(eachSyntax)).filter((eachSyntax)=>eachSyntax?.text).reduce((obj, eachSyntaxRule)=>{
                 if (eachSyntaxRule.stateToken in obj) {
                     obj[eachSyntaxRule.stateToken].push(eachSyntaxRule);
                 } else {
@@ -452,11 +465,11 @@ class MasterCSS {
                 }
                 return obj;
             }, {});
-            this.components[utilityName] = Object.keys(syntaxRulesByStateToken).map((stateToken)=>{
+            this.components.set(componentClass, Object.keys(syntaxRulesByStateToken).map((stateToken)=>{
                 const syntaxRules = syntaxRulesByStateToken[stateToken];
                 return syntaxRules.length === 1 ? syntaxRules[0].name : '{' + syntaxRulesByStateToken[stateToken].map((eachSyntaxRule)=>eachSyntaxRule.name.slice(0, eachSyntaxRule.name.length - eachSyntaxRule.stateToken.length)).join(';') + '}' + stateToken;
-            });
-        }
+            }));
+        });
     }
     /**
      * Match check if Master CSS syntax
@@ -494,27 +507,29 @@ class MasterCSS {
      * @returns SyntaxRule[]
      */ generate(className, mode) {
         let syntaxRules = [];
-        if (Object.prototype.hasOwnProperty.call(this.components, className)) {
-            syntaxRules = this.components[className].map((eachSyntax)=>this.create(eachSyntax, className, mode));
+        const componentClasses = this.components.get(className);
+        if (componentClasses) {
+            componentClasses.forEach((eachSyntax)=>{
+                const syntaxRule = this.create(eachSyntax, className, mode);
+                if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+            });
         } else {
             const atIndex = className.indexOf('@');
             if (atIndex !== -1) {
                 const name = className.slice(0, atIndex);
-                if (Object.prototype.hasOwnProperty.call(this.components, name)) {
+                const componentClasses = this.components.get(name);
+                if (componentClasses) {
                     const atToken = className.slice(atIndex);
-                    syntaxRules = this.components[name].map((eachSyntax)=>this.create(eachSyntax + atToken, className, mode));
-                } else {
-                    syntaxRules = [
-                        this.create(className, undefined, mode)
-                    ];
+                    componentClasses.forEach((eachSyntax)=>{
+                        const syntaxRule = this.create(eachSyntax + atToken, className, mode);
+                        if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+                    });
                 }
-            } else {
-                syntaxRules = [
-                    this.create(className, undefined, mode)
-                ];
             }
+            const syntaxRule = this.create(className, undefined, mode);
+            if (syntaxRule?.text) syntaxRules.push(syntaxRule);
         }
-        return syntaxRules.filter((eachSyntax)=>eachSyntax?.text);
+        return syntaxRules;
     }
     generateVendorSelectors(selectorText) {
         const vendorSelectors = {};
@@ -562,14 +577,15 @@ class MasterCSS {
             return selectors;
         };
         const transformedSelectors = [];
-        if ('' in this.selectors) {
-            transformSelector(selectorText, this.selectors[''], transformedSelectors, true);
+        const selectorValues = this.selectors.get('');
+        if (selectorValues) {
+            transformSelector(selectorText, selectorValues, transformedSelectors, true);
         } else {
             transformedSelectors.push(selectorText);
         }
         const unspacedVendorSelectors = {};
-        for (const [vendor, selectorValues] of Object.entries(this.selectors)){
-            if (!vendor) continue;
+        this.selectors.forEach((selectorValues, vendor)=>{
+            if (!vendor) return;
             const newUnspacedVendorSelectors = [];
             for (const eachTransformedSelector of transformedSelectors){
                 transformSelector(eachTransformedSelector, selectorValues, newUnspacedVendorSelectors, false);
@@ -577,7 +593,7 @@ class MasterCSS {
             if (newUnspacedVendorSelectors.length) {
                 unspacedVendorSelectors[vendor] = newUnspacedVendorSelectors;
             }
-        }
+        });
         const insertVendorSelectors = (vendor, selectorTexts)=>{
             const groupedSelectorTexts = selectorTexts.reduce((arr, eachSuffixSelector)=>{
                 arr.push(...spacedSelectorToken(eachSuffixSelector));
@@ -614,37 +630,26 @@ class MasterCSS {
      * @param selectorText
      */ createFromSelectorText(selectorText) {
         const selectorTextSplits = selectorText.split(' ');
+        const stopChars = /[.#\[!\*>+~:,\s]/;
         for(let i = 0; i < selectorTextSplits.length; i++){
             const eachField = selectorTextSplits[i];
             const modeSelector = this.getModeSelector(eachField);
             if (i === 0 && eachField === modeSelector) continue;
-            if (eachField[0] === '.') {
+            if (eachField.startsWith('.')) {
                 const eachFieldName = eachField.slice(1);
                 let className = '';
-                for(let l = 0; l < eachFieldName.length; l++){
+                let l = 0;
+                while(l < eachFieldName.length){
                     const char = eachFieldName[l];
                     const nextChar = eachFieldName[l + 1];
-                    if (char === '\\') {
-                        l++;
-                        if (nextChar !== '\\') {
-                            className += nextChar;
-                            continue;
-                        }
-                    } else if ([
-                        '.',
-                        '#',
-                        '[',
-                        '!',
-                        '*',
-                        '>',
-                        '+',
-                        '~',
-                        ':',
-                        ','
-                    ].includes(char)) {
-                        break;
+                    if (char === '\\' && nextChar) {
+                        className += nextChar;
+                        l += 2;
+                        continue;
                     }
+                    if (stopChars.test(char)) break;
                     className += char;
+                    l++;
                 }
                 const syntaxRules = this.generate(className);
                 if (syntaxRules.length) return syntaxRules;
@@ -663,12 +668,6 @@ class MasterCSS {
         // @ts-ignore
         this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
         this.resolve();
-        /**
-         * 拿當前所有的 classNames 按照最新的 colors, config.rules 匹配並生成新的 style
-         * 所以 refresh 過後 rules 可能會變多也可能會變少
-         */ this.classCounts.forEach((_, className)=>{
-            this.add(className);
-        });
         return this;
     }
     reset() {
@@ -682,7 +681,6 @@ class MasterCSS {
     }
     destroy() {
         this.reset();
-        this.classCounts.clear();
         return this;
     }
     add(...classNames) {
@@ -696,19 +694,21 @@ class MasterCSS {
          * class name 從 DOM tree 中被移除，
          * 匹配並刪除對應的 rule
          */ for (const className of classNames){
-            if (Object.prototype.hasOwnProperty.call(this.components, className)) {
-                for (const eachSyntax of this.components[className]){
-                    this.componentsLayer.delete(className + ' ' + eachSyntax);
-                }
+            const componentClasses = this.components.get(className);
+            if (componentClasses) {
+                componentClasses.forEach((componentClass)=>{
+                    this.componentsLayer.delete(className + ' ' + componentClass);
+                });
             } else {
                 const atIndex = className.indexOf('@');
                 if (atIndex !== -1) {
                     const name = className.slice(0, atIndex);
-                    if (Object.prototype.hasOwnProperty.call(this.components, name)) {
+                    const componentClasses = this.components.get(name);
+                    if (componentClasses) {
                         const atToken = className.slice(atIndex);
-                        for (const eachSyntax of this.components[name]){
-                            this.componentsLayer.delete(eachSyntax + atToken + ' ' + className);
-                        }
+                        componentClasses.forEach((componentClass)=>{
+                            this.componentsLayer.delete(componentClass + atToken + ' ' + className);
+                        });
                     } else {
                         this.generalLayer.delete(className);
                     }