@master/css 2.0.0-rc.60 → 2.0.0-rc.62

package/dist/factories/with-syntax-layer.mjs

@@ -1,4 +1,6 @@
-import { Rule } from '../rule.mjs';
+import AnimationRule from '../animation-rule.mjs';
+import compareRulePriority from '../utils/compare-rule-priority.mjs';
+import VariableRule from '../variable-rule.mjs';
 
 function withSyntaxLayer(Base) {
     return class SyntaxLayer extends Base {
@@ -11,172 +13,13 @@ function withSyntaxLayer(Base) {
         * 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 feature = this.rules[i].at.media?.find(({ name })=>name === 'min-width');
-                                        if (!feature) continue;
-                                        if (feature.value > minWidthFeature.value) {
-                                            matchEndIndex = i - 1;
-                                        } else if (feature.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 feature = this.rules[i].at.media?.find(({ name })=>name === 'max-width');
-                                        if (!feature) continue;
-                                        if (feature.value < maxWidthFeature.value) {
-                                            matchEndIndex = i - 1;
-                                        } else if (feature.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;
-                    }
+            if (this.rules.includes(syntaxRule) || !syntaxRule.valid) return;
+            let index = this.rules.length;
+            for(let i = 0; i < this.rules.length; i++){
+                const rule = this.rules[i];
+                if (compareRulePriority(syntaxRule, rule) < 0) {
+                    index = i;
+                    break;
                 }
             }
             super.insert(syntaxRule, index);
@@ -197,108 +40,42 @@ function withSyntaxLayer(Base) {
                     layer.tokenCounts.set(layerToken, count - 1);
                 }
             };
-            if (syntaxRule.variableNames) {
-                for (const eachVariableName of syntaxRule.variableNames){
-                    deleteLayerToken(eachVariableName, this.css.themeLayer);
-                }
-            }
-            if (syntaxRule.animationNames) {
-                for (const eachKeyframeName of syntaxRule.animationNames){
-                    deleteLayerToken(eachKeyframeName, this.css.animationsNonLayer);
-                }
-            }
+            syntaxRule.variableNames?.forEach((eachVariableName)=>{
+                deleteLayerToken(eachVariableName, this.css.themeLayer);
+            });
+            syntaxRule.animationNames?.forEach((eachAnimationName)=>{
+                deleteLayerToken(eachAnimationName, this.css.animationsNonLayer);
+            });
             syntaxRule.definition.delete?.call(syntaxRule, syntaxRule.name);
             return syntaxRule;
         }
         insertVariables(syntaxRule) {
-            if (syntaxRule.variableNames) {
-                for (const eachVariableName of syntaxRule.variableNames){
+            syntaxRule.variableNames?.forEach((eachVariableName)=>{
+                if (this.css.themeLayer.rules.find(({ name })=>name === eachVariableName)) {
+                    const count = this.css.themeLayer.tokenCounts.get(eachVariableName) || 0;
+                    this.css.themeLayer.tokenCounts.set(eachVariableName, count + 1);
+                } else {
                     const variable = this.css.variables.get(eachVariableName);
-                    if (this.css.themeLayer.rules.find(({ name })=>name === eachVariableName)) {
-                        const count = this.css.themeLayer.tokenCounts.get(eachVariableName) || 0;
-                        this.css.themeLayer.tokenCounts.set(eachVariableName, count + 1);
-                    } 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 !== undefined) {
-                            addNative('', variable);
-                        }
-                        if (variable?.modes) {
-                            for(const mode in variable.modes){
-                                addNative(mode, variable.modes[mode]);
-                            }
-                        }
-                        this.css.themeLayer.insert(newRule);
-                        this.css.themeLayer.tokenCounts.set(eachVariableName, 1);
-                    }
+                    if (!variable) return;
+                    const newRule = new VariableRule(eachVariableName, variable, this.css);
+                    this.css.themeLayer.insert(newRule);
+                    this.css.themeLayer.tokenCounts.set(eachVariableName, 1);
                 }
-            }
+            });
         }
         insertAnimations(syntaxRule) {
-            if (syntaxRule.animationNames) {
-                for (const eachAnimationName of syntaxRule.animationNames){
-                    if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName)) {
-                        const count = this.css.animationsNonLayer.tokenCounts.get(eachAnimationName) || 0;
-                        this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, count + 1);
-                    } else {
-                        const keyframes = this.css.animations.get(eachAnimationName);
-                        if (!keyframes) continue;
-                        const keyframeText = Object.entries(keyframes).reduce((acc, [key, variables])=>{
-                            const variableText = Object.entries(variables).map(([name, value])=>`${name}:${value}`).join(';');
-                            return acc + `${key}{${variableText}}`;
-                        }, '');
-                        this.css.animationsNonLayer.insert(new Rule(eachAnimationName, [
-                            {
-                                text: `@keyframes ${eachAnimationName}{${keyframeText}}`
-                            }
-                        ]));
-                        this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, 1);
-                    }
+            syntaxRule.animationNames?.forEach((eachAnimationName)=>{
+                if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName)) {
+                    const count = this.css.animationsNonLayer.tokenCounts.get(eachAnimationName) || 0;
+                    this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, count + 1);
+                } else {
+                    const keyframes = this.css.animations.get(eachAnimationName);
+                    if (!keyframes) return;
+                    const newRule = new AnimationRule(eachAnimationName, keyframes, this.css);
+                    this.css.animationsNonLayer.insert(newRule);
+                    this.css.animationsNonLayer.tokenCounts.set(eachAnimationName, 1);
                 }
