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

package/dist/core.mjs

@@ -0,0 +1,737 @@
+import { SyntaxRule } from './syntax-rule.mjs';
+import { config } from './config/index.mjs';
+import hexToRgb from './utils/hex-to-rgb.mjs';
+import { flattenObject } from './utils/flatten-object.mjs';
+import extendConfig from './utils/extend-config.mjs';
+import { Rule } from './rule.mjs';
+import SyntaxRuleType from './syntax-rule-type.mjs';
+import Layer from './layer.mjs';
+import SyntaxLayer from './syntax-layer.mjs';
+import NonLayer from './non-layer.mjs';
+import registerGlobal from './register-global.mjs';
+
+class MasterCSS {
+    customConfig;
+    static config = config;
+    definedRules;
+    config;
+    layerStatementRule;
+    rules;
+    animationsNonLayer;
+    baseLayer;
+    themeLayer;
+    presetLayer;
+    componentsLayer;
+    generalLayer;
+    components;
+    selectors;
+    variables;
+    at;
+    animations;
+    constructor(customConfig){
+        this.customConfig = customConfig;
+        this.definedRules = [];
+        this.layerStatementRule = new Rule('layer-statement', [
+            {
+                text: '@layer base,theme,preset,components,general;'
+            }
+        ]);
+        this.rules = [
+            this.layerStatementRule
+        ];
+        this.animationsNonLayer = new NonLayer(this);
+        this.baseLayer = new SyntaxLayer('base', this);
+        this.themeLayer = new Layer('theme', this);
+        this.presetLayer = new SyntaxLayer('preset', this);
+        this.componentsLayer = new SyntaxLayer('components', this);
+        this.generalLayer = new SyntaxLayer('general', this);
+        this.components = new Map();
+        this.selectors = new Map();
+        this.variables = new Map();
+        this.at = new Map();
+        this.animations = new Map();
+        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
+        this.resolve();
+    }
+    get text() {
+        return this.rules.sort((a, b)=>{
+            const order = [
+                'layer-statement',
+                'base',
+                'theme',
+                'preset',
+                'components',
+                'general'
+            ];
+            const indexA = order.indexOf(a.name) === -1 ? Infinity : order.indexOf(a.name);
+            const indexB = order.indexOf(b.name) === -1 ? Infinity : order.indexOf(b.name);
+            return indexA - indexB;
+        }).map(({ text })=>text).join('');
+    }
+    resolve() {
+        this.components.clear();
+        this.selectors.clear();
+        this.variables.clear();
+        this.at.clear();
+        this.animations.clear();
+        this.definedRules.length = 0;
+        const colorVariableNames = {
+            current: undefined,
+            currentColor: undefined,
+            transparent: undefined
+        };
+        const { components, selectors, variables, utilities, at, rules, animations } = this.config;
+        function escapeString(str) {
+            return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+        }
+        if (selectors) {
+            const resolvedSelectors = flattenObject(selectors);
+            for(const eachSelectorName in resolvedSelectors){
+                const eachResolvedSelectorText = resolvedSelectors[eachSelectorName];
+                const regexp = new RegExp(escapeString(eachSelectorName) + '(?![a-z-])');
+                for (const eachNewSelectorText of Array.isArray(eachResolvedSelectorText) ? eachResolvedSelectorText : [
+                    eachResolvedSelectorText
+                ]){
+                    const vendor = eachNewSelectorText.match(/^:(?::)?-(webkit|moz|ms|o)-/m)?.[1] ?? '';
+                    let selectorValues = this.selectors.get(vendor);
+                    if (!selectorValues) {
+                        this.selectors.set(vendor, selectorValues = []);
+                    }
+                    let currentSelectValue = selectorValues.find(([_valueRegexp])=>_valueRegexp === regexp);
+                    if (!currentSelectValue) {
+                        currentSelectValue = [
+                            regexp,
+                            []
+                        ];
+                        selectorValues.push(currentSelectValue);
+                    }
+                    currentSelectValue[1].push(eachNewSelectorText);
+                }
+            }
+        }
+        if (variables) {
+            const aliasVariableModeResolvers = new Map;
+            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 = 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[flatName] = undefined;
+                    }
+                    /**
+                     * resolve `variables.screen-*` to `at.*`
+                     */ if (variable.name.startsWith('screen-') && variable.type === 'number') {
+                        this.at.set(variable.name.slice(7), variable.value);
+                    }
+                    const currentMode = replacedMode ?? mode;
+                    if (currentMode !== undefined) {
+                        const foundVariable = this.variables.get(flatName);
+                        if (foundVariable) {
+                            if (currentMode) {
+                                if (!foundVariable.modes) {
+                                    foundVariable.modes = {};
+                                }
+                                foundVariable.modes[currentMode] = variable;
+                            } else {
+                                foundVariable.value = variable.value;
+                                if (variable.type === 'color') {
+                                    foundVariable.space = variable.space;
+                                }
+                            }
+                        } else {
+                            if (currentMode) {
+                                const newVariable = {
+                                    key: variable.key,
+                                    name: variable.name,
+                                    group: variable.group,
+                                    type: variable.type,
+                                    modes: {
+                                        [currentMode]: variable
+                                    }
+                                };
+                                if (variable.type === 'color') {
+                                    newVariable.space = variable.space;
+                                }
+                                this.variables.set(flatName, newVariable);
+                            } else {
+                                this.variables.set(flatName, variable);
+                            }
+                        }
+                    } else {
+                        this.variables.set(flatName, variable);
+                    }
+                };
+                if (typeof variableDefinition === 'object') {
+                    if (Array.isArray(variableDefinition)) {
+                        addVariable(name, {
+                            type: 'string',
+                            value: variableDefinition.join(',')
+                        });
+                    } else {
+                        const keys = Object.keys(variableDefinition);
+                        for (const eachKey of keys){
+                            if (eachKey === '' || eachKey.startsWith('@')) {
+                                resolveVariable(variableDefinition[eachKey], name, eachKey || keys.some((eachKey)=>eachKey.startsWith('@')) ? eachKey.slice(1) : undefined);
+                            } else {
+                                resolveVariable(variableDefinition[eachKey], [
+                                    ...name,
+                                    eachKey
+                                ]);
+                            }
+                        }
+                    }
+                } else if (typeof variableDefinition === 'number') {
+                    addVariable(name, {
+                        type: 'number',
+                        value: variableDefinition
+                    });
+                    addVariable([
+                        '',
+                        ...name
+                    ], {
+                        type: 'number',
+                        value: variableDefinition * -1
+                    });
+                } else if (typeof variableDefinition === 'string') {
+                    const aliasResult = /^\$\((.*?)\)(?: ?\/ ?(.+?))?$/.exec(variableDefinition);
+                    const flatName = name.join('-');
+                    if (aliasResult) {
+                        let aliasVariableModeResolver = aliasVariableModeResolvers.get(flatName);
+                        if (!aliasVariableModeResolver) {
+                            aliasVariableModeResolvers.set(flatName, aliasVariableModeResolver = {});
+                        }
+                        aliasVariableModeResolver[mode] = ()=>{
+                            delete aliasVariableModeResolver[mode];
+                            const [alias, aliasMode] = aliasResult[1].split('@');
+                            if (alias) {
+                                const eachAliasModeVariableResolver = aliasVariableModeResolvers.get(alias);
+                                if (eachAliasModeVariableResolver) {
+                                    for (const mode of Object.keys(eachAliasModeVariableResolver)){
+                                        eachAliasModeVariableResolver[mode]?.();
+                                    }
+                                }
+                                const aliasVariable = this.variables.get(alias);
+                                if (aliasVariable) {
+                                    if (aliasMode === undefined && aliasVariable.modes) {
+                                        addVariable(name, {
+                                            type: aliasVariable.type,
+                                            value: aliasVariable.value,
+                                            space: aliasVariable.space
+                                        }, '', aliasResult[2]);
+                                        for(const mode in aliasVariable.modes){
+                                            addVariable(name, aliasVariable.modes[mode], mode, aliasResult[2]);
+                                        }
+                                    } else {
+                                        const variable = aliasMode !== undefined ? aliasVariable.modes?.[aliasMode] : aliasVariable;
+                                        if (variable) {
+                                            const newVariable = {
+                                                type: variable.type,
+                                                value: variable.value
+                                            };
+                                            if (variable.type === 'color') {
+                                                newVariable.space = variable.space;
+                                            }
+                                            addVariable(name, newVariable, undefined, aliasResult[2]);
+                                        }
+                                    }
+                                }
+                            }
+                        };
+                    } else {
+                        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, {
+                                type: 'color',
+                                value: `${r} ${g} ${b}${a === 1 ? '' : ' / ' + a}`,
+                                space: 'rgb'
+                            });
+                        } else {
+                            const rgbFunctionResult = /^rgb\( *([0-9]{1,3})(?: *, *| +)([0-9]{1,3})(?: *, *| +)([0-9]{1,3}) *(?:(?:,|\/) *(.*?) *)?\)$/.exec(variableDefinition);
+                            if (rgbFunctionResult) {
+                                addVariable(name, {
+                                    type: 'color',
+                                    value: rgbFunctionResult[1] + ' ' + rgbFunctionResult[2] + ' ' + rgbFunctionResult[3] + (rgbFunctionResult[4] ? ' / ' + (rgbFunctionResult[4].startsWith('0.') ? rgbFunctionResult[4].slice(1) : rgbFunctionResult[4]) : ''),
+                                    space: 'rgb'
+                                });
+                            } else {
+                                const hslFunctionResult = /^hsl\((.*?)\)$/.exec(variableDefinition);
+                                if (hslFunctionResult) {
+                                    addVariable(name, {
+                                        type: 'color',
+                                        value: hslFunctionResult[1],
+                                        space: 'hsl'
+                                    });
+                                } else {
+                                    addVariable(name, {
+                                        type: 'string',
+                                        value: variableDefinition
+                                    });
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+            for(const parnetKey in variables){
+                resolveVariable(variables[parnetKey], [
+                    parnetKey
+                ]);
+            }
+            // todo: address to the target variable
+            aliasVariableModeResolvers.forEach((aliasVariableModeResolver)=>{
+                for (const mode of Object.keys(aliasVariableModeResolver)){
+                    aliasVariableModeResolver[mode]?.();
+                }
+            });
+        }
+        if (at) {
+            const resolvedAt = flattenObject(at);
+            for(const eachAt in resolvedAt){
+                this.at.set(eachAt, resolvedAt[eachAt]);
+            }
+        }
+        if (animations) {
+            for(const animationName in animations){
+                const eachAnimation = {};
+                this.animations.set(animationName, eachAnimation);
+                const eachKeyframes = animations[animationName];
+                for(const eachKeyframeValue in eachKeyframes){
+                    const newValueByPropertyName = eachAnimation[eachKeyframeValue] = {};
+                    const eachKeyframeDeclarations = eachKeyframes[eachKeyframeValue];
+                    for(const propertyName in eachKeyframeDeclarations){
+                        newValueByPropertyName[propertyName] = eachKeyframeDeclarations[propertyName];
+                    }
+                }
+            }
+        }
+        const flattedStyles = components ? flattenObject(components) : {};
+        const utilityNames = Object.keys(flattedStyles);
+        const handleUtilityName = (utilityName)=>{
+            if (this.components.has(utilityName)) return;
+            const currentClass = [];
+            this.components.set(utilityName, currentClass);
+            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 (!currentClass.includes(className)) {
+                        currentClass.push(className);
+                    }
+                };
+                if (utilityNames.includes(eachClassName)) {
+                    handleUtilityName(eachClassName);
+                    const componentClasses = this.components.get(eachClassName);
+                    componentClasses?.forEach(handle);
+                } else {
+                    handle(eachClassName);
+                }
+            }
+        };
+        for (const eachUtilityName of utilityNames){
+            handleUtilityName(eachUtilityName);
+        }
+        if (rules || utilities) {
+            const rulesEntries = [];
+            if (utilities) {
+                for(const utilityName in utilities){
+                    const declarations = utilities[utilityName];
+                    rulesEntries.push([
+                        utilityName,
+                        {
+                            declarations,
+                            type: SyntaxRuleType.Utility
+                        }
+                    ]);
+                }
+            }
+            if (rules) {
+                rulesEntries.push(...Object.entries(rules));
+            }
+            const rulesEntriesLength = rulesEntries.length;
+            const colorNames = Object.keys(colorVariableNames);
+            rulesEntries.sort((a, b)=>{
+                if (a[1].type !== b[1].type) {
+                    return (b[1].type || 0) - (a[1].type || 0);
+                }
+                return b[0].localeCompare(a[0]);
+            }).forEach(([id, eachSyntaxRuleDefinition], index)=>{
+                const syntax = {
+                    id,
+                    keys: [],
+                    variables: {},
+                    matchers: {},
+                    order: rulesEntriesLength - 1 - index,
+                    definition: eachSyntaxRuleDefinition
+                };
+                if (!eachSyntaxRuleDefinition.unit) {
+                    eachSyntaxRuleDefinition.unit = '';
+                }
+                if (!eachSyntaxRuleDefinition.separators) {
+                    eachSyntaxRuleDefinition.separators = [
+                        ','
+                    ];
+                }
+                this.definedRules.push(syntax);
+                const { matcher, type, subkey, ambiguousKeys, ambiguousValues, sign } = eachSyntaxRuleDefinition;
+                if (type === SyntaxRuleType.Utility) {
+                    syntax.id = '.' + id;
+                    syntax.matchers.arbitrary = new RegExp('^' + escapeString(id) + '(?=!|\\*|>|\\+|~|:|\\[|@|_|\\.|$)', 'm');
+                }
+                // todo: 不可使用 startsWith 判斷，應改為更精準的從 config.variables 取得目標變數群組，但 config.variables 中的值還沒被 resolve 像是 Array
+                const addResolvedVariables = (groupName)=>{
+                    this.variables.forEach((eachVariable)=>{
+                        if (eachVariable.group === groupName) {
+                            syntax.variables[eachVariable.key] = eachVariable;
+                        }
+                    });
+                };
+                // 1. custom `config.rules[id].variables`
+                if (eachSyntaxRuleDefinition.variables) {
+                    for (const eachVariableGroup of eachSyntaxRuleDefinition.variables){
+                        addResolvedVariables(eachVariableGroup);
+                    }
+                }
+                // 2. custom `config.variables`
+                addResolvedVariables(id);
+                const keys = [];
+                let { key } = eachSyntaxRuleDefinition;
+                if (type === SyntaxRuleType.NativeShorthand || type === SyntaxRuleType.Native) {
+                    if (!key) eachSyntaxRuleDefinition.key = key = id;
+                    keys.push(id);
+                }
+                if (sign) {
+                    syntax.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 (type === SyntaxRuleType.Shorthand) {
+                            keys.push(id);
+                        }
+                    }
+                    if (ambiguousKeys?.length) {
+                        const ambiguousKeyPattern = ambiguousKeys.length > 1 ? `(?:${ambiguousKeys.join('|')})` : ambiguousKeys[0];
+                        const variableKeys = Object.keys(syntax.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|_)`);
+                                }
+                            }
+                            syntax.matchers.value = new RegExp(`^${ambiguousKeyPattern}:(?:${ambiguousValuePatterns.join('|')})[^|]*?(?:@|$)`);
+                        }
+                        if (variableKeys.length) {
+                            syntax.matchers.variable = new RegExp(`^${ambiguousKeyPattern}:(?:${variableKeys.join('|')}(?![a-zA-Z0-9-]))[^|]*?(?:@|$)`);
+                        }
+                    }
+                } else {
+                    syntax.matchers.arbitrary = matcher;
+                }
+                if (keys.length) {
+                    syntax.keys = keys;
+                    syntax.matchers.key = new RegExp(`^${keys.length > 1 ? `(${keys.join('|')})` : keys[0]}:.`);
+                }
+            });
+        }
+        this.components.forEach((componentClasses, componentClass)=>{
+            const syntaxRulesByStateToken = componentClasses.map((eachSyntax)=>this.create(eachSyntax)).filter((eachSyntax)=>eachSyntax?.text).reduce((obj, eachSyntaxRule)=>{
+                if (eachSyntaxRule.stateToken in obj) {
+                    obj[eachSyntaxRule.stateToken].push(eachSyntaxRule);
+                } else {
+                    obj[eachSyntaxRule.stateToken] = [
+                        eachSyntaxRule
+                    ];
+                }
+                return obj;
+            }, {});
+            this.components.set(componentClass, Object.keys(syntaxRulesByStateToken).map((stateToken)=>{
+                const syntaxRules = syntaxRulesByStateToken[stateToken];
+                return syntaxRules.length === 1 ? syntaxRules[0].name : '{' + syntaxRulesByStateToken[stateToken].map((eachSyntaxRule)=>eachSyntaxRule.name.slice(0, eachSyntaxRule.name.length - eachSyntaxRule.stateToken.length)).join(';') + '}' + stateToken;
+            }));
+        });
+    }
+    /**
+     * Match check if Master CSS syntax
+     * @param className
+     * @returns css text
+     */ match(className) {
+        /**
+         * 1. variable
+         * @example fg:primary bg:blue
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.variable?.test(className)) return eachSyntax;
+        }
+        /**
+         * 2. value (ambiguous.key * ambiguous.values)
+         * @example bg:current box:content font:12
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.value?.test(className)) return eachSyntax;
+        }
+        /**
+         * 3. full key
+         * @example text-align:center color:blue-40
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.key?.test(className)) return eachSyntax;
+        }
+        /**
+         * 4. arbitrary
+         * @example custom RegExp, utility
+         */ for (const eachSyntax of this.definedRules){
+            if (eachSyntax.matchers.arbitrary?.test(className)) return eachSyntax;
+        }
+    }
+    /**
+     * Generate syntax rules from class name
+     * @param className
+     * @returns SyntaxRule[]
+     */ generate(className, mode) {
+        let syntaxRules = [];
+        const componentClasses = this.components.get(className);
+        if (componentClasses) {
+            componentClasses.forEach((eachSyntax)=>{
+                const syntaxRule = this.create(eachSyntax, className, mode);
+                if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+            });
+        } else {
+            const atIndex = className.indexOf('@');
+            if (atIndex !== -1) {
+                const name = className.slice(0, atIndex);
+                const componentClasses = this.components.get(name);
+                if (componentClasses) {
+                    const atToken = className.slice(atIndex);
+                    componentClasses.forEach((eachSyntax)=>{
+                        const syntaxRule = this.create(eachSyntax + atToken, className, mode);
+                        if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+                    });
+                }
+            }
+            const syntaxRule = this.create(className, undefined, mode);
+            if (syntaxRule?.text) syntaxRules.push(syntaxRule);
+        }
+        return syntaxRules;
+    }
+    generateVendorSelectors(selectorText) {
+        const vendorSelectors = {};
+        const transformSelector = (selectorText, selectorValues, selectors, matched)=>{
+            for (const [regexp, newSelectorTexts] of selectorValues){
+                if (regexp.test(selectorText)) {
+                    for (const eachNewSelectorText of newSelectorTexts){
+                        transformSelector(selectorText.replace(regexp, eachNewSelectorText), selectorValues, selectors, true);
+                    }
+                    return;
+                }
+            }
+            if (matched) {
+                selectors.push(selectorText);
+            }
+        };
+        const spacedSelectorToken = (selectorText)=>{
+            // 1. \'123\'
+            // 2. [href='http://localhost']
+            const transformedSelectorText = selectorText.split(/(\\'(?:.*?)[^\\]\\')(?=[*_>~+,)])|(\[[^=]+='(?:.*?)[^\\]'\])/).map((eachToken, i)=>i % 3 ? eachToken : eachToken.replace(/(^|[^_])_(?!_)/g, '$1 ')).join('');
+            const selectors = [];
+            let currentSelector = '';
+            let symbolCount = 0;
+            for(let i = 0; i < transformedSelectorText.length; i++){
+                const char = transformedSelectorText[i];
+                if (char === '\\') {
+                    currentSelector += char + transformedSelectorText[++i];
+                    continue;
+                }
+                if (!symbolCount && char === ',') {
+                    selectors.push(currentSelector);
+                    currentSelector = '';
+                } else {
+                    currentSelector += char;
+                    if (symbolCount && char === ')') {
+                        symbolCount--;
+                    } else if (char === '(') {
+                        symbolCount++;
+                    }
+                }
+            }
+            if (currentSelector) {
+                selectors.push(currentSelector);
+            }
+            return selectors;
+        };
+        const transformedSelectors = [];
+        const selectorValues = this.selectors.get('');
+        if (selectorValues) {
+            transformSelector(selectorText, selectorValues, transformedSelectors, true);
+        } else {
+            transformedSelectors.push(selectorText);
+        }
+        const unspacedVendorSelectors = {};
+        this.selectors.forEach((selectorValues, vendor)=>{
+            if (!vendor) return;
+            const newUnspacedVendorSelectors = [];
+            for (const eachTransformedSelector of transformedSelectors){
+                transformSelector(eachTransformedSelector, selectorValues, newUnspacedVendorSelectors, false);
+            }
+            if (newUnspacedVendorSelectors.length) {
+                unspacedVendorSelectors[vendor] = newUnspacedVendorSelectors;
+            }
+        });
+        const insertVendorSelectors = (vendor, selectorTexts)=>{
+            const groupedSelectorTexts = selectorTexts.reduce((arr, eachSuffixSelector)=>{
+                arr.push(...spacedSelectorToken(eachSuffixSelector));
+                return arr;
+            }, []);
+            if (vendor in vendorSelectors) {
+                vendorSelectors[vendor].push(...groupedSelectorTexts);
+            } else {
+                vendorSelectors[vendor] = groupedSelectorTexts;
+            }
+        };
+        const vendors = Object.keys(unspacedVendorSelectors);
+        if (vendors.length) {
+            for (const eachVendor of vendors){
+                insertVendorSelectors(eachVendor, unspacedVendorSelectors[eachVendor]);
+            }
+        } else {
+            insertVendorSelectors('', transformedSelectors);
+        }
+        return vendorSelectors;
+    }
+    /**
+     * Create syntax rule from given class name
+     * @param className
+     * @returns SyntaxRule
+     */ create(className, fixedClass, mode) {
+        const syntaxRule = this.generalLayer.rules.find(({ key })=>key === (fixedClass ? fixedClass + ' ' : '') + className);
+        if (syntaxRule) return syntaxRule;
+        const registeredRule = this.match(className);
+        if (registeredRule) return new SyntaxRule(className, this, registeredRule, fixedClass, mode);
+    }
+    /**
+     * Create syntax rule from given selector text
+     * @param selectorText
+     */ createFromSelectorText(selectorText) {
+        const selectorTextSplits = selectorText.split(' ');
+        const stopChars = /[.#\[!\*>+~:,\s]/;
+        for(let i = 0; i < selectorTextSplits.length; i++){
+            const eachField = selectorTextSplits[i];
+            const modeSelector = this.getModeSelector(eachField);
+            if (i === 0 && eachField === modeSelector) continue;
+            if (eachField.startsWith('.')) {
+                const eachFieldName = eachField.slice(1);
+                let className = '';
+                let l = 0;
+                while(l < eachFieldName.length){
+                    const char = eachFieldName[l];
+                    const nextChar = eachFieldName[l + 1];
+                    if (char === '\\' && nextChar) {
+                        className += nextChar;
+                        l += 2;
+                        continue;
+                    }
+                    if (stopChars.test(char)) break;
+                    className += char;
+                    l++;
+                }
+                const syntaxRules = this.generate(className);
+                if (syntaxRules.length) return syntaxRules;
+            }
+        }
+    }
+    /**
+     * 根據蒐集到的所有 DOM class 重新 create
+     */ refresh(customConfig) {
+        this.reset();
+        if (customConfig) {
+            this.customConfig = customConfig;
+        } else {
+            customConfig = this.customConfig;
+        }
+        // @ts-ignore
+        this.config = customConfig?.override ? extendConfig(customConfig) : extendConfig(config, customConfig);
+        this.resolve();
+        return this;
+    }
+    reset() {
+        this.baseLayer.reset();
+        this.themeLayer.reset();
+        this.presetLayer.reset();
+        this.componentsLayer.reset();
+        this.generalLayer.reset();
+        this.animationsNonLayer.reset();
+        return this;
+    }
+    destroy() {
+        this.reset();
+        return this;
+    }
+    add(...classNames) {
+        for (const className of classNames){
+            this.generate(className).forEach((eachSyntaxRule)=>eachSyntaxRule.layer.insert(eachSyntaxRule));
+        }
+        return this;
+    }
+    remove(...classNames) {
+        /**
+         * class name 從 DOM tree 中被移除，
+         * 匹配並刪除對應的 rule
+         */ for (const className of classNames){
+            const componentClasses = this.components.get(className);
+            if (componentClasses) {
+                componentClasses.forEach((componentClass)=>{
+                    this.componentsLayer.delete(className + ' ' + componentClass);
+                });
+            } else {
+                const atIndex = className.indexOf('@');
+                if (atIndex !== -1) {
+                    const name = className.slice(0, atIndex);
+                    const componentClasses = this.components.get(name);
+                    if (componentClasses) {
+                        const atToken = className.slice(atIndex);
+                        componentClasses.forEach((componentClass)=>{
+                            this.componentsLayer.delete(componentClass + atToken + ' ' + className);
+                        });
+                    } else {
+                        this.generalLayer.delete(className);
+                    }
+                } else {
+                    this.generalLayer.delete(className);
+                }
+            }
+        }
+    }
+    getModeSelector(modeName) {
+        const mode = this.config.modes?.[modeName];
+        if (mode) {
+            switch(mode){
+                case 'class':
+                    return '.' + modeName;
+                case 'host':
+                    return ':host(.' + modeName + ')';
+            }
+        }
+    }
+}
+(function(MasterCSS) {
+    registerGlobal(MasterCSS);
+})(MasterCSS);
+
+export { MasterCSS as default };