@master/css 2.0.0-rc.46 → 2.0.0-rc.48

package/dist/shared/utils/find-native-css-rule-index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+function findNativeCSSRuleIndex(cssRules, nativeRule) {
+    for(let i = 0; i < cssRules.length; i++){
+        if (cssRules[i] === nativeRule) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+module.exports = findNativeCSSRuleIndex;

package/dist/shared/utils/find-native-css-rule-index.mjs

@@ -0,0 +1,10 @@
+function findNativeCSSRuleIndex(cssRules, nativeRule) {
+    for(let i = 0; i < cssRules.length; i++){
+        if (cssRules[i] === nativeRule) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+export { findNativeCSSRuleIndex as default };

package/dist/syntax-layer.cjs

@@ -0,0 +1,291 @@
+'use strict';
+
+var layer = require('./layer.cjs');
+var rule = require('./rule.cjs');
+
+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.Rule(eachVariableName);
+                    const addNative = (mode, _variable)=>{
+                        let isDefaultMode = false;
+                        let preifxCssRuleText;
+                        let endCurlyBracketCount = 1;
+                        if (mode) {
+                            switch(this.css.config.modes?.[mode]){
+                                case 'media':
+                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){:root`;
+                                    endCurlyBracketCount++;
+                                    break;
+                                case 'host':
+                                    preifxCssRuleText = `:host(.${mode})`;
+                                    if (!variable.value && this.css.config.defaultMode === mode) {
+                                        preifxCssRuleText += ',:host';
+                                        isDefaultMode = true;
+                                    }
+                                    break;
+                                case 'class':
+                                    preifxCssRuleText = `.${mode}`;
+                                    if (!variable.value && this.css.config.defaultMode === mode) {
+                                        preifxCssRuleText += ',:root';
+                                        isDefaultMode = true;
+                                    }
+                                    break;
+                                default:
+                                    return;
+                            }
+                        } else {
+                            preifxCssRuleText = ':root';
+                        }
+                        const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
+                        if (isDefaultMode) {
+                            newRule.nodes.unshift({
+                                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.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;
+                }
+            }
+        }
+    }
+}
+
+module.exports = SyntaxLayer;

package/dist/syntax-layer.d.ts

@@ -0,0 +1,17 @@
+import Layer from './layer';
+import { SyntaxRule } from './syntax-rule';
+export default class SyntaxLayer extends Layer {
+    rules: SyntaxRule[];
+    /**
+    * normal
+    * normal selectors
+    * media normal
+    * media selectors
+    * media width
+    * media width selectors
+    */
+    insert(syntaxRule: SyntaxRule): number | undefined;
+    delete(key: string): SyntaxRule | undefined;
+    insertVariables(syntaxRule: SyntaxRule): void;
+    insertAnimations(syntaxRule: SyntaxRule): void;
+}

package/dist/syntax-layer.mjs

@@ -0,0 +1,289 @@
+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 endCurlyBracketCount = 1;
+                        if (mode) {
+                            switch(this.css.config.modes?.[mode]){
+                                case 'media':
+                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){:root`;
+                                    endCurlyBracketCount++;
+                                    break;
+                                case 'host':
+                                    preifxCssRuleText = `:host(.${mode})`;
+                                    if (!variable.value && this.css.config.defaultMode === mode) {
+                                        preifxCssRuleText += ',:host';
+                                        isDefaultMode = true;
+                                    }
+                                    break;
+                                case 'class':
+                                    preifxCssRuleText = `.${mode}`;
+                                    if (!variable.value && this.css.config.defaultMode === mode) {
+                                        preifxCssRuleText += ',:root';
+                                        isDefaultMode = true;
+                                    }
+                                    break;
+                                default:
+                                    return;
+                            }
+                        } else {
+                            preifxCssRuleText = ':root';
+                        }
+                        const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
+                        if (isDefaultMode) {
+                            newRule.nodes.unshift({
+                                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;
+                }
+            }
+        }
+    }
+}
+
+export { SyntaxLayer as default };

package/dist/syntax-rule-type.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var SyntaxRuleType = /*#__PURE__*/ function(SyntaxRuleType) {
+    /**
+     * utility classes
+     * @example block, inline
+     */ SyntaxRuleType[SyntaxRuleType["Utility"] = -4] = "Utility";
+    /**
+     * native shorthand
+     * @example border, padding, margin
+     */ SyntaxRuleType[SyntaxRuleType["NativeShorthand"] = -3] = "NativeShorthand";
+    /**
+     * shorthand
+     * @example px, py, mx, my
+     */ SyntaxRuleType[SyntaxRuleType["Shorthand"] = -2] = "Shorthand";
+    /**
+     * native properties
+     * @example color, background-color, font-size
+     */ SyntaxRuleType[SyntaxRuleType["Native"] = -1] = "Native";
+    /**
+     * normal
+     * @example grid-cols
+     */ SyntaxRuleType[SyntaxRuleType["Normal"] = 0] = "Normal";
+    return SyntaxRuleType;
+}(SyntaxRuleType || {});
+
+module.exports = SyntaxRuleType;