-            }
+            });
         }
     };
 }

package/dist/index.cjs

@@ -11,16 +11,25 @@ var layer = require('./layer.cjs');
 var syntaxLayer = require('./syntax-layer.cjs');
 var nonLayer = require('./non-layer.cjs');
 var syntaxRuleType = require('./syntax-rule-type.cjs');
+var variableRule = require('./variable-rule.cjs');
+var animationRule = require('./animation-rule.cjs');
 var withSyntaxLayer = require('./factories/with-syntax-layer.cjs');
 var extendConfig = require('./utils/extend-config.cjs');
-var reorderForReadableClasses = require('./utils/reorder-for-readable-classes.cjs');
-var areRuleModesEqual = require('./utils/are-rule-modes-equal.cjs');
-var areRuleAtEqual = require('./utils/are-rule-at-equal.cjs');
-var areRuleSelectorsEqual = require('./utils/are-rule-selectors-equal.cjs');
-var areRuleStatesEqual = require('./utils/are-rule-states-equal.cjs');
-var areRulesDuplicated = require('./utils/are-rules-duplicated.cjs');
+var sortReadableClasses = require('./utils/sort-readable-classes.cjs');
+var equalAtRules = require('./utils/equal-at-rules.cjs');
+var equalSelectors = require('./utils/equal-selectors.cjs');
+var equalVariants = require('./utils/equal-variants.cjs');
+var equalDeclarations = require('./utils/equal-declarations.cjs');
 var generateCss = require('./utils/generate-css.cjs');
 var isCoreRule = require('./utils/is-core-rule.cjs');
+var parsePair = require('./utils/parse-pair.cjs');
+var parseValue = require('./utils/parse-value.cjs');
+var parseAt = require('./utils/parse-at.cjs');
+var generateAt = require('./utils/generate-at.cjs');
+var parseSelector = require('./utils/parse-selector.cjs');
+var generateSelector = require('./utils/generate-selector.cjs');
+var getSingleAtNumberRuleNode = require('./utils/get-single-at-number-rule-node.cjs');
+var compareRulePriority = require('./utils/compare-rule-priority.cjs');
 var at = require('./config/at.cjs');
 var selectors = require('./config/selectors.cjs');
 var utilities = require('./config/utilities.cjs');
@@ -29,11 +38,16 @@ var functions = require('./config/functions.cjs');
 var animations = require('./config/animations.cjs');
 var variables = require('./config/variables.cjs');
 var modes = require('./config/modes.cjs');
+var screens = require('./config/screens.cjs');
 
 
 
 exports.config = index.config;
 exports.ANIMATION_SIGN = common.ANIMATION_SIGN;
