@master/css 2.0.0-rc.5 → 2.0.0-rc.50

package/dist/polyfills/css-escape2.mjs

@@ -0,0 +1,74 @@
+import { commonjsGlobal } from '../_virtual/_commonjsHelpers.mjs';
+import { __exports as cssEscape } from '../_virtual/css-escape.mjs';
+
+var hasRequiredCssEscape;
+
+function requireCssEscape () {
+	if (hasRequiredCssEscape) return cssEscape;
+	hasRequiredCssEscape = 1;
+	(()=>{
+	    const root = typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : window;
+	    if (!root.CSS && !root.CSS?.escape) {
+	        // https://drafts.csswg.org/cssom/#serialize-an-identifier
+	        const cssEscape = function(value) {
+	            if (arguments.length == 0) {
+	                throw new TypeError('`CSS.escape` requires an argument.');
+	            }
+	            const string = String(value);
+	            const length = string.length;
+	            let index = -1;
+	            let result = '';
+	            let codeUnit;
+	            const firstCodeUnit = string.charCodeAt(0);
+	            if (// If the character is the first character and is a `-` (U+002D), and
+	            // there is no second character, […]
+	            length == 1 && firstCodeUnit == 0x002D) {
+	                return '\\' + string;
+	            }
+	            while(++index < length){
+	                codeUnit = string.charCodeAt(index);
+	                // Note: there’s no need to special-case astral symbols, surrogate
+	                // pairs, or lone surrogates.
+	                // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+	                // (U+FFFD).
+	                if (codeUnit == 0x0000) {
+	                    result += '\uFFFD';
+	                    continue;
+	                }
+	                if (// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+	                // U+007F, […]
+	                codeUnit >= 0x0001 && codeUnit <= 0x001F || codeUnit == 0x007F || // If the character is the first character and is in the range [0-9]
+	                // (U+0030 to U+0039), […]
+	                index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039 || // If the character is the second character and is in the range [0-9]
+	                // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+	                index == 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit == 0x002D) {
+	                    // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+	                    result += '\\' + codeUnit.toString(16) + ' ';
+	                    continue;
+	                }
+	                // If the character is not handled by one of the above syntaxes and is
+	                // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+	                // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+	                // U+005A), or [a-z] (U+0061 to U+007A), […]
+	                if (codeUnit >= 0x0080 || codeUnit == 0x002D || codeUnit == 0x005F || codeUnit >= 0x0030 && codeUnit <= 0x0039 || codeUnit >= 0x0041 && codeUnit <= 0x005A || codeUnit >= 0x0061 && codeUnit <= 0x007A) {
+	                    // the character itself
+	                    result += string.charAt(index);
+	                    continue;
+	                }
+	                // Otherwise, the escaped character.
+	                // https://drafts.csswg.org/cssom/#escape-a-character
+	                result += '\\' + string.charAt(index);
+	            }
+	            return result;
+	        };
+	        if (!root.CSS) {
+	            root.CSS = {};
+	        }
+	        root.CSS.escape = cssEscape;
+	        globalThis.CSS.escape = cssEscape;
+	    }
+	})();
+	return cssEscape;
+}
+
+export { requireCssEscape as __require };

package/dist/rule.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+class Rule {
+    name;
+    nodes;
+    constructor(name, nodes = []){
+        this.name = name;
+        this.nodes = nodes;
+    }
+    get key() {
+        return this.name;
+    }
+    get text() {
+        return this.nodes.map(({ text })=>text).join('');
+    }
+}
+
+exports.Rule = Rule;

package/dist/rule.d.ts

@@ -1,116 +1,11 @@
-import type { MasterCSS, Variable } from './core';
-import { Layer } from './layer';
-import { PropertiesHyphen } from 'csstype';
 export declare class Rule {
-    readonly className: string;
-    css: MasterCSS;
-    readonly at: Record<string, string>;
-    readonly priority: number;
-    readonly natives: NativeRule[];
-    readonly order: number;
-    readonly layer: Layer;
-    readonly stateToken: string;
-    readonly declarations?: PropertiesHyphen;
-    animationNames?: string[];
-    variableNames?: string[];
-    constructor(className: string, RegisteredRule: RegisteredRule, css: MasterCSS);
-    resolveValue: (valueComponents: ValueComponent[], unit: string, bypassVariableNames: string[], bypassParsing: boolean) => string;
+    readonly name: string;
+    nodes: RuleNode[];
+    constructor(name: string, nodes?: RuleNode[]);
+    get key(): string;
     get text(): string;
-    parseValue: (currentValueComponents: ValueComponent[], i: number, value: string, unit: string, endSymbol: string, parentFunctionName?: string, bypassParsing?: boolean, bypassVariableNames?: string[]) => number;
-    parseValueComponent(token: string | number, unit?: any): StringValueComponent | NumericValueComponent;
 }
-export type ValueComponent = StringValueComponent | NumericValueComponent | FunctionValueComponent | VariableValueComponent | SeparatorValueComponent;
-export interface StringValueComponent {
-    text?: string;
-    token?: string;
-    type: 'string';
-    value: string;
-}
-export interface NumericValueComponent {
-    text?: string;
-    token?: string;
-    type: 'number';
-    value: number;
-    unit?: string;
-}
-export interface FunctionValueComponent {
-    text?: string;
-    token?: string;
-    type: 'function';
-    name: string;
-    symbol: string;
-    children: ValueComponent[];
-    bypassTransform?: boolean;
-}
-export interface VariableValueComponent {
-    text?: string;
-    token?: string;
-    type: 'variable';
-    name: string;
-    alpha?: string;
-    fallback?: string;
-    variable?: Variable;
-}
-export interface SeparatorValueComponent {
-    text?: string;
-    type: 'separator';
-    value: string;
-}
-export interface Rule extends RegisteredRule {
-    colored: boolean;
-    prefix: string;
-    token: string;
-    vendorPrefixSelectors: Record<string, string[]>;
-    vendorSuffixSelectors: Record<string, string[]>;
-    important: boolean;
-    media: MediaQuery;
-    direction: string;
-    theme: string;
-    unitToken: string;
-    hasWhere: boolean;
-    valueComponents: Array<ValueComponent>;
-}
-export interface RegisteredRule {
-    id: string;
-    match?: RegExp;
-    variables?: any;
-    order: number;
-    definition: RuleDefinition;
-}
-export interface RuleDefinition {
-    layer?: Layer;
-    match?: RegExp | [string, string[]?];
-    variables?: string[];
-    separators?: string[];
-    shorthand?: string;
-    colored?: boolean;
-    numeric?: boolean;
-    unit?: any;
-    native?: boolean;
-    declarations?: PropertiesHyphen;
-    analyze?: (this: Rule, className: string) => [valueToken: string, prefixToken?: string];
-    transformValue?(this: Rule, value: string): string;
-    transformValueComponents?(this: Rule, valueComponents: ValueComponent[]): ValueComponent[];
-    declare?(this: Rule, value: string, valueComponents: ValueComponent[]): PropertiesHyphen;
-    delete?(this: Rule, className: string): void;
-    create?(this: Rule, className: string): void;
-    insert?(this: Rule): void;
-}
-export interface NativeRule {
+export interface RuleNode {
     text: string;
-    cssRule?: CSSRule;
-}
-export type MediaFeatureComponent = {
-    type: string;
-    tokenType?: string;
-    operator?: string;
-    value: number;
-    unit: string;
-};
-export interface MediaQuery {
-    token: string;
-    features: {
-        [key: string]: MediaFeatureComponent;
-    };
-    type?: string;
+    native?: CSSRule;
 }

package/dist/rule.mjs

@@ -0,0 +1,16 @@
+class Rule {
+    name;
+    nodes;
+    constructor(name, nodes = []){
+        this.name = name;
+        this.nodes = nodes;
+    }
+    get key() {
+        return this.name;
+    }
+    get text() {
+        return this.nodes.map(({ text })=>text).join('');
+    }
+}
+
+export { Rule };

package/dist/shared/utils/css-escape.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+function cssEscape(value) {
+    if (typeof CSS !== 'undefined') return CSS.escape(value);
+    if (arguments.length == 0) {
+        throw new TypeError('`CSS.escape` requires an argument.');
+    }
+    const string = String(value);
+    const length = string.length;
+    let index = -1;
+    let result = '';
+    let codeUnit;
+    const firstCodeUnit = string.charCodeAt(0);
+    if (// If the character is the first character and is a `-` (U+002D), and
+    // there is no second character, […]
+    length == 1 && firstCodeUnit == 0x002D) {
+        return '\\' + string;
+    }
+    while(++index < length){
+        codeUnit = string.charCodeAt(index);
+        // Note: there’s no need to special-case astral symbols, surrogate
+        // pairs, or lone surrogates.
+        // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+        // (U+FFFD).
+        if (codeUnit == 0x0000) {
+            result += '\uFFFD';
+            continue;
+        }
+        if (// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+        // U+007F, […]
+        codeUnit >= 0x0001 && codeUnit <= 0x001F || codeUnit == 0x007F || // If the character is the first character and is in the range [0-9]
+        // (U+0030 to U+0039), […]
+        index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039 || // If the character is the second character and is in the range [0-9]
+        // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+        index == 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit == 0x002D) {
+            // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // If the character is not handled by one of the above rules and is
+        // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+        // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+        // U+005A), or [a-z] (U+0061 to U+007A), […]
+        if (codeUnit >= 0x0080 || codeUnit == 0x002D || codeUnit == 0x005F || codeUnit >= 0x0030 && codeUnit <= 0x0039 || codeUnit >= 0x0041 && codeUnit <= 0x005A || codeUnit >= 0x0061 && codeUnit <= 0x007A) {
+            // the character itself
+            result += string.charAt(index);
+            continue;
+        }
+        // Otherwise, the escaped character.
+        // https://drafts.csswg.org/cssom/#escape-a-character
+        result += '\\' + string.charAt(index);
+    }
+    return result;
+}
+
+module.exports = cssEscape;

package/dist/shared/utils/css-escape.mjs

@@ -0,0 +1,54 @@
+function cssEscape(value) {
+    if (typeof CSS !== 'undefined') return CSS.escape(value);
+    if (arguments.length == 0) {
+        throw new TypeError('`CSS.escape` requires an argument.');
+    }
+    const string = String(value);
+    const length = string.length;
+    let index = -1;
+    let result = '';
+    let codeUnit;
+    const firstCodeUnit = string.charCodeAt(0);
+    if (// If the character is the first character and is a `-` (U+002D), and
+    // there is no second character, […]
+    length == 1 && firstCodeUnit == 0x002D) {
+        return '\\' + string;
+    }
+    while(++index < length){
+        codeUnit = string.charCodeAt(index);
+        // Note: there’s no need to special-case astral symbols, surrogate
+        // pairs, or lone surrogates.
+        // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+        // (U+FFFD).
+        if (codeUnit == 0x0000) {
+            result += '\uFFFD';
+            continue;
+        }
+        if (// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+        // U+007F, […]
+        codeUnit >= 0x0001 && codeUnit <= 0x001F || codeUnit == 0x007F || // If the character is the first character and is in the range [0-9]
+        // (U+0030 to U+0039), […]
+        index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039 || // If the character is the second character and is in the range [0-9]
+        // (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+        index == 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit == 0x002D) {
+            // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // If the character is not handled by one of the above rules and is
+        // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+        // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+        // U+005A), or [a-z] (U+0061 to U+007A), […]
+        if (codeUnit >= 0x0080 || codeUnit == 0x002D || codeUnit == 0x005F || codeUnit >= 0x0030 && codeUnit <= 0x0039 || codeUnit >= 0x0041 && codeUnit <= 0x005A || codeUnit >= 0x0061 && codeUnit <= 0x007A) {
+            // the character itself
+            result += string.charAt(index);
+            continue;
+        }
+        // Otherwise, the escaped character.
+        // https://drafts.csswg.org/cssom/#escape-a-character
+        result += '\\' + string.charAt(index);
+    }
+    return result;
+}
+
+export { cssEscape as default };

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;