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

package/dist/syntax-layer.mjs

@@ -1,292 +1,6 @@
+import withSyntaxLayer from './factories/with-syntax-layer.mjs';
 import Layer from './layer.mjs';
-import { Rule } from './rule.mjs';
 
-class SyntaxLayer extends Layer {
-    rules = [];
-    /**
-    * normal
-    * normal selectors
-    * media normal
-    * media selectors
-    * media width
-    * media width selectors
-    */ insert(syntaxRule) {
-        if (this.rules.includes(syntaxRule)) return;
-        let index;
-        /**
-         * 必須按斷點值遞增，並透過索引插入，
-         * 以實現響應式先後套用的規則
-         * @example <1  <2  <3  ALL  >=1 >=2 >=3
-         * @description
-         */ const endIndex = this.rules.length - 1;
-        const { at, atToken, order, priority } = syntaxRule;
-        const findIndex = (startIndex, stopCheck, matchCheck)=>{
-            let i = startIndex;
-            for(; i <= endIndex; i++){
-                const eachSyntaxRule = this.rules[i];
-                if (stopCheck?.(eachSyntaxRule)) return matchCheck ? -1 : i - 1;
-                if (matchCheck?.(eachSyntaxRule)) return i;
-            }
-            return matchCheck ? -1 : i - 1;
-        };
-        let matchStartIndex;
-        let matchEndIndex;
-        if (atToken) {
-            const mediaStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media);
-            if (mediaStartIndex === -1) {
-                index = endIndex + 1;
-            } else {
-                const maxWidthFeature = at.media?.find(({ name })=>name === 'max-width');
-                const minWidthFeature = at.media?.find(({ name })=>name === 'min-width');
-                if (maxWidthFeature || minWidthFeature) {
-                    const mediaWidthStartIndex = this.rules.findIndex((eachSyntaxRule)=>eachSyntaxRule.at?.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
-                    if (mediaWidthStartIndex === -1) {
-                        index = endIndex + 1;
-                    } else {
-                        if (maxWidthFeature && minWidthFeature) {
-                            /**
-                             * 範圍越小 ( 越限定 越侷限 ) 越優先，
-                             * 按照範圍 max-width - min-width 遞減排序
-                             * find 第一個所遇到同樣 feature 且範圍值比自己大的 rule，
-                             * 並插入在該 rule 之後，讓自己優先被套用
-                             */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width'));
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
-                            } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, undefined, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
-                                matchEndIndex = endIndex;
-                            }
-                            if (matchStartIndex !== -1) {
-                                const range = maxWidthFeature.value - minWidthFeature.value;
-                                let i = matchEndIndex;
-                                const endI = matchStartIndex;
-                                matchStartIndex = matchEndIndex + 1;
-                                for(; i >= endI; i--){
-                                    const eachSyntaxRule = this.rules[i];
-                                    const eachMaxWidthFeature = eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width');
-                                    const eachMinWidthFeature = eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width');
-                                    if (!eachMaxWidthFeature || !eachMinWidthFeature) {
-                                        break;
-                                    } else {
-                                        const eachRange = eachMaxWidthFeature.value - eachMinWidthFeature.value;
-                                        if (eachRange < range) {
-                                            matchEndIndex = i - 1;
-                                        } else if (eachRange === range) {
-                                            matchStartIndex = i;
-                                        } else {
-                                            break;
-                                        }
-                                    }
-                                }
-                            }
-                        } else if (minWidthFeature) {
-                            /**
-                             * find 第一個所遇到同樣 feature 且值比自己大的 rule，
-                             * 並插入在該 rule 之後，讓自己優先被套用
-                             */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width'));
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
-                            } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>!eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
-                            }
-                            if (matchStartIndex !== -1) {
-                                for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = (this.rules[i].at.media?.find(({ name })=>name === 'min-width')).value;
-                                    if (value > minWidthFeature.value) {
-                                        matchEndIndex = i - 1;
-                                    } else if (value < minWidthFeature.value) {
-                                        matchStartIndex = i + 1;
-                                        break;
-                                    }
-                                }
-                            }
-                        } else {
-                            /**
-                             * find 第一個所遇到同樣 feature 且值比自己大的 rule，
-                             * 並插入在該 rule 之後，讓自己優先被套用
-                             */ if (priority === -1) {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width'));
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') || eachSyntaxRule.priority !== -1);
-                            } else {
-                                matchStartIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width') && eachSyntaxRule.priority !== -1);
-                                matchEndIndex = findIndex(mediaWidthStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'min-width') && eachSyntaxRule.priority !== -1);
-                            }
-                            if (matchStartIndex !== -1) {
-                                for(let i = matchEndIndex; i >= matchStartIndex; i--){
-                                    const value = (this.rules[i].at.media?.find(({ name })=>name === 'max-width')).value;
-                                    if (value < maxWidthFeature.value) {
-                                        matchEndIndex = i - 1;
-                                    } else if (value > maxWidthFeature.value) {
-                                        matchStartIndex = i + 1;
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                } else {
-                    if (priority === -1) {
-                        matchStartIndex = mediaStartIndex;
-                        matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width') || eachSyntaxRule.priority !== -1);
-                    } else {
-                        matchStartIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'), (eachSyntaxRule)=>eachSyntaxRule.priority !== -1);
-                        matchEndIndex = findIndex(mediaStartIndex, (eachSyntaxRule)=>eachSyntaxRule.at.media?.find(({ name })=>name === 'max-width' || name === 'min-width'));
-                    }
-                }
-            }
-        } else {
-            if (priority === -1) {
-                matchStartIndex = 0;
-                matchEndIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken || eachSyntax.priority !== -1);
-            } else {
-                matchStartIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken, (eachSyntax)=>eachSyntax.priority !== -1);
-                matchEndIndex = findIndex(0, (eachSyntax)=>eachSyntax.atToken);
-            }
-        }
-        if (index === undefined && matchEndIndex !== undefined && matchStartIndex !== undefined) {
-            if (matchStartIndex === -1) {
-                index = matchEndIndex + 1;
-            } else {
-                if (priority === -1) {
-                    for(let i = matchStartIndex; i <= matchEndIndex; i++){
-                        const currentSyntaxRule = this.rules[i];
-                        if (currentSyntaxRule.order >= order) {
-                            index = i;
-                            break;
-                        }
-                    }
-                } else {
-                    for(let i = matchStartIndex; i <= matchEndIndex; i++){
-                        const currentSyntaxRule = this.rules[i];
-                        if (currentSyntaxRule.priority < priority) {
-                            index = i;
-                            break;
-                        } else if (currentSyntaxRule.priority === priority) {
-                            if (currentSyntaxRule.order >= order) {
-                                index = i;
-                                break;
-                            }
-                        } else {
-                            index = i + 1;
-                        }
-                    }
-                }
-                if (index === undefined) {
-                    index = matchEndIndex + 1;
-                }
-            }
-        }
-        super.insert(syntaxRule, index);
-        this.insertVariables(syntaxRule);
-        this.insertAnimations(syntaxRule);
-        syntaxRule.definition.insert?.call(syntaxRule);
-        return index;
-    }
-    delete(key) {
-        const syntaxRule = super.delete(key);
-        if (!syntaxRule) return;
-        if (syntaxRule.variableNames) {
-            for (const eachVariableName of syntaxRule.variableNames){
-                if (!--this.css.themeLayer.usages[eachVariableName]) {
-                    this.css.themeLayer.delete(eachVariableName);
-                    delete this.css.themeLayer.usages[eachVariableName];
-                }
-            }
-        }
-        if (syntaxRule.animationNames) {
-            for (const eachKeyframeName of syntaxRule.animationNames){
-                if (!--this.css.animationsNonLayer.usages[eachKeyframeName]) {
-                    this.css.animationsNonLayer.delete(eachKeyframeName);
-                    delete this.css.animationsNonLayer.usages[eachKeyframeName];
-                }
-            }
-        }
-        syntaxRule.definition.delete?.call(syntaxRule, syntaxRule.name);
-        return syntaxRule;
-    }
-    insertVariables(syntaxRule) {
-        if (syntaxRule.variableNames) {
-            for (const eachVariableName of syntaxRule.variableNames){
-                const variable = this.css.variables[eachVariableName];
-                if (this.css.themeLayer.rules.find(({ name })=>name === eachVariableName)) {
-                    this.css.themeLayer.usages[eachVariableName]++;
-                } else {
-                    const newRule = new Rule(eachVariableName);
-                    const addNative = (mode, _variable)=>{
-                        let isDefaultMode = false;
-                        let preifxCssRuleText;
-                        let selectorText;
-                        let endCurlyBracketCount = 1;
-                        if (mode) {
-                            switch(this.css.config.modes?.[mode]){
-                                case 'media':
-                                    selectorText = ':root';
-                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){${selectorText}`;
-                                    endCurlyBracketCount++;
-                                    break;
-                                case 'host':
-                                    preifxCssRuleText = selectorText = `:host(.${mode})`;
-                                    if (!variable.value && this.css.config.defaultMode === mode) {
-                                        preifxCssRuleText += ',:host';
-                                        isDefaultMode = true;
-                                    }
-                                    break;
-                                case 'class':
-                                    preifxCssRuleText = selectorText = `.${mode}`;
-                                    if (!variable.value && this.css.config.defaultMode === mode) {
-                                        preifxCssRuleText += ',:root';
-                                        isDefaultMode = true;
-                                    }
-                                    break;
-                                default:
-                                    return;
-                            }
-                        } else {
-                            preifxCssRuleText = selectorText = ':root';
-                        }
-                        const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
-                        if (isDefaultMode) {
-                            newRule.nodes.unshift({
-                                selectorText,
-                                text: cssRuleText
-                            });
-                        } else {
-                            newRule.nodes.push({
-                                text: cssRuleText
-                            });
-                        }
-                    };
-                    if (variable.value) {
-                        addNative('', variable);
-                    }
-                    if (variable.modes) {
-                        for(const mode in variable.modes){
-                            addNative(mode, variable.modes[mode]);
-                        }
-                    }
-                    this.css.themeLayer.insert(newRule);
-                    this.css.themeLayer.usages[eachVariableName] = 1;
-                }
-            }
-        }
-    }
-    insertAnimations(syntaxRule) {
-        if (syntaxRule.animationNames) {
-            for (const eachAnimationName of syntaxRule.animationNames){
-                if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName)) {
-                    this.css.animationsNonLayer.usages[eachAnimationName]++;
-                } else {
-                    this.css.animationsNonLayer.insert(new Rule(eachAnimationName, [
-                        {
-                            text: `@keyframes ${eachAnimationName}{` + Object.entries(this.css.animations[eachAnimationName]).map(([key, variables])=>`${key}{${Object.entries(variables).map(([name, value])=>name + ':' + value).join(';')}}`).join('') + '}'
-                        }
-                    ]));
-                    this.css.animationsNonLayer.usages[eachAnimationName] = 1;
-                }
-            }
-        }
-    }
-}
+const SyntaxLayer = withSyntaxLayer(Layer);
 
 export { SyntaxLayer as default };

package/dist/syntax-rule.cjs

@@ -35,7 +35,7 @@ class SyntaxRule extends rule.Rule {
                         break;
                     // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
                     case 'variable':
-                        const variable = this.css.variables[eachValueComponent.name];
+                        const variable = this.css.variables.get(eachValueComponent.name);
                         if (variable) {
                             const handleVariable = (normalHandler, varHandler)=>{
                                 if (variable.modes) {
@@ -127,7 +127,8 @@ class SyntaxRule extends rule.Rule {
                     let handled = false;
                     if (!isVarFunction || currentValueComponents.length) {
                         const handleVariable = (variableName, alpha)=>{
-                            const variable = Object.prototype.hasOwnProperty.call(this.variables, variableName) ? this.variables[variableName] : Object.prototype.hasOwnProperty.call(this.css.variables, variableName) ? this.css.variables[variableName] : undefined;
+                            const globalVariableValue = this.css.variables.get(variableName);
+                            const variable = Object.prototype.hasOwnProperty.call(this.variables, variableName) ? this.variables[variableName] : globalVariableValue;
                             if (variable) {
                                 const name = variable.name ?? variableName;
                                 if (!bypassVariableNames.includes(name)) {
@@ -135,7 +136,7 @@ class SyntaxRule extends rule.Rule {
                                     const valueComponent = {
                                         type: 'variable',
                                         name,
-                                        variable: this.css.variables[name],
+                                        variable: this.css.variables.get(name),
                                         token: currentValue
                                     };
                                     if (alpha) valueComponent.alpha = alpha;
@@ -274,7 +275,7 @@ class SyntaxRule extends rule.Rule {
                 valueToken = name.slice(indexOfColon + 1);
             }
             this.valueComponents = [];
-            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Object.keys(this.css.animations) : []);
+            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Array.from(this.css.animations.keys()) : []);
             this.valueToken = valueToken.slice(0, parsedValueIndex);
             stateToken = valueToken.slice(parsedValueIndex);
         }
@@ -373,8 +374,8 @@ class SyntaxRule extends rule.Rule {
                                     value: 'and'
                                 });
                             } else if (atComponentToken.startsWith('')) {
-                                const targetAt = at[atComponentToken];
-                                if (targetAt && typeof targetAt === 'string') {
+                                const targetAt = at.get(atComponentToken);
+                                if (typeof targetAt === 'string') {
                                     const match = targetAt.match(queryTypeRegExp);
                                     queryType = match ? match[1] : '';
                                     if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetAt}'`);
@@ -404,7 +405,7 @@ class SyntaxRule extends rule.Rule {
                                         featureName = 'min-width';
                                     }
                                     const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
-                                    const viewport = at[token];
+                                    const viewport = at.get(token);
                                     switch(featureName){
                                         case 'max-width':
                                         case 'min-width':
@@ -490,7 +491,7 @@ class SyntaxRule extends rule.Rule {
             const push = (propertyText)=>{
                 // animations
                 if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
-                    const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>eachValue in this.css.animations && (!this.animationNames || !this.animationNames.includes(eachValue)));
+                    const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
                     if (animationNames.length) {
                         if (!this.animationNames) {
                             this.animationNames = [];

package/dist/syntax-rule.mjs

@@ -33,7 +33,7 @@ class SyntaxRule extends Rule {
                         break;
                     // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
                     case 'variable':
-                        const variable = this.css.variables[eachValueComponent.name];
+                        const variable = this.css.variables.get(eachValueComponent.name);
                         if (variable) {
                             const handleVariable = (normalHandler, varHandler)=>{
                                 if (variable.modes) {
@@ -125,7 +125,8 @@ class SyntaxRule extends Rule {
                     let handled = false;
                     if (!isVarFunction || currentValueComponents.length) {
                         const handleVariable = (variableName, alpha)=>{
-                            const variable = Object.prototype.hasOwnProperty.call(this.variables, variableName) ? this.variables[variableName] : Object.prototype.hasOwnProperty.call(this.css.variables, variableName) ? this.css.variables[variableName] : undefined;
+                            const globalVariableValue = this.css.variables.get(variableName);
+                            const variable = Object.prototype.hasOwnProperty.call(this.variables, variableName) ? this.variables[variableName] : globalVariableValue;
                             if (variable) {
                                 const name = variable.name ?? variableName;
                                 if (!bypassVariableNames.includes(name)) {
@@ -133,7 +134,7 @@ class SyntaxRule extends Rule {
                                     const valueComponent = {
                                         type: 'variable',
                                         name,
-                                        variable: this.css.variables[name],
+                                        variable: this.css.variables.get(name),
                                         token: currentValue
                                     };
                                     if (alpha) valueComponent.alpha = alpha;
@@ -272,7 +273,7 @@ class SyntaxRule extends Rule {
                 valueToken = name.slice(indexOfColon + 1);
             }
             this.valueComponents = [];
-            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Object.keys(this.css.animations) : []);
+            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Array.from(this.css.animations.keys()) : []);
             this.valueToken = valueToken.slice(0, parsedValueIndex);
             stateToken = valueToken.slice(parsedValueIndex);
         }
@@ -371,8 +372,8 @@ class SyntaxRule extends Rule {
                                     value: 'and'
                                 });
                             } else if (atComponentToken.startsWith('')) {
-                                const targetAt = at[atComponentToken];
-                                if (targetAt && typeof targetAt === 'string') {
+                                const targetAt = at.get(atComponentToken);
+                                if (typeof targetAt === 'string') {
                                     const match = targetAt.match(queryTypeRegExp);
                                     queryType = match ? match[1] : '';
                                     if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetAt}'`);
@@ -402,7 +403,7 @@ class SyntaxRule extends Rule {
                                         featureName = 'min-width';
                                     }
                                     const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
-                                    const viewport = at[token];
+                                    const viewport = at.get(token);
                                     switch(featureName){
                                         case 'max-width':
                                         case 'min-width':
@@ -488,7 +489,7 @@ class SyntaxRule extends Rule {
             const push = (propertyText)=>{
                 // animations
                 if (animations && (propertyText.startsWith('animation') || propertyText.startsWith('animation-name'))) {
-                    const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>eachValue in this.css.animations && (!this.animationNames || !this.animationNames.includes(eachValue)));
+                    const animationNames = propertyText.split(':')[1].split('!important')[0].split(' ').filter((eachValue)=>this.css.animations.has(eachValue) && (!this.animationNames || !this.animationNames.includes(eachValue)));
                     if (animationNames.length) {
                         if (!this.animationNames) {
                             this.animationNames = [];

package/dist/utils/extend-config.cjs

@@ -7,8 +7,7 @@ function extendConfig(...configs) {
     const formatConfig = (config)=>{
         const clonedConfig = extend({}, config);
         const formatDeeply = (obj)=>{
-            for(const key in obj){
-                const value = obj[key];
+            Object.entries(obj).forEach(([key, value])=>{
                 if (typeof value === 'object' && !Array.isArray(value)) {
                     formatDeeply(value);
                 } else if (key && !key.startsWith('@')) {
@@ -16,58 +15,45 @@ function extendConfig(...configs) {
                         '': value
                     };
                 }
-            }
+            });
         };
-        if (clonedConfig.components) {
-            formatDeeply(clonedConfig.components);
-        }
-        if (clonedConfig.at) {
-            formatDeeply(clonedConfig.at);
-        }
-        if (clonedConfig.variables) {
-            formatDeeply(clonedConfig.variables);
-        }
+        [
+            'components',
+            'at',
+            'variables'
+        ].forEach((key)=>{
+            if (clonedConfig[key]) {
+                formatDeeply(clonedConfig[key]);
+            }
+        });
         return clonedConfig;
     };
-    const formattedConfigs = [];
-    for (const eachConfig of configs){
-        if (!eachConfig) continue;
-        (function getConfigsDeeply(config) {
-            if (config.extends?.length) {
-                for (const eachExtend of config.extends){
-                    getConfigsDeeply('config' in eachExtend ? eachExtend.config : eachExtend);
-                }
+    const collectConfigs = (config, result = [])=>{
+        if (!config) return result;
+        if (config.extends?.length) {
+            config.extends.forEach((ext)=>collectConfigs('config' in ext ? ext.config : ext, result));
+        }
+        result.push(formatConfig(config));
+        return result;
+    };
+    const formattedConfigs = configs.reduce((acc, config)=>collectConfigs(config, acc), []);
+    return formattedConfigs.reduce((extendedConfig, currentConfig)=>{
+        Object.entries(currentConfig).forEach(([key, value])=>{
+            if (key === 'animations' && value) {
+                Object.assign(extendedConfig.animations, value);
+            } else if (value) {
+                extendedConfig = extend(extendedConfig, {
+                    [key]: value
+                });
             }
-            formattedConfigs.push(formatConfig(config));
-        })(eachConfig);
-    }
-    let extendedConfig = {
+        });
+        return extendedConfig;
+    }, {
         animations: {},
         components: {},
         at: {},
         variables: {}
-    };
-    for (const currentFormattedConfig of formattedConfigs){
-        for(const key in currentFormattedConfig){
-            switch(key){
-                case 'animations':
-                    if (currentFormattedConfig.animations) {
-                        Object.assign(extendedConfig.animations, currentFormattedConfig.animations);
-                    }
-                    break;
-                default:
-                    if (currentFormattedConfig[key]) {
-                        extendedConfig = extend(extendedConfig, {
-                            [key]: currentFormattedConfig[key]
-                        });
-                    }
-            }
-        // if (Object.prototype.hasOwnProperty.call(currentFormattedConfig.components, key)) {
-        //     Object.assign(extendedConfig.components[key], currentFormattedConfig.components[key])
-        // }
-        }
-    }
-    return extendedConfig;
+    });
 }
 
 module.exports = extendConfig;

package/dist/utils/extend-config.mjs

@@ -5,8 +5,7 @@ function extendConfig(...configs) {
     const formatConfig = (config)=>{
         const clonedConfig = extend({}, config);
         const formatDeeply = (obj)=>{
-            for(const key in obj){
-                const value = obj[key];
+            Object.entries(obj).forEach(([key, value])=>{
                 if (typeof value === 'object' && !Array.isArray(value)) {
                     formatDeeply(value);
                 } else if (key && !key.startsWith('@')) {
@@ -14,58 +13,45 @@ function extendConfig(...configs) {
                         '': value
                     };
                 }
-            }
+            });
         };
-        if (clonedConfig.components) {
-            formatDeeply(clonedConfig.components);
-        }
-        if (clonedConfig.at) {
-            formatDeeply(clonedConfig.at);
-        }
-        if (clonedConfig.variables) {
-            formatDeeply(clonedConfig.variables);
-        }
+        [
+            'components',
+            'at',
+            'variables'
+        ].forEach((key)=>{
+            if (clonedConfig[key]) {
+                formatDeeply(clonedConfig[key]);
+            }
+        });
         return clonedConfig;
     };
-    const formattedConfigs = [];
-    for (const eachConfig of configs){
-        if (!eachConfig) continue;
-        (function getConfigsDeeply(config) {
-            if (config.extends?.length) {
-                for (const eachExtend of config.extends){
-                    getConfigsDeeply('config' in eachExtend ? eachExtend.config : eachExtend);
-                }
+    const collectConfigs = (config, result = [])=>{
+        if (!config) return result;
+        if (config.extends?.length) {
+            config.extends.forEach((ext)=>collectConfigs('config' in ext ? ext.config : ext, result));
+        }
+        result.push(formatConfig(config));
+        return result;
+    };
+    const formattedConfigs = configs.reduce((acc, config)=>collectConfigs(config, acc), []);
+    return formattedConfigs.reduce((extendedConfig, currentConfig)=>{
+        Object.entries(currentConfig).forEach(([key, value])=>{
+            if (key === 'animations' && value) {
+                Object.assign(extendedConfig.animations, value);
+            } else if (value) {
+                extendedConfig = extend(extendedConfig, {
+                    [key]: value
+                });
             }
-            formattedConfigs.push(formatConfig(config));
-        })(eachConfig);
-    }
-    let extendedConfig = {
+        });
+        return extendedConfig;
+    }, {
         animations: {},
         components: {},
         at: {},
         variables: {}
-    };
-    for (const currentFormattedConfig of formattedConfigs){
-        for(const key in currentFormattedConfig){
-            switch(key){
-                case 'animations':
-                    if (currentFormattedConfig.animations) {
-                        Object.assign(extendedConfig.animations, currentFormattedConfig.animations);
-                    }
-                    break;
-                default:
-                    if (currentFormattedConfig[key]) {
-                        extendedConfig = extend(extendedConfig, {
-                            [key]: currentFormattedConfig[key]
-                        });
-                    }
-            }
-        // if (Object.prototype.hasOwnProperty.call(currentFormattedConfig.components, key)) {
-        //     Object.assign(extendedConfig.components[key], currentFormattedConfig.components[key])
-        // }
-        }
-    }
-    return extendedConfig;
+    });
 }
 
 export { extendConfig as default };

package/dist/utils/flatten-object.d.ts

@@ -1 +1 @@
-export declare function flattenObject(obj: Record<string, any>, parentKey?: string): Record<string, any>;
+export declare function flattenObject(obj: Map<string, any> | Record<string, any>, parentKey?: string): Record<string, any>;

package/package.json

@@ -1 +1 @@
-{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.57"},"version":"2.0.0-rc.57"}
+{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.59"},"version":"2.0.0-rc.59"}