+exports.AT_COMPARABLE_FEATURES = common.AT_COMPARABLE_FEATURES;
+exports.AT_COMPARISON_OPERATORS = common.AT_COMPARISON_OPERATORS;
+exports.AT_IDENTIFIERS = common.AT_IDENTIFIERS;
+exports.AT_LOGICAL_OPERATORS = common.AT_LOGICAL_OPERATORS;
 exports.AT_SIGN = common.AT_SIGN;
 exports.BASE_UNIT_REGEX = common.BASE_UNIT_REGEX;
 exports.BORDER_STYLE_VALUES = common.BORDER_STYLE_VALUES;
@@ -41,12 +55,14 @@ exports.CLASS_ATTRIBUTES = common.CLASS_ATTRIBUTES;
 exports.CLASS_DECLARATIONS = common.CLASS_DECLARATIONS;
 exports.CLASS_FUNCTIONS = common.CLASS_FUNCTIONS;
 exports.COLOR_VALUE_REGEX = common.COLOR_VALUE_REGEX;
+exports.COMPARISION_OPERATORS = common.COMPARISION_OPERATORS;
 exports.DELIMITER_SIGN = common.DELIMITER_SIGN;
 exports.IMAGE_VALUE_REGEX = common.IMAGE_VALUE_REGEX;
 exports.NUMBER_VALUE_REGEX = common.NUMBER_VALUE_REGEX;
 exports.OFFICIAL_URL = common.OFFICIAL_URL;
 exports.QUERY_COMPARISON_OPERATORS = common.QUERY_COMPARISON_OPERATORS;
 exports.QUERY_LOGICAL_OPERATORS = common.QUERY_LOGICAL_OPERATORS;
+exports.SELECTOR_COMBINATORS = common.SELECTOR_COMBINATORS;
 exports.SELECTOR_SIGNS = common.SELECTOR_SIGNS;
 exports.SEPARATOR_SIGN = common.SEPARATOR_SIGN;
 exports.SEPARATOR_SIGNS = common.SEPARATOR_SIGNS;
@@ -62,16 +78,25 @@ exports.Layer = layer;
 exports.SyntaxLayer = syntaxLayer;
 exports.NonLayer = nonLayer;
 exports.SyntaxRuleType = syntaxRuleType;
+exports.VariableRule = variableRule.default;
+exports.AnimationRule = animationRule;
 exports.withSyntaxLayer = withSyntaxLayer;
 exports.extendConfig = extendConfig;
-exports.reorderForReadableClasses = reorderForReadableClasses;
-exports.areRuleModesEqual = areRuleModesEqual;
-exports.areRuleAtEqual = areRuleAtEqual;
-exports.areRuleSelectorsEqual = areRuleSelectorsEqual;
-exports.areRuleStatesEqual = areRuleStatesEqual;
-exports.areRulesDuplicated = areRulesDuplicated;
+exports.sortReadableClasses = sortReadableClasses;
+exports.equalAtRules = equalAtRules;
+exports.equalSelectors = equalSelectors;
+exports.equalVariants = equalVariants;
+exports.equalDeclarations = equalDeclarations;
 exports.generateCSS = generateCss;
 exports.isCoreRule = isCoreRule;
+exports.parsePair = parsePair;
+exports.parseValue = parseValue;
+exports.parseAt = parseAt;
+exports.generateAt = generateAt;
+exports.parseSelector = parseSelector;
+exports.generateSelector = generateSelector;
+exports.getSingleAtNumberRuleNode = getSingleAtNumberRuleNode;
+exports.compareRulePriority = compareRulePriority.default;
 exports.at = at;
 exports.selectors = selectors;
 exports.utilities = utilities;
@@ -80,3 +105,4 @@ exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
 exports.modes = modes;
+exports.screens = screens;

package/dist/index.d.ts

@@ -7,16 +7,28 @@ export { default as Layer } from './layer';
 export { default as SyntaxLayer } from './syntax-layer';
 export { default as NonLayer } from './non-layer';
 export { default as SyntaxRuleType } from './syntax-rule-type';
-export { default as MasterCSS, default } from './core';
+export { default as VariableRule } from './variable-rule';
+export { default as AnimationRule } from './animation-rule';
 export * from './types/config';
 export * from './types/syntax';
+export * from './types/common';
 export { default as withSyntaxLayer } from './factories/with-syntax-layer';
 export { default as extendConfig } from './utils/extend-config';
-export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes';
-export { default as areRuleModesEqual } from './utils/are-rule-modes-equal';
-export { default as areRuleAtEqual } from './utils/are-rule-at-equal';
-export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal';
-export { default as areRuleStatesEqual } from './utils/are-rule-states-equal';
-export { default as areRulesDuplicated } from './utils/are-rules-duplicated';
+export { default as sortReadableClasses } from './utils/sort-readable-classes';
+export { default as equalAtRules } from './utils/equal-at-rules';
+export { default as equalSelectors } from './utils/equal-selectors';
+export { default as equalVariants } from './utils/equal-variants';
+export { default as equalDeclarations } from './utils/equal-declarations';
 export { default as generateCSS } from './utils/generate-css';
 export { default as isCoreRule } from './utils/is-core-rule';
+export { default as parsePair } from './utils/parse-pair';
+export { default as parseValue } from './utils/parse-value';
+export { default as parseAt } from './utils/parse-at';
+export type * from './utils/parse-at';
+export { default as generateAt } from './utils/generate-at';
+export { default as parseSelector } from './utils/parse-selector';
+export type * from './utils/parse-selector';
+export { default as generateSelector } from './utils/generate-selector';
+export { default as getSingleAtNumberRuleNode } from './utils/get-single-at-number-rule-node';
+export { default as compareRulePriority } from './utils/compare-rule-priority';
+export { default as MasterCSS, default } from './core';

package/dist/index.mjs

@@ -1,5 +1,5 @@
 export { config } from './config/index.mjs';
-export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, BORDER_STYLE_VALUES, CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS } from './common.mjs';
+export { ANIMATION_SIGN, AT_COMPARABLE_FEATURES, AT_COMPARISON_OPERATORS, AT_IDENTIFIERS, AT_LOGICAL_OPERATORS, AT_SIGN, BASE_UNIT_REGEX, BORDER_STYLE_VALUES, CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS, COLOR_VALUE_REGEX, COMPARISION_OPERATORS, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_COMBINATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS } from './common.mjs';
 export { default as MasterCSS, default } from './core.mjs';
 export { SyntaxRule } from './syntax-rule.mjs';
 export { Rule } from './rule.mjs';
@@ -7,16 +7,25 @@ export { default as Layer } from './layer.mjs';
 export { default as SyntaxLayer } from './syntax-layer.mjs';
 export { default as NonLayer } from './non-layer.mjs';
 export { default as SyntaxRuleType } from './syntax-rule-type.mjs';
+export { default as VariableRule } from './variable-rule.mjs';
+export { default as AnimationRule } from './animation-rule.mjs';
 export { default as withSyntaxLayer } from './factories/with-syntax-layer.mjs';
 export { default as extendConfig } from './utils/extend-config.mjs';
-export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes.mjs';
-export { default as areRuleModesEqual } from './utils/are-rule-modes-equal.mjs';
-export { default as areRuleAtEqual } from './utils/are-rule-at-equal.mjs';
-export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal.mjs';
-export { default as areRuleStatesEqual } from './utils/are-rule-states-equal.mjs';
-export { default as areRulesDuplicated } from './utils/are-rules-duplicated.mjs';
+export { default as sortReadableClasses } from './utils/sort-readable-classes.mjs';
+export { default as equalAtRules } from './utils/equal-at-rules.mjs';
+export { default as equalSelectors } from './utils/equal-selectors.mjs';
+export { default as equalVariants } from './utils/equal-variants.mjs';
+export { default as equalDeclarations } from './utils/equal-declarations.mjs';
 export { default as generateCSS } from './utils/generate-css.mjs';
 export { default as isCoreRule } from './utils/is-core-rule.mjs';
+export { default as parsePair } from './utils/parse-pair.mjs';
+export { default as parseValue } from './utils/parse-value.mjs';
+export { default as parseAt } from './utils/parse-at.mjs';
+export { default as generateAt } from './utils/generate-at.mjs';
+export { default as parseSelector } from './utils/parse-selector.mjs';
+export { default as generateSelector } from './utils/generate-selector.mjs';
+export { default as getSingleAtNumberRuleNode } from './utils/get-single-at-number-rule-node.mjs';
+export { default as compareRulePriority } from './utils/compare-rule-priority.mjs';
 export { default as at } from './config/at.mjs';
 export { default as selectors } from './config/selectors.mjs';
 export { default as utilities } from './config/utilities.mjs';
@@ -25,3 +34,4 @@ export { default as functions } from './config/functions.mjs';
 export { default as animations } from './config/animations.mjs';
 export { default as variables } from './config/variables.mjs';
 export { default as modes } from './config/modes.mjs';
+export { default as screens } from './config/screens.mjs';

package/dist/layer.cjs

@@ -19,20 +19,22 @@ class Layer {
     }
     insert(rule, index = this.rules.length) {
         if (this.rules.find(({ key })=>key === rule.key)) return;
+        this.rules.splice(index, 0, rule);
+        // should attach after inserting, because this.text is possibly empty
         if (!this.css.rules.includes(this)) {
             this.attach();
         }
-        this.rules.splice(index, 0, rule);
         return index;
     }
     delete(key) {
-        const rule = this.rules.find((rule)=>rule.key === key);
-        if (!rule) return;
-        if (this.rules.length === 1) {
+        const index = this.rules.findIndex((rule)=>rule.key === key);
+        if (index === -1) return;
+        const deletedRule = this.rules[index];
+        this.rules.splice(index, 1);
+        if (this.rules.length === 0) {
             this.detach();
         }
-        this.rules.splice(this.rules.indexOf(rule), 1);
-        return rule;
+        return deletedRule;
     }
     reset() {
         this.rules.length = 0;
@@ -43,7 +45,9 @@ class Layer {
         this.tokenCounts.clear();
     }
     get text() {
-        return '@layer ' + this.name + '{' + this.rules.map(({ text })=>text).join('') + '}';
+        const ruleText = this.rules.map(({ text })=>text).join('');
+        if (!ruleText) return '';
+        return '@layer ' + this.name + '{' + ruleText + '}';
     }
 }
 

package/dist/layer.d.ts

@@ -1,15 +1,16 @@
 import { Rule } from './rule';
 import MasterCSS from './core';
+import VariableRule from './variable-rule';
 export default class Layer {
     name: string;
     css: MasterCSS;
-    readonly rules: Rule[];
+    readonly rules: (Rule | VariableRule)[];
     readonly tokenCounts: Map<string, number>;
     constructor(name: string, css: MasterCSS);
     attach(): void;
     detach(): void;
-    insert(rule: Rule, index?: number): number | undefined;
-    delete(key: string): Rule | undefined;
+    insert(rule: Rule | VariableRule, index?: number): number | undefined;
+    delete(key: string): Rule | VariableRule | undefined;
     reset(): void;
     get text(): string;
 }

package/dist/layer.mjs

@@ -17,20 +17,22 @@ class Layer {
     }
     insert(rule, index = this.rules.length) {
         if (this.rules.find(({ key })=>key === rule.key)) return;
+        this.rules.splice(index, 0, rule);
+        // should attach after inserting, because this.text is possibly empty
         if (!this.css.rules.includes(this)) {
             this.attach();
         }
-        this.rules.splice(index, 0, rule);
         return index;
     }
     delete(key) {
-        const rule = this.rules.find((rule)=>rule.key === key);
-        if (!rule) return;
-        if (this.rules.length === 1) {
+        const index = this.rules.findIndex((rule)=>rule.key === key);
+        if (index === -1) return;
+        const deletedRule = this.rules[index];
+        this.rules.splice(index, 1);
+        if (this.rules.length === 0) {
             this.detach();
         }
-        this.rules.splice(this.rules.indexOf(rule), 1);
-        return rule;
+        return deletedRule;
     }
     reset() {
         this.rules.length = 0;
@@ -41,7 +43,9 @@ class Layer {
         this.tokenCounts.clear();
     }
     get text() {
-        return '@layer ' + this.name + '{' + this.rules.map(({ text })=>text).join('') + '}';
+        const ruleText = this.rules.map(({ text })=>text).join('');
+        if (!ruleText) return '';
+        return '@layer ' + this.name + '{' + ruleText + '}';
     }
 }