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

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { default as SyntaxRuleType } from './syntax-rule-type';
 export { default as MasterCSS, default } from './core';
 export * from './types/config';
 export * from './types/syntax';
+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';

package/dist/index.mjs

@@ -7,6 +7,7 @@ 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 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';

package/dist/layer.cjs

@@ -1,65 +1,26 @@
 'use strict';
 
-var findNativeCssRuleIndex = require('./shared/utils/find-native-css-rule-index.cjs');
-
 class Layer {
     name;
     css;
     rules;
-    usages;
-    native;
+    tokenCounts;
     constructor(name, css){
         this.name = name;
         this.css = css;
         this.rules = [];
-        this.usages = {};
-        this.native = null;
+        this.tokenCounts = new Map();
+    }
+    attach() {
+        this.css.rules.push(this);
     }
-    insert(rule, index) {
+    detach() {
+        this.css.rules.splice(this.css.rules.indexOf(this), 1);
+    }
+    insert(rule, index = this.rules.length) {
         if (this.rules.find(({ key })=>key === rule.key)) return;
         if (!this.css.rules.includes(this)) {
-            this.css.rules.push(this);
-            const nativeSheet = this.css.style?.sheet;
-            if (nativeSheet && !this.native?.parentStyleSheet) {
-                const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
-                this.native = nativeSheet.cssRules.item(insertedIndex);
-            }
-        }
-        if (index === undefined) {
-            index = this.rules.length;
-        }
-        if (this.native) {
-            let cssRuleIndex = 0;
-            const lastCssRule = function getLastCssRule(layer, index) {
-                let lastCssRule;
-                const previouRule = layer.rules[index];
-                if (previouRule && 'nodes' in previouRule) {
-                    if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
-                    const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
-                    lastCssRule = lastNativeRule.native;
-                }
-                return lastCssRule;
-            }(this, index - 1);
-            if (lastCssRule) {
-                for(let i = 0; i < this.native.cssRules.length; i++){
-                    if (this.native.cssRules[i] === lastCssRule) {
-                        cssRuleIndex = i + 1;
-                        break;
-                    }
-                }
-            }
-            for(let i = 0; i < rule.nodes.length;){
-                try {
-                    const node = rule.nodes[i];
-                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
-                    node.native = this.native.cssRules.item(insertedIndex);
-                    cssRuleIndex++;
-                    i++;
-                } catch (error) {
-                    console.error(error, rule.nodes[i]);
-                    rule.nodes.splice(i, 1);
-                }
-            }
+            this.attach();
         }
         this.rules.splice(index, 0, rule);
         return index;
@@ -68,26 +29,7 @@ class Layer {
         const rule = this.rules.find((rule)=>rule.key === key);
         if (!rule) return;
         if (this.rules.length === 1) {
-            const indexOfLayer = this.css.rules.indexOf(this);
-            this.css.rules.splice(indexOfLayer, 1);
-            const nativeSheet = this.css.style?.sheet;
-            if (nativeSheet && this.native?.parentStyleSheet) {
-                const foundIndex = findNativeCssRuleIndex(nativeSheet.cssRules, this.native);
-                if (foundIndex !== -1) {
-                    nativeSheet.deleteRule(foundIndex);
-                }
-            }
-        }
-        if (this.native?.cssRules && 'nodes' in rule) {
-            for (const node of rule.nodes){
-                if (node.native) {
-                    const foundIndex = findNativeCssRuleIndex(this.native.cssRules, node.native);
-                    if (foundIndex !== -1) {
-                        // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
-                        this.native.deleteRule(foundIndex);
-                    }
-                }
-            }
+            this.detach();
         }
         this.rules.splice(this.rules.indexOf(rule), 1);
         return rule;
@@ -98,16 +40,7 @@ class Layer {
         if (indexOfLayer !== -1) {
             this.css.rules.splice(indexOfLayer, 1);
         }
-        // @ts-expect-error
-        this.usages = {};
-        const nativeSheet = this.css.style?.sheet;
-        if (this.native && nativeSheet) {
-            const foundIndex = findNativeCssRuleIndex(nativeSheet.cssRules, this.native);
-            if (foundIndex !== -1) {
-                nativeSheet.deleteRule(foundIndex);
-            }
-            this.native = null;
-        }
+        this.tokenCounts.clear();
     }
     get text() {
         return '@layer ' + this.name + '{' + this.rules.map(({ text })=>text).join('') + '}';

package/dist/layer.d.ts

@@ -4,9 +4,10 @@ export default class Layer {
     name: string;
     css: MasterCSS;
     readonly rules: Rule[];
-    readonly usages: Record<string, number>;
-    native: CSSLayerBlockRule | null;
+    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;
     reset(): void;

package/dist/layer.mjs

@@ -1,63 +1,24 @@
-import findNativeCSSRuleIndex from './shared/utils/find-native-css-rule-index.mjs';
-
 class Layer {
     name;
     css;
     rules;
-    usages;
-    native;
+    tokenCounts;
     constructor(name, css){
         this.name = name;
         this.css = css;
         this.rules = [];
-        this.usages = {};
-        this.native = null;
+        this.tokenCounts = new Map();
+    }
+    attach() {
+        this.css.rules.push(this);
     }
-    insert(rule, index) {
+    detach() {
+        this.css.rules.splice(this.css.rules.indexOf(this), 1);
+    }
+    insert(rule, index = this.rules.length) {
         if (this.rules.find(({ key })=>key === rule.key)) return;
         if (!this.css.rules.includes(this)) {
-            this.css.rules.push(this);
-            const nativeSheet = this.css.style?.sheet;
-            if (nativeSheet && !this.native?.parentStyleSheet) {
-                const insertedIndex = nativeSheet.insertRule(this.text, nativeSheet.cssRules.length);
-                this.native = nativeSheet.cssRules.item(insertedIndex);
-            }
-        }
-        if (index === undefined) {
-            index = this.rules.length;
-        }
-        if (this.native) {
-            let cssRuleIndex = 0;
-            const lastCssRule = function getLastCssRule(layer, index) {
-                let lastCssRule;
-                const previouRule = layer.rules[index];
-                if (previouRule && 'nodes' in previouRule) {
-                    if (!previouRule.nodes.length) return getLastCssRule(layer, index - 1);
-                    const lastNativeRule = previouRule.nodes[previouRule.nodes.length - 1];
-                    lastCssRule = lastNativeRule.native;
-                }
-                return lastCssRule;
-            }(this, index - 1);
-            if (lastCssRule) {
-                for(let i = 0; i < this.native.cssRules.length; i++){
-                    if (this.native.cssRules[i] === lastCssRule) {
-                        cssRuleIndex = i + 1;
-                        break;
-                    }
-                }
-            }
-            for(let i = 0; i < rule.nodes.length;){
-                try {
-                    const node = rule.nodes[i];
-                    const insertedIndex = this.native.insertRule(node.text, cssRuleIndex);
-                    node.native = this.native.cssRules.item(insertedIndex);
-                    cssRuleIndex++;
-                    i++;
-                } catch (error) {
-                    console.error(error, rule.nodes[i]);
-                    rule.nodes.splice(i, 1);
-                }
-            }
+            this.attach();
         }
         this.rules.splice(index, 0, rule);
         return index;
@@ -66,26 +27,7 @@ class Layer {
         const rule = this.rules.find((rule)=>rule.key === key);
         if (!rule) return;
         if (this.rules.length === 1) {
-            const indexOfLayer = this.css.rules.indexOf(this);
-            this.css.rules.splice(indexOfLayer, 1);
-            const nativeSheet = this.css.style?.sheet;
-            if (nativeSheet && this.native?.parentStyleSheet) {
-                const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
-                if (foundIndex !== -1) {
-                    nativeSheet.deleteRule(foundIndex);
-                }
-            }
-        }
-        if (this.native?.cssRules && 'nodes' in rule) {
-            for (const node of rule.nodes){
-                if (node.native) {
-                    const foundIndex = findNativeCSSRuleIndex(this.native.cssRules, node.native);
-                    if (foundIndex !== -1) {
-                        // todo: Firefox throw "Uncaught NS_ERROR_FAILURE". Reproduce: Add '@fade|1s @fade|2s' and remove '@fade|1s @fade|2s'
-                        this.native.deleteRule(foundIndex);
-                    }
-                }
-            }
+            this.detach();
         }
         this.rules.splice(this.rules.indexOf(rule), 1);
         return rule;
@@ -96,16 +38,7 @@ class Layer {
         if (indexOfLayer !== -1) {
             this.css.rules.splice(indexOfLayer, 1);
         }
-        // @ts-expect-error
-        this.usages = {};
-        const nativeSheet = this.css.style?.sheet;
-        if (this.native && nativeSheet) {
-            const foundIndex = findNativeCSSRuleIndex(nativeSheet.cssRules, this.native);
-            if (foundIndex !== -1) {
-                nativeSheet.deleteRule(foundIndex);
-            }
-            this.native = null;
-        }
+        this.tokenCounts.clear();
     }
     get text() {
         return '@layer ' + this.name + '{' + this.rules.map(({ text })=>text).join('') + '}';

package/dist/non-layer.cjs

@@ -5,11 +5,11 @@ var findNativeCssRuleIndex = require('./shared/utils/find-native-css-rule-index.
 class NonLayer {
     css;
     rules;
-    usages;
+    tokenCounts;
     constructor(css){
         this.css = css;
         this.rules = [];
-        this.usages = {};
+        this.tokenCounts = new Map();
     }
     insert(rule) {
         if (this.rules.includes(rule)) return;
@@ -57,8 +57,7 @@ class NonLayer {
             }
         }
         this.rules.length = 0;
-        // @ts-expect-error
-        this.usages = {};
+        this.tokenCounts.clear();
     }
 }
 

package/dist/non-layer.d.ts

@@ -3,7 +3,7 @@ import { Rule } from './rule';
 export default class NonLayer {
     css: MasterCSS;
     readonly rules: Rule[];
-    readonly usages: Record<string, number>;
+    readonly tokenCounts: Map<string, number>;
     constructor(css: MasterCSS);
     insert(rule: Rule): void;
     delete(key: string): Rule | undefined;

package/dist/non-layer.mjs

@@ -3,11 +3,11 @@ import findNativeCSSRuleIndex from './shared/utils/find-native-css-rule-index.mj
 class NonLayer {
     css;
     rules;
-    usages;
+    tokenCounts;
     constructor(css){
         this.css = css;
         this.rules = [];
-        this.usages = {};
+        this.tokenCounts = new Map();
     }
     insert(rule) {
         if (this.rules.includes(rule)) return;
@@ -55,8 +55,7 @@ class NonLayer {
             }
         }
         this.rules.length = 0;
-        // @ts-expect-error
-        this.usages = {};
+        this.tokenCounts.clear();
     }
 }
 

package/dist/syntax-layer.cjs

@@ -1,296 +1,8 @@
 'use strict';
 
+var withSyntaxLayer = require('./factories/with-syntax-layer.cjs');
 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 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;
-                }
-            }
-        }
-        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 selectorText;
-                        let endCurlyBracketCount = 1;
-                        if (mode) {
-                            switch(this.css.config.modes?.[mode]){
-                                case 'media':
-                                    selectorText = ':root';
-                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){${selectorText}`;
-                                    endCurlyBracketCount++;
-                                    break;
-                                case 'host':
-                                    preifxCssRuleText = selectorText = `:host(.${mode})`;
-                                    if (!variable.value && this.css.config.defaultMode === mode) {
-                                        preifxCssRuleText += ',:host';
-                                        isDefaultMode = true;
-                                    }
-                                    break;
-                                case 'class':
-                                    preifxCssRuleText = selectorText = `.${mode}`;
-                                    if (!variable.value && this.css.config.defaultMode === mode) {
-                                        preifxCssRuleText += ',:root';
-                                        isDefaultMode = true;
-                                    }
-                                    break;
-                                default:
-                                    return;
-                            }
-                        } else {
-                            preifxCssRuleText = selectorText = ':root';
-                        }
-                        const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
-                        if (isDefaultMode) {
-                            newRule.nodes.unshift({
-                                selectorText,
-                                text: cssRuleText
-                            });
-                        } else {
-                            newRule.nodes.push({
-                                text: cssRuleText
-                            });
-                        }
-                    };
-                    if (variable.value) {
-                        addNative('', variable);
-                    }
-                    if (variable.modes) {
-                        for(const mode in variable.modes){
-                            addNative(mode, variable.modes[mode]);
-                        }
-                    }
-                    this.css.themeLayer.insert(newRule);
-                    this.css.themeLayer.usages[eachVariableName] = 1;
-                }
-            }
-        }
-    }
-    insertAnimations(syntaxRule) {
-        if (syntaxRule.animationNames) {
-            for (const eachAnimationName of syntaxRule.animationNames){
-                if (this.css.animationsNonLayer.rules.find(({ name })=>name === eachAnimationName)) {
-                    this.css.animationsNonLayer.usages[eachAnimationName]++;
-                } else {
-                    this.css.animationsNonLayer.insert(new rule.Rule(eachAnimationName, [
-                        {
-                            text: `@keyframes ${eachAnimationName}{` + Object.entries(this.css.animations[eachAnimationName]).map(([key, variables])=>`${key}{${Object.entries(variables).map(([name, value])=>name + ':' + value).join(';')}}`).join('') + '}'
-                        }
-                    ]));
-                    this.css.animationsNonLayer.usages[eachAnimationName] = 1;
-                }
-            }
-        }
-    }
-}
+const SyntaxLayer = withSyntaxLayer(layer);
 
 module.exports = SyntaxLayer;

package/dist/syntax-layer.d.ts

@@ -1,17 +1,18 @@
 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;
-}
+declare const SyntaxLayer: {
+    new (...args: any[]): {
+        rules: import("./syntax-rule").SyntaxRule[];
+        insert(syntaxRule: import("./syntax-rule").SyntaxRule): number | undefined;
+        delete(key: string): import("./syntax-rule").SyntaxRule | undefined;
+        insertVariables(syntaxRule: import("./syntax-rule").SyntaxRule): void;
+        insertAnimations(syntaxRule: import("./syntax-rule").SyntaxRule): void;
+        readonly tokenCounts: Map<string, number>;
+        name: string;
+        css: import("./core").default;
+        attach(): void;
+        detach(): void;
+        reset(): void;
+        readonly text: string;
+    };
+} & typeof Layer;
+export default SyntaxLayer;