@master/css 2.0.0-rc.26 → 2.0.0-rc.27

package/dist/core.d.ts

@@ -1,25 +1,30 @@
 import { Rule, type NativeRule, type RegisteredRule } from './rule';
 import type { Config, AnimationDefinitions } from './config';
 import './types/global';
-type VariableValue = {
+type VariableCommon = {
+    usage?: number;
+    group?: string;
+    name: string;
+    key: string;
+    modes?: {
+        [mode: string]: TypeVariable;
+    };
+};
+export type StringVariable = {
     type: 'string';
     value: string;
-} | {
+};
+export type NumberVariable = {
     type: 'number';
     value: number;
-} | {
+};
+export type ColorVariable = {
     type: 'color';
     value: string;
     space: 'rgb' | 'hsl';
 };
-export type Variable = Omit<VariableValue, 'value' | 'space'> & {
-    value?: any;
-    space?: any;
-    usage?: number;
-    modes?: {
-        [mode: string]: VariableValue;
-    };
-};
+export type TypeVariable = StringVariable | NumberVariable | ColorVariable;
+export type Variable = TypeVariable & VariableCommon;
 export default class MasterCSS {
     customConfig: Config;
     static config: Config;
@@ -27,8 +32,7 @@ export default class MasterCSS {
     readonly ruleBy: Record<string, Rule>;
     readonly classesUsage: Record<string, number>;
     readonly config: Config;
-    readonly RegisteredSemanticRules: RegisteredRule[];
-    readonly RegisteredRules: RegisteredRule[];
+    readonly Rules: RegisteredRule[];
     constructor(customConfig?: Config);
     resolve(): void;
     /**
@@ -72,7 +76,7 @@ export default class MasterCSS {
     * 11. media width where selectors
     * 12. media width selectors
     */
-    insert(rule: Rule): void;
+    insert(rule: Rule): number | undefined;
     get text(): string;
     handleRuleWithAnimationNames(rule: Rule, initializing?: boolean): void;
     handleRuleWithVariableNames(rule: Rule, initializing?: boolean): void;

package/dist/core.mjs

@@ -1,9 +1,9 @@
 import { Rule } from './rule.mjs';
 import { config } from './config/index.mjs';
-import { Layer } from './layer.mjs';
-import { hexToRgb } from './utils/hex-to-rgb.mjs';
+import Layer from './layer.mjs';
+import hexToRgb from './utils/hex-to-rgb.mjs';
 import { flattenObject } from './utils/flatten-object.mjs';
-import extendConfig from './functions/extend-config.mjs';
+import extendConfig from './utils/extend-config.mjs';
 
 class MasterCSS {
     customConfig;
@@ -12,15 +12,13 @@ class MasterCSS {
     ruleBy;
     classesUsage;
     config;
-    RegisteredSemanticRules;
-    RegisteredRules;
+    Rules;
     constructor(customConfig = config){
         this.customConfig = customConfig;
         this.rules = [];
         this.ruleBy = {};
         this.classesUsage = {};
-        this.RegisteredSemanticRules = [];
-        this.RegisteredRules = [];
+        this.Rules = [];
         if (!customConfig?.override) {
             this.config = extendConfig(config, customConfig);
         } else {
@@ -38,8 +36,7 @@ class MasterCSS {
         this.variables = {};
         this.queries = {};
         this.animations = {};
-        this.RegisteredRules.length = 0;
-        this.RegisteredSemanticRules.length = 0;
+        this.Rules.length = 0;
         this.variablesNativeRules = {};
         this.hasKeyframesRule = false;
         const colorVariableNames = {
@@ -47,7 +44,7 @@ class MasterCSS {
             currentColor: undefined,
             transparent: undefined
         };
-        const { styles, selectors, variables, semantics, queries, rules, animations } = this.config;
+        const { styles, selectors, variables, utilities, queries, rules, animations } = this.config;
         function escapeString(str) {
             return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
         }
@@ -78,89 +75,104 @@ class MasterCSS {
         }
         if (variables) {
             const unexecutedAliasVariable = {};
-            const parseVariable = (variable, name, mode)=>{
-                if (!variable) return;
-                const addVariable = (name, variableValue, replacedMode, alpha)=>{
-                    if (variableValue === undefined) return;
-                    if (variableValue.type === 'color') {
+            const resolveVariable = (variableDefinition, name, mode)=>{
+                if (!variableDefinition === undefined || variableDefinition === null) return;
+                const addVariable = (name, variable, replacedMode, alpha)=>{
+                    if (variable === undefined) return;
+                    const flatName = name.join('-');
+                    const groups = name.slice(0, -1).filter(Boolean);
+                    const key = (name[0] === '' ? '-' : '') + name[name.length - 1];
+                    variable.key = key;
+                    variable.name = flatName;
+                    if (groups.length) variable.group = groups.join('.');
+                    if (variable.type === 'color') {
                         if (alpha) {
-                            const slashIndex = variableValue.value.indexOf('/');
-                            variableValue = {
-                                ...variableValue,
-                                value: slashIndex === -1 ? variableValue.value + ' / ' + (alpha.startsWith('0.') ? alpha.slice(1) : alpha) : variableValue.value.slice(0, slashIndex + 2) + String(+variableValue.value.slice(slashIndex + 2) * +alpha).slice(1)
+                            const slashIndex = variable.value.indexOf('/');
+                            variable = {
+                                ...variable,
+                                value: slashIndex === -1 ? variable.value + ' / ' + (alpha.startsWith('0.') ? alpha.slice(1) : alpha) : variable.value.slice(0, slashIndex + 2) + String(+variable.value.slice(slashIndex + 2) * +alpha).slice(1)
                             };
                         }
-                        colorVariableNames[name] = undefined;
+                        colorVariableNames[flatName] = undefined;
                     }
                     const currentMode = replacedMode ?? mode;
                     if (currentMode !== undefined) {
-                        if (Object.prototype.hasOwnProperty.call(this.variables, name)) {
-                            const variable = this.variables[name];
+                        if (Object.prototype.hasOwnProperty.call(this.variables, flatName)) {
+                            const foundVariable = this.variables[flatName];
                             if (currentMode) {
-                                if (!variable.modes) {
-                                    variable.modes = {};
+                                if (!foundVariable.modes) {
+                                    foundVariable.modes = {};
                                 }
-                                variable.modes[currentMode] = variableValue;
+                                foundVariable.modes[currentMode] = variable;
                             } else {
-                                variable.value = variableValue.value;
-                                if (variableValue.type === 'color') {
-                                    variable.space = variableValue.space;
+                                foundVariable.value = variable.value;
+                                if (variable.type === 'color') {
+                                    foundVariable.space = variable.space;
                                 }
                             }
                         } else {
                             if (currentMode) {
                                 const newVariable = {
-                                    type: variableValue.type,
+                                    key: variable.key,
+                                    name: variable.name,
+                                    group: variable.group,
+                                    type: variable.type,
                                     modes: {
-                                        [currentMode]: variableValue
+                                        [currentMode]: variable
                                     }
                                 };
-                                if (variableValue.type === 'color') {
-                                    newVariable.space = variableValue.space;
+                                if (variable.type === 'color') {
+                                    newVariable.space = variable.space;
                                 }
-                                this.variables[name] = newVariable;
+                                this.variables[flatName] = newVariable;
                             } else {
-                                this.variables[name] = variableValue;
+                                this.variables[flatName] = variable;
                             }
                         }
                     } else {
-                        this.variables[name] = variableValue;
+                        this.variables[flatName] = variable;
                     }
                 };
-                const type = typeof variable;
-                if (type === 'object') {
-                    if (Array.isArray(variable)) {
+                if (typeof variableDefinition === 'object') {
+                    if (Array.isArray(variableDefinition)) {
                         addVariable(name, {
                             type: 'string',
-                            value: variable.join(',')
+                            value: variableDefinition.join(',')
                         });
                     } else {
-                        const keys = Object.keys(variable);
+                        const keys = Object.keys(variableDefinition);
                         for (const eachKey of keys){
                             if (eachKey === '' || eachKey.startsWith('@')) {
-                                parseVariable(variable[eachKey], name, eachKey || keys.some((eachKey)=>eachKey.startsWith('@')) ? eachKey.slice(1) : undefined);
+                                resolveVariable(variableDefinition[eachKey], name, eachKey || keys.some((eachKey)=>eachKey.startsWith('@')) ? eachKey.slice(1) : undefined);
                             } else {
-                                parseVariable(variable[eachKey], name + '-' + eachKey, undefined);
+                                resolveVariable(variableDefinition[eachKey], [
+                                    ...name,
+                                    eachKey
+                                ]);
                             }
                         }
                     }
-                } else if (type === 'number') {
+                } else if (typeof variableDefinition === 'number') {
                     addVariable(name, {
                         type: 'number',
-                        value: variable
+                        value: variableDefinition
                     });
-                    addVariable('-' + name, {
+                    addVariable([
+                        '',
+                        ...name
+                    ], {
                         type: 'number',
-                        value: variable * -1
+                        value: variableDefinition * -1
                     });
-                } else if (type === 'string') {
-                    const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variable);
+                } else if (typeof variableDefinition === 'string') {
+                    const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
+                    const flatName = name.join('-');
                     if (aliasResult) {
-                        if (!Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, name)) {
-                            unexecutedAliasVariable[name] = {};
+                        if (!Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, flatName)) {
+                            unexecutedAliasVariable[flatName] = {};
                         }
-                        unexecutedAliasVariable[name][mode] = ()=>{
-                            delete unexecutedAliasVariable[name][mode];
+                        unexecutedAliasVariable[flatName][mode] = ()=>{
+                            delete unexecutedAliasVariable[flatName][mode];
                             const [alias, aliasMode] = aliasResult[1].split('@');
                             if (alias) {
                                 if (Object.prototype.hasOwnProperty.call(unexecutedAliasVariable, alias)) {
@@ -196,7 +208,7 @@ class MasterCSS {
                             }
                         };
                     } else {
-                        const hexColorResult = /^#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.exec(variable);
+                        const hexColorResult = /^#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.exec(variableDefinition);
                         if (hexColorResult) {
                             const [r, g, b, a] = hexToRgb(hexColorResult[1]);
                             addVariable(name, {
@@ -205,7 +217,7 @@ class MasterCSS {
                                 space: 'rgb'
                             });
                         } else {
-                            const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variable);
+                            const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variableDefinition);
                             if (rgbFunctionResult) {
                                 addVariable(name, {
                                     type: 'color',
@@ -213,7 +225,7 @@ class MasterCSS {
                                     space: 'rgb'
                                 });
                             } else {
-                                const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variable);
+                                const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variableDefinition);
                                 if (hslFunctionResult) {
                                     addVariable(name, {
                                         type: 'color',
@@ -223,7 +235,7 @@ class MasterCSS {
                                 } else {
                                     addVariable(name, {
                                         type: 'string',
-                                        value: variable
+                                        value: variableDefinition
                                     });
                                 }
                             }
@@ -232,8 +244,11 @@ class MasterCSS {
                 }
             };
             for(const parnetKey in variables){
-                parseVariable(variables[parnetKey], parnetKey);
+                resolveVariable(variables[parnetKey], [
+                    parnetKey
+                ]);
             }
+            // todo: address to the target variable
             for (const name of Object.keys(unexecutedAliasVariable)){
                 for (const mode of Object.keys(unexecutedAliasVariable[name])){
                     unexecutedAliasVariable[name][mode]?.();
@@ -257,31 +272,31 @@ class MasterCSS {
             }
         }
         const flattedStyles = styles ? flattenObject(styles) : {};
-        const semanticNames = Object.keys(flattedStyles);
-        const handleSemanticName = (semanticName)=>{
-            if (Object.prototype.hasOwnProperty.call(this.styles, semanticName)) return;
-            const currentClass = this.styles[semanticName] = [];
-            const className = flattedStyles[semanticName];
+        const utilityNames = Object.keys(flattedStyles);
+        const handleUtilityName = (utilityName)=>{
+            if (Object.prototype.hasOwnProperty.call(this.styles, utilityName)) return;
+            const currentClass = this.styles[utilityName] = [];
+            const className = flattedStyles[utilityName];
             if (!className) return;
             const classNames = className.replace(/(?:\n(?:\s*))+/g, ' ').trim().split(' ');
             for (const eachClassName of classNames){
                 const handle = (className)=>{
                     if (Object.prototype.hasOwnProperty.call(this.stylesBy, className)) {
                         const currentRelation = this.stylesBy[className];
-                        if (!currentRelation.includes(semanticName)) {
-                            currentRelation.push(semanticName);
+                        if (!currentRelation.includes(utilityName)) {
+                            currentRelation.push(utilityName);
                         }
                     } else {
                         this.stylesBy[className] = [
-                            semanticName
+                            utilityName
                         ];
                     }
                     if (!currentClass.includes(className)) {
                         currentClass.push(className);
                     }
                 };
-                if (semanticNames.includes(eachClassName)) {
-                    handleSemanticName(eachClassName);
+                if (utilityNames.includes(eachClassName)) {
+                    handleUtilityName(eachClassName);
                     for (const parentClassName of this.styles[eachClassName]){
                         handle(parentClassName);
                     }
@@ -290,49 +305,54 @@ class MasterCSS {
                 }
             }
         };
-        for (const eachSemanticName of semanticNames){
-            handleSemanticName(eachSemanticName);
+        for (const eachUtilityName of utilityNames){
+            handleUtilityName(eachUtilityName);
         }
-        if (semantics) {
-            Object.entries(semantics).sort((a, b)=>a[0].localeCompare(b[0])).forEach(([id, declarations], index)=>{
-                this.RegisteredSemanticRules.push({
-                    id: '.' + id,
-                    match: new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm'),
-                    order: index,
-                    definition: {
-                        declarations,
-                        layer: Layer.Semantic
-                    }
-                });
-            });
-        }
-        if (rules) {
-            const rulesEntries = Object.entries(rules).sort((a, b)=>{
+        if (rules || utilities) {
+            const rulesEntries = [];
+            if (utilities) {
+                for(const utilityName in utilities){
+                    const declarations = utilities[utilityName];
+                    rulesEntries.push([
+                        utilityName,
+                        {
+                            declarations,
+                            layer: Layer.Utility
+                        }
+                    ]);
+                }
+            }
+            if (rules) {
+                rulesEntries.push(...Object.entries(rules));
+            }
+            const rulesEntriesLength = rulesEntries.length;
+            const colorNames = Object.keys(colorVariableNames);
+            rulesEntries.sort((a, b)=>{
                 if (a[1].layer !== b[1].layer) {
                     return (b[1].layer || 0) - (a[1].layer || 0);
                 }
                 return b[0].localeCompare(a[0]);
-            });
-            const rulesEntriesLength = rulesEntries.length;
-            const colorNames = Object.keys(colorVariableNames);
-            rulesEntries.forEach(([id, eachRuleDefinition], index)=>{
-                const eachRegisteredRule = {
+            }).forEach(([id, eachRuleDefinition], index)=>{
+                const EachRule = {
                     id,
+                    keys: [],
                     variables: {},
-                    order: this.RegisteredSemanticRules.length + rulesEntriesLength - 1 - index,
+                    matchers: {},
+                    order: rulesEntriesLength - 1 - index,
                     definition: eachRuleDefinition
                 };
-                this.RegisteredRules.push(eachRegisteredRule);
-                const match = eachRuleDefinition.match;
+                this.Rules.push(EachRule);
+                const { matcher, layer, subkey, ambiguousKeys, ambiguousValues, sign } = eachRuleDefinition;
+                if (layer === Layer.Utility) {
+                    EachRule.id = '.' + id;
+                    EachRule.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
+                }
                 // todo: 不可使用 startsWith 判斷，應改為更精準的從 config.variables 取得目標變數群組，但 config.variables 中的值還沒被 resolve 像是 Array
-                const addResolvedVariables = (prefix)=>{
+                const addResolvedVariables = (groupName)=>{
                     for(const eachVariableName in this.variables){
-                        if (eachVariableName.startsWith(prefix + '-') || eachVariableName.startsWith('-' + prefix + '-')) {
-                            const simplifiedName = eachVariableName.slice(prefix.length + (prefix.startsWith('-') ? 0 : 1));
-                            eachRegisteredRule.variables[simplifiedName] = {
-                                ...this.variables[eachVariableName],
-                                name: eachVariableName
-                            };
+                        const eachVariable = this.variables[eachVariableName];
+                        if (eachVariable.group === groupName) {
+                            EachRule.variables[eachVariable.key] = eachVariable;
                         }
                     }
                 };
@@ -344,26 +364,49 @@ class MasterCSS {
                 }
                 // 2. custom `config.variables`
                 addResolvedVariables(id);
-                if (match) {
-                    if (Array.isArray(match)) {
-                        const [key, values = []] = match;
-                        const valueMatches = [];
-                        if (values.length) {
-                            valueMatches.push(`(?:${values.join('|')})(?![a-zA-Z0-9-])`);
-                        }
-                        if (Object.keys(eachRegisteredRule.variables).length) {
-                            valueMatches.push(`(?:${Object.keys(eachRegisteredRule.variables).join('|')})(?![a-zA-Z0-9-])`);
+                const keys = [];
+                let { key } = eachRuleDefinition;
+                if (layer === Layer.NativeShorthand || layer === Layer.Native) {
+                    if (!key) eachRuleDefinition.key = key = id;
+                    keys.push(id);
+                }
+                if (sign) {
+                    EachRule.matchers.arbitrary = new RegExp(`^${sign}[^!*>+~:[@_]+\\|`);
+                } else if (!matcher) {
+                    const colorsPatten = colorNames.join('|');
+                    if (!key && !subkey) {
+                        keys.push(id);
+                    } else {
+                        if (key && !keys.includes(key)) keys.push(key);
+                        if (subkey) keys.push(subkey);
+                        if (layer === Layer.Shorthand) {
+                            keys.push(id);
                         }
-                        if (eachRuleDefinition.colored) {
-                            valueMatches.push('#', '(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\\(.*\\)', `(?:${colorNames.join('|')})(?![a-zA-Z0-9-])`);
+                    }
+                    if (ambiguousKeys?.length) {
+                        const ambiguousKeyPattern = ambiguousKeys.length > 1 ? `(?:${ambiguousKeys.join('|')})` : ambiguousKeys[0];
+                        const variableKeys = Object.keys(EachRule.variables);
+                        if (ambiguousValues?.length) {
+                            const ambiguousValuePatterns = [];
+                            for (const eachAmbiguousValue of ambiguousValues){
+                                if (eachAmbiguousValue instanceof RegExp) {
+                                    ambiguousValuePatterns.push(eachAmbiguousValue.source.replace('\\$colors', colorsPatten));
+                                } else {
+                                    ambiguousValuePatterns.unshift(`${eachAmbiguousValue}(?:\\b|_)`);
+                                }
+                            }
+                            EachRule.matchers.value = new RegExp(`^${ambiguousKeyPattern}:(?:${ambiguousValuePatterns.join('|')})[^|]*?(?:@|$)`);
                         }
-                        if (eachRuleDefinition.numeric) {
-                            valueMatches.push('[\\d\\.]', '(?:max|min|calc|clamp)\\(.*\\)');
+                        if (variableKeys.length) {
+                            EachRule.matchers.variable = new RegExp(`^${ambiguousKeyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
                         }
-                        if (valueMatches.length) eachRegisteredRule.match = new RegExp(`^${key}:(?:${valueMatches.join('|')})[^|]*?(?:@|$)`);
-                    } else {
-                        eachRegisteredRule.match = match;
                     }
+                } else {
+                    EachRule.matchers.arbitrary = matcher;
+                }
+                if (keys.length) {
+                    EachRule.keys = keys;
+                    EachRule.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:`);
                 }
             });
         }
@@ -373,17 +416,29 @@ class MasterCSS {
      * @param className
      * @returns css text
      */ match(className) {
-        // 1. rules
-        for (const eachRegisteredRule of this.RegisteredRules){
-            if (eachRegisteredRule.match?.test(className) || (eachRegisteredRule.definition.layer === Layer.Native || eachRegisteredRule.definition.layer === Layer.NativeShorthand || eachRegisteredRule.definition.layer === Layer.CoreNative || eachRegisteredRule.definition.layer === Layer.CoreNativeShorthand) && className.startsWith(eachRegisteredRule.id + ':')) {
-                return eachRegisteredRule;
-            }
+        /**
+         * 1. variable
+         * @example fg:primary bg:blue
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.variable?.test(className)) return EachRule;
         }
-        // 2. semantic rules
-        for (const EachRegisteredSemanticRule of this.RegisteredSemanticRules){
-            if (EachRegisteredSemanticRule.match?.test(className)) {
-                return EachRegisteredSemanticRule;
-            }
+        /**
+         * 2. value (ambiguous.key * ambiguous.values)
+         * @example bg:current box:content font:12
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.value?.test(className)) return EachRule;
+        }
+        /**
+         * 3. full key
+         * @example text-align:center color:blue-40
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.key?.test(className)) return EachRule;
+        }
+        /**
+         * 4. arbitrary
+         * @example custom RegExp, utility
+         */ for (const EachRule of this.Rules){
+            if (EachRule.matchers.arbitrary?.test(className)) return EachRule;
         }
     }
     /**
@@ -401,14 +456,19 @@ class MasterCSS {
      * @returns Rule
      */ create(syntax) {
         if (Object.prototype.hasOwnProperty.call(this.ruleBy, syntax)) return this.ruleBy[syntax];
-        const RegistedRule = this.match(syntax);
-        if (RegistedRule) {
-            return new Rule(syntax, RegistedRule, this);
+        const RegisteredRule = this.match(syntax);
+        if (RegisteredRule) {
+            return new Rule(syntax, RegisteredRule, this);
         }
     }
     /**
      * 根據蒐集到的所有 DOM class 重新 create
-     */ refresh(customConfig = this.customConfig) {
+     */ refresh(customConfig) {
+        if (customConfig) {
+            this.customConfig = customConfig;
+        } else {
+            customConfig = this.customConfig;
+        }
         if (!customConfig?.override) {
             // @ts-ignore
             this.config = extendConfig(config, customConfig);
@@ -526,7 +586,7 @@ class MasterCSS {
                     if (!keyframe.usage) keyframe.usage = 0;
                     if (!--keyframe.usage && keyframe.native) {
                         const nativeIndex = keyframeRule.natives.indexOf(keyframe.native);
-                        this.style.sheet?.deleteRule(Object.keys(this.variablesNativeRules).length + nativeIndex);
+                        sheet?.deleteRule(Object.keys(this.variablesNativeRules).length + nativeIndex);
                         keyframeRule.natives.splice(nativeIndex, 1);
                         keyframe.native = undefined;
                     }
@@ -752,7 +812,6 @@ class MasterCSS {
         }
         this.rules.splice(index, 0, rule);
         this.ruleBy[className] = rule;
-        // 只在瀏覽器端運行
         if (this.style) {
             const sheet = this.style.sheet;
             let cssRuleIndex = 0;
@@ -788,6 +847,7 @@ class MasterCSS {
         // animations
         this.handleRuleWithAnimationNames(rule);
         rule.definition.insert?.call(rule);
+        return index;
     }
     get text() {
         return this.rules.map((eachRule)=>eachRule.text).join('');
@@ -851,7 +911,7 @@ class MasterCSS {
                 if (variable.usage) {
                     variable.usage++;
                 } else {
-                    const addProperty = (mode, variableValue)=>{
+                    const addProperty = (mode, variable)=>{
                         let nativeRule = this.variablesNativeRules[mode];
                         if (!nativeRule) {
                             let cssRule;
@@ -921,7 +981,7 @@ class MasterCSS {
                         }
                         const propertyName = '--' + eachVariableName;
                         if (!initializing || !nativeRule.cssRule.style.getPropertyValue(propertyName)) {
-                            nativeRule.cssRule.style.setProperty(propertyName, String(variableValue.value));
+                            nativeRule.cssRule.style.setProperty(propertyName, String(variable.value));
                         }
                     };
                     if (variable.value) {