@master/css 2.0.0-rc.52 → 2.0.0-rc.53

package/dist/config/rules.mjs

@@ -1,6 +1,6 @@
 import cssEscape from '../shared/utils/css-escape.mjs';
 import SyntaxRuleType from '../syntax-rule-type.mjs';
-import { VALUE_DELIMITERS, NUMBER_VALUE_REGEX, COLOR_VALUE_REGEX, BORDER_STYLE_VALUES, IMAGE_VALUE_REGEX } from '../common.mjs';
+import { NUMBER_VALUE_REGEX, BORDER_STYLE_VALUES, COLOR_VALUE_REGEX, IMAGE_VALUE_REGEX, VALUE_DELIMITERS } from '../common.mjs';
 import autofillSolidStyle from '../utils/autofill-solid-style.mjs';
 
 const rules = {

package/dist/core.cjs

@@ -90,7 +90,7 @@ class MasterCSS {
                 for (const eachNewSelectorText of Array.isArray(eachResolvedSelectorText) ? eachResolvedSelectorText : [
                     eachResolvedSelectorText
                 ]){
-                    const vendor = eachNewSelectorText.match(/^::-[a-z]+-/m)?.[0] ?? '';
+                    const vendor = eachNewSelectorText.match(/^:(?::)?-(webkit|moz|ms|o)-/m)?.[1] ?? '';
                     let selectorValues = this.selectors[vendor];
                     if (!selectorValues) {
                         selectorValues = this.selectors[vendor] = [];
@@ -522,6 +522,89 @@ class MasterCSS {
         }
         return syntaxRules.filter((eachSyntax)=>eachSyntax?.text);
     }
+    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 = [];
+        if ('' in this.selectors) {
+            transformSelector(selectorText, this.selectors[''], transformedSelectors, true);
+        } else {
+            transformedSelectors.push(selectorText);
+        }
+        const unspacedVendorSelectors = {};
+        for (const [vendor, selectorValues] of Object.entries(this.selectors)){
+            if (!vendor) continue;
+            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
@@ -562,7 +645,8 @@ class MasterCSS {
                         '>',
                         '+',
                         '~',
-                        ':'
+                        ':',
+                        ','
                     ].includes(char)) {
                         break;
                     }

package/dist/core.d.ts

@@ -6,6 +6,7 @@ import Layer from './layer';
 import NonLayer from './non-layer';
 import { DefinedRule, Variable } from './types/syntax';
 import { AnimationDefinitions, Config } from './types/config';
+import { Vendors } from './types/common';
 export default class MasterCSS {
     customConfig?: Config | undefined;
     static config: Config;
@@ -35,6 +36,7 @@ export default class MasterCSS {
      * @returns SyntaxRule[]
      */
     generate(className: string, mode?: string): SyntaxRule[];
+    generateVendorSelectors(selectorText: string): Record<string, string[]>;
     /**
      * Create syntax rule from given class name
      * @param className
@@ -58,6 +60,7 @@ export default class MasterCSS {
 }
 export declare const masterCSSs: MasterCSS[];
 export default interface MasterCSS {
+    supportVendors: Set<Vendors>;
     style: HTMLStyleElement | null;
     components: Record<string, string[]>;
     selectors: Record<string, [RegExp, string[]][]>;

package/dist/core.mjs

@@ -86,7 +86,7 @@ class MasterCSS {
                 for (const eachNewSelectorText of Array.isArray(eachResolvedSelectorText) ? eachResolvedSelectorText : [
                     eachResolvedSelectorText
                 ]){
-                    const vendor = eachNewSelectorText.match(/^::-[a-z]+-/m)?.[0] ?? '';
+                    const vendor = eachNewSelectorText.match(/^:(?::)?-(webkit|moz|ms|o)-/m)?.[1] ?? '';
                     let selectorValues = this.selectors[vendor];
                     if (!selectorValues) {
                         selectorValues = this.selectors[vendor] = [];
@@ -518,6 +518,89 @@ class MasterCSS {
         }
         return syntaxRules.filter((eachSyntax)=>eachSyntax?.text);
     }
+    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 = [];
+        if ('' in this.selectors) {
+            transformSelector(selectorText, this.selectors[''], transformedSelectors, true);
+        } else {
+            transformedSelectors.push(selectorText);
+        }
+        const unspacedVendorSelectors = {};
+        for (const [vendor, selectorValues] of Object.entries(this.selectors)){
+            if (!vendor) continue;
+            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
@@ -558,7 +641,8 @@ class MasterCSS {
                         '>',
                         '+',
                         '~',
-                        ':'
+                        ':',
+                        ','
                     ].includes(char)) {
                         break;
                     }

package/dist/index.cjs

@@ -23,11 +23,11 @@ var isCoreRule = require('./utils/is-core-rule.cjs');
 var at = require('./config/at.cjs');
 var selectors = require('./config/selectors.cjs');
 var utilities = require('./config/utilities.cjs');
+var rules = require('./config/rules.cjs');
 var functions = require('./config/functions.cjs');
 var animations = require('./config/animations.cjs');
 var variables = require('./config/variables.cjs');
 var modes = require('./config/modes.cjs');
-var rules = require('./config/rules.cjs');
 
 
 
@@ -74,8 +74,8 @@ exports.isCoreRule = isCoreRule;
 exports.at = at;
 exports.selectors = selectors;
 exports.utilities = utilities;
+exports.rules = rules;
 exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
 exports.modes = modes;
-exports.rules = rules;

package/dist/index.mjs

@@ -19,8 +19,8 @@ export { default as isCoreRule } from './utils/is-core-rule.mjs';
 export { default as at } from './config/at.mjs';
 export { default as selectors } from './config/selectors.mjs';
 export { default as utilities } from './config/utilities.mjs';
+export { default as rules } from './config/rules.mjs';
 export { default as functions } from './config/functions.mjs';
 export { default as animations } from './config/animations.mjs';
 export { default as variables } from './config/variables.mjs';
 export { default as modes } from './config/modes.mjs';
-export { default as rules } from './config/rules.mjs';

package/dist/layer.cjs

@@ -50,12 +50,13 @@ class Layer {
             }
             for(let i = 0; i < rule.nodes.length;){
                 try {
-                    const nativeRule = rule.nodes[i];
-                    this.native.insertRule(nativeRule.text, cssRuleIndex);
-                    nativeRule.native = this.native.cssRules[cssRuleIndex++];
+                    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);
+                    console.error(error, rule.nodes[i]);
                     rule.nodes.splice(i, 1);
                 }
             }

package/dist/layer.mjs

@@ -48,12 +48,13 @@ class Layer {
             }
             for(let i = 0; i < rule.nodes.length;){
                 try {
-                    const nativeRule = rule.nodes[i];
-                    this.native.insertRule(nativeRule.text, cssRuleIndex);
-                    nativeRule.native = this.native.cssRules[cssRuleIndex++];
+                    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);
+                    console.error(error, rule.nodes[i]);
                     rule.nodes.splice(i, 1);
                 }
             }

package/dist/rule.d.ts

@@ -7,5 +7,8 @@ export declare class Rule {
 }
 export interface RuleNode {
     text: string;
+    selectorText?: string;
     native?: CSSRule;
+    suffixSelectors?: string[];
+    prefixSelectors?: string[];
 }

package/dist/syntax-layer.cjs

@@ -218,22 +218,24 @@ class SyntaxLayer extends layer {
                     const addNative = (mode, _variable)=>{
                         let isDefaultMode = false;
                         let preifxCssRuleText;
+                        let selectorText;
                         let endCurlyBracketCount = 1;
                         if (mode) {
                             switch(this.css.config.modes?.[mode]){
                                 case 'media':
-                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){:root`;
+                                    selectorText = ':root';
+                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){${selectorText}`;
                                     endCurlyBracketCount++;
                                     break;
                                 case 'host':
-                                    preifxCssRuleText = `:host(.${mode})`;
+                                    preifxCssRuleText = selectorText = `:host(.${mode})`;
                                     if (!variable.value && this.css.config.defaultMode === mode) {
                                         preifxCssRuleText += ',:host';
                                         isDefaultMode = true;
                                     }
                                     break;
                                 case 'class':
-                                    preifxCssRuleText = `.${mode}`;
+                                    preifxCssRuleText = selectorText = `.${mode}`;
                                     if (!variable.value && this.css.config.defaultMode === mode) {
                                         preifxCssRuleText += ',:root';
                                         isDefaultMode = true;
@@ -243,11 +245,12 @@ class SyntaxLayer extends layer {
                                     return;
                             }
                         } else {
-                            preifxCssRuleText = ':root';
+                            preifxCssRuleText = selectorText = ':root';
                         }
                         const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
                         if (isDefaultMode) {
                             newRule.nodes.unshift({
+                                selectorText,
                                 text: cssRuleText
                             });
                         } else {

package/dist/syntax-layer.mjs

@@ -216,22 +216,24 @@ class SyntaxLayer extends Layer {
                     const addNative = (mode, _variable)=>{
                         let isDefaultMode = false;
                         let preifxCssRuleText;
+                        let selectorText;
                         let endCurlyBracketCount = 1;
                         if (mode) {
                             switch(this.css.config.modes?.[mode]){
                                 case 'media':
-                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){:root`;
+                                    selectorText = ':root';
+                                    preifxCssRuleText = `@media(prefers-color-scheme:${mode}){${selectorText}`;
                                     endCurlyBracketCount++;
                                     break;
                                 case 'host':
-                                    preifxCssRuleText = `:host(.${mode})`;
+                                    preifxCssRuleText = selectorText = `:host(.${mode})`;
                                     if (!variable.value && this.css.config.defaultMode === mode) {
                                         preifxCssRuleText += ',:host';
                                         isDefaultMode = true;
                                     }
                                     break;
                                 case 'class':
-                                    preifxCssRuleText = `.${mode}`;
+                                    preifxCssRuleText = selectorText = `.${mode}`;
                                     if (!variable.value && this.css.config.defaultMode === mode) {
                                         preifxCssRuleText += ',:root';
                                         isDefaultMode = true;
@@ -241,11 +243,12 @@ class SyntaxLayer extends Layer {
                                     return;
                             }
                         } else {
-                            preifxCssRuleText = ':root';
+                            preifxCssRuleText = selectorText = ':root';
                         }
                         const cssRuleText = `${preifxCssRuleText}{--${eachVariableName}:${String(_variable.value)}${'}'.repeat(endCurlyBracketCount)}`;
                         if (isDefaultMode) {
                             newRule.nodes.unshift({
+                                selectorText,
                                 text: cssRuleText
                             });
                         } else {

package/dist/syntax-rule.cjs

@@ -255,7 +255,7 @@ class SyntaxRule extends rule.Rule {
         const { analyze, transformValue, declare, transformValueComponents, create, type, unit } = definition;
         this.type = type;
         const { scope, important, modes } = css.config;
-        const { selectors, at, animations } = css;
+        const { at, animations } = css;
         if (create) create.call(this, name);
         // 1. value / selectorToken
         this.declarations = definition.declarations;
@@ -285,92 +285,14 @@ class SyntaxRule extends rule.Rule {
         }
         this.stateToken = stateToken;
         // 3. prefix selector
-        const generateVendorSelectors = (selectorText, 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 = '';
-                for(let i = 0; i < transformedSelectorText.length; i++){
-                    const char = transformedSelectorText[i];
-                    if (char === '\\') {
-                        currentSelector += char + transformedSelectorText[++i];
-                        continue;
-                    }
-                    currentSelector += char;
-                }
-                if (currentSelector) {
-                    selectors.push(currentSelector);
-                }
-                return selectors;
-            };
-            const transformedSelectors = [];
-            if ('' in selectors) {
-                transformSelector(selectorText, selectors[''], transformedSelectors, true);
-            } else {
-                transformedSelectors.push(selectorText);
-            }
-            const unspacedVendorSelectors = {};
-            for (const [vendor, selectorValues] of Object.entries(selectors)){
-                if (!vendor) continue;
-                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);
-            }
-        };
         if (prefixToken) {
-            this.vendorPrefixSelectors = {};
-            generateVendorSelectors(prefixToken, this.vendorPrefixSelectors);
-        } else {
-            this.vendorPrefixSelectors = {
-                '': [
-                    ''
-                ]
-            };
+            this.vendorPrefixSelectors = css.generateVendorSelectors(prefixToken);
         }
         // 4. suffix selector
         const stateTokens = stateToken.split('@');
         const suffixSelector = stateTokens[0];
         if (suffixSelector) {
-            this.vendorSuffixSelectors = {};
-            generateVendorSelectors(suffixSelector, this.vendorSuffixSelectors);
+            this.vendorSuffixSelectors = css.generateVendorSelectors(suffixSelector);
             for (const suffixSelectors of Object.values(this.vendorSuffixSelectors)){
                 for (const eachSuffixSelector of suffixSelectors){
                     const SORTED_SELECTORS = [
@@ -389,29 +311,11 @@ class SyntaxRule extends rule.Rule {
                     }
                 }
             }
-        } else {
-            this.vendorSuffixSelectors = {
-                '': [
-                    ''
-                ]
-            };
         }
         // selector combinations
         const suffixSelectorVendorsByPrefixSelectorVendor = {};
-        const isPrefixSelectorWithoutVendor = Object.prototype.hasOwnProperty.call(this.vendorPrefixSelectors, '');
-        const isSuffixSelectorWithoutVendor = Object.prototype.hasOwnProperty.call(this.vendorSuffixSelectors, '');
-        if (isPrefixSelectorWithoutVendor) {
-            suffixSelectorVendorsByPrefixSelectorVendor[''] = isSuffixSelectorWithoutVendor ? [
-                ''
-            ] : Object.keys(this.vendorSuffixSelectors);
-        } else {
-            if (isSuffixSelectorWithoutVendor) {
-                for(const vendor in this.vendorPrefixSelectors){
-                    suffixSelectorVendorsByPrefixSelectorVendor[vendor] = [
-                        ''
-                    ];
-                }
-            } else {
+        if (this.vendorPrefixSelectors) {
+            if (this.vendorSuffixSelectors) {
                 for(const prefixSelectorVendor in this.vendorPrefixSelectors){
                     const suffixSelectorVendors = suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor] = [];
                     if (Object.prototype.hasOwnProperty.call(this.vendorSuffixSelectors, prefixSelectorVendor)) {
@@ -422,7 +326,17 @@ class SyntaxRule extends rule.Rule {
                         }
                     }
                 }
+            } else {
+                for(const vendor in this.vendorPrefixSelectors){
+                    suffixSelectorVendorsByPrefixSelectorVendor[vendor] = [
+                        ''
+                    ];
+                }
             }
+        } else {
+            suffixSelectorVendorsByPrefixSelectorVendor[''] = this.vendorSuffixSelectors ? Object.keys(this.vendorSuffixSelectors) : [
+                ''
+            ];
         }
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
@@ -600,13 +514,20 @@ class SyntaxRule extends rule.Rule {
         if (propertiesText.length) {
             for(const prefixSelectorVendor in suffixSelectorVendorsByPrefixSelectorVendor){
                 for (const eachSuffixSelectorVendor of suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor]){
+                    const prefixSelectors = this.vendorPrefixSelectors?.[prefixSelectorVendor];
+                    const suffixSelectors = this.vendorSuffixSelectors?.[eachSuffixSelectorVendor];
+                    if (this.css.supportVendors) {
+                        if (prefixSelectorVendor && !this.css.supportVendors?.has(prefixSelectorVendor) || eachSuffixSelectorVendor && !this.css.supportVendors?.has(eachSuffixSelectorVendor)) {
+                            continue;
+                        }
+                    }
                     let prefixText = '';
                     if (this.direction) {
                         prefixText += '[dir=' + this.direction + '] ';
                     }
-                    const prefixSelectors = this.vendorPrefixSelectors[prefixSelectorVendor];
-                    const suffixSelectors = this.vendorSuffixSelectors[eachSuffixSelectorVendor];
-                    const prefixTexts = prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText);
+                    const prefixTexts = prefixSelectors ? prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText) : [
+                        prefixText
+                    ];
                     const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>{
                             let modePrefix = '';
                             if (this.mode) {
@@ -617,22 +538,27 @@ class SyntaxRule extends rule.Rule {
                             }
                             return modePrefix + (scope ? scope + ' ' : '') + eachPrefixText;
                         }).reduce((arr, eachPrefixText)=>{
-                            arr.push(suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
+                            arr.push(suffixSelectors ? suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
                                 _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
                                 return _arr;
-                            }, []).join(','));
+                            }, []).join(',') : eachPrefixText + '.' + cssEscape(name));
                             return arr;
                         }, []).join(',');
-                    let cssText = getCssText(fixedClass ?? name) + '{' + propertiesText.join(';') + '}';
+                    const selectorText = getCssText(fixedClass ?? name);
+                    let cssText = selectorText + '{' + propertiesText.join(';') + '}';
                     for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
                         cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
                     }
                     if (this.mode && modes?.[this.mode] === 'media') {
                         cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
-                    this.nodes.push({
-                        text: cssText
-                    });
+                    const node = {
+                        text: cssText,
+                        selectorText
+                    };
+                    if (prefixSelectors) node.prefixSelectors = prefixSelectors;
+                    if (suffixSelectors) node.suffixSelectors = suffixSelectors;
+                    this.nodes.push(node);
                 }
             }
         }

package/dist/syntax-rule.mjs

@@ -253,7 +253,7 @@ class SyntaxRule extends Rule {
         const { analyze, transformValue, declare, transformValueComponents, create, type, unit } = definition;
         this.type = type;
         const { scope, important, modes } = css.config;
-        const { selectors, at, animations } = css;
+        const { at, animations } = css;
         if (create) create.call(this, name);
         // 1. value / selectorToken
         this.declarations = definition.declarations;
@@ -283,92 +283,14 @@ class SyntaxRule extends Rule {
         }
         this.stateToken = stateToken;
         // 3. prefix selector
-        const generateVendorSelectors = (selectorText, 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 = '';
-                for(let i = 0; i < transformedSelectorText.length; i++){
-                    const char = transformedSelectorText[i];
-                    if (char === '\\') {
-                        currentSelector += char + transformedSelectorText[++i];
-                        continue;
-                    }
-                    currentSelector += char;
-                }
-                if (currentSelector) {
-                    selectors.push(currentSelector);
-                }
-                return selectors;
-            };
-            const transformedSelectors = [];
-            if ('' in selectors) {
-                transformSelector(selectorText, selectors[''], transformedSelectors, true);
-            } else {
-                transformedSelectors.push(selectorText);
-            }
-            const unspacedVendorSelectors = {};
-            for (const [vendor, selectorValues] of Object.entries(selectors)){
-                if (!vendor) continue;
-                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);
-            }
-        };
         if (prefixToken) {
-            this.vendorPrefixSelectors = {};
-            generateVendorSelectors(prefixToken, this.vendorPrefixSelectors);
-        } else {
-            this.vendorPrefixSelectors = {
-                '': [
-                    ''
-                ]
-            };
+            this.vendorPrefixSelectors = css.generateVendorSelectors(prefixToken);
         }
         // 4. suffix selector
         const stateTokens = stateToken.split('@');
         const suffixSelector = stateTokens[0];
         if (suffixSelector) {
-            this.vendorSuffixSelectors = {};
-            generateVendorSelectors(suffixSelector, this.vendorSuffixSelectors);
+            this.vendorSuffixSelectors = css.generateVendorSelectors(suffixSelector);
             for (const suffixSelectors of Object.values(this.vendorSuffixSelectors)){
                 for (const eachSuffixSelector of suffixSelectors){
                     const SORTED_SELECTORS = [
@@ -387,29 +309,11 @@ class SyntaxRule extends Rule {
                     }
                 }
             }
-        } else {
-            this.vendorSuffixSelectors = {
-                '': [
-                    ''
-                ]
-            };
         }
         // selector combinations
         const suffixSelectorVendorsByPrefixSelectorVendor = {};
-        const isPrefixSelectorWithoutVendor = Object.prototype.hasOwnProperty.call(this.vendorPrefixSelectors, '');
-        const isSuffixSelectorWithoutVendor = Object.prototype.hasOwnProperty.call(this.vendorSuffixSelectors, '');
-        if (isPrefixSelectorWithoutVendor) {
-            suffixSelectorVendorsByPrefixSelectorVendor[''] = isSuffixSelectorWithoutVendor ? [
-                ''
-            ] : Object.keys(this.vendorSuffixSelectors);
-        } else {
-            if (isSuffixSelectorWithoutVendor) {
-                for(const vendor in this.vendorPrefixSelectors){
-                    suffixSelectorVendorsByPrefixSelectorVendor[vendor] = [
-                        ''
-                    ];
-                }
-            } else {
+        if (this.vendorPrefixSelectors) {
+            if (this.vendorSuffixSelectors) {
                 for(const prefixSelectorVendor in this.vendorPrefixSelectors){
                     const suffixSelectorVendors = suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor] = [];
                     if (Object.prototype.hasOwnProperty.call(this.vendorSuffixSelectors, prefixSelectorVendor)) {
@@ -420,7 +324,17 @@ class SyntaxRule extends Rule {
                         }
                     }
                 }
+            } else {
+                for(const vendor in this.vendorPrefixSelectors){
+                    suffixSelectorVendorsByPrefixSelectorVendor[vendor] = [
+                        ''
+                    ];
+                }
             }
+        } else {
+            suffixSelectorVendorsByPrefixSelectorVendor[''] = this.vendorSuffixSelectors ? Object.keys(this.vendorSuffixSelectors) : [
+                ''
+            ];
         }
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
@@ -598,13 +512,20 @@ class SyntaxRule extends Rule {
         if (propertiesText.length) {
             for(const prefixSelectorVendor in suffixSelectorVendorsByPrefixSelectorVendor){
                 for (const eachSuffixSelectorVendor of suffixSelectorVendorsByPrefixSelectorVendor[prefixSelectorVendor]){
+                    const prefixSelectors = this.vendorPrefixSelectors?.[prefixSelectorVendor];
+                    const suffixSelectors = this.vendorSuffixSelectors?.[eachSuffixSelectorVendor];
+                    if (this.css.supportVendors) {
+                        if (prefixSelectorVendor && !this.css.supportVendors?.has(prefixSelectorVendor) || eachSuffixSelectorVendor && !this.css.supportVendors?.has(eachSuffixSelectorVendor)) {
+                            continue;
+                        }
+                    }
                     let prefixText = '';
                     if (this.direction) {
                         prefixText += '[dir=' + this.direction + '] ';
                     }
-                    const prefixSelectors = this.vendorPrefixSelectors[prefixSelectorVendor];
-                    const suffixSelectors = this.vendorSuffixSelectors[eachSuffixSelectorVendor];
-                    const prefixTexts = prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText);
+                    const prefixTexts = prefixSelectors ? prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText) : [
+                        prefixText
+                    ];
                     const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>{
                             let modePrefix = '';
                             if (this.mode) {
@@ -615,22 +536,27 @@ class SyntaxRule extends Rule {
                             }
                             return modePrefix + (scope ? scope + ' ' : '') + eachPrefixText;
                         }).reduce((arr, eachPrefixText)=>{
-                            arr.push(suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
+                            arr.push(suffixSelectors ? suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
                                 _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
                                 return _arr;
-                            }, []).join(','));
+                            }, []).join(',') : eachPrefixText + '.' + cssEscape(name));
                             return arr;
                         }, []).join(',');
-                    let cssText = getCssText(fixedClass ?? name) + '{' + propertiesText.join(';') + '}';
+                    const selectorText = getCssText(fixedClass ?? name);
+                    let cssText = selectorText + '{' + propertiesText.join(';') + '}';
                     for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
                         cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
                     }
                     if (this.mode && modes?.[this.mode] === 'media') {
                         cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
-                    this.nodes.push({
-                        text: cssText
-                    });
+                    const node = {
+                        text: cssText,
+                        selectorText
+                    };
+                    if (prefixSelectors) node.prefixSelectors = prefixSelectors;
+                    if (suffixSelectors) node.suffixSelectors = suffixSelectors;
+                    this.nodes.push(node);
                 }
             }
         }

package/dist/types/common.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/types/common.d.ts

@@ -0,0 +1 @@
+export type Vendors = 'webkit' | 'moz' | 'ms' | 'o';

package/dist/types/common.mjs

@@ -0,0 +1 @@
+

package/dist/utils/are-rule-selectors-equal.cjs

@@ -2,8 +2,8 @@
 
 function areRuleSelectorsEqual(aSyntaxRule, bSyntaxRule) {
     // suffix
-    const aVendorSuffixSelectorKeys = Object.keys(aSyntaxRule.vendorSuffixSelectors);
-    const bVendorSuffixSelectorKeys = Object.keys(bSyntaxRule.vendorSuffixSelectors);
+    const aVendorSuffixSelectorKeys = aSyntaxRule.vendorSuffixSelectors ? Object.keys(aSyntaxRule.vendorSuffixSelectors) : [];
+    const bVendorSuffixSelectorKeys = bSyntaxRule.vendorSuffixSelectors ? Object.keys(bSyntaxRule.vendorSuffixSelectors) : [];
     if (aVendorSuffixSelectorKeys.length !== bVendorSuffixSelectorKeys.length) return false;
     const isSameVendorSuffixSelectors = aVendorSuffixSelectorKeys.every((eachAKey)=>{
         if (!Object.prototype.hasOwnProperty.call(bSyntaxRule.vendorSuffixSelectors, eachAKey)) return false;
@@ -13,13 +13,13 @@ function areRuleSelectorsEqual(aSyntaxRule, bSyntaxRule) {
     });
     if (!isSameVendorSuffixSelectors) return false;
     // prefix
-    const aVendorPrefixSelectorKeys = Object.keys(aSyntaxRule.vendorPrefixSelectors);
-    const bVendorPrefixSelectorKeys = Object.keys(bSyntaxRule.vendorPrefixSelectors);
+    const aVendorPrefixSelectorKeys = aSyntaxRule.vendorPrefixSelectors ? Object.keys(aSyntaxRule.vendorPrefixSelectors) : [];
+    const bVendorPrefixSelectorKeys = bSyntaxRule.vendorPrefixSelectors ? Object.keys(bSyntaxRule.vendorPrefixSelectors) : [];
     if (aVendorPrefixSelectorKeys.length !== bVendorPrefixSelectorKeys.length) return false;
     const isSameVendorPrefixSelectors = aVendorPrefixSelectorKeys.every((eachAKey)=>{
         if (!Object.prototype.hasOwnProperty.call(bSyntaxRule.vendorPrefixSelectors, eachAKey)) return false;
-        const aValues = aSyntaxRule.vendorPrefixSelectors[eachAKey];
-        const bValues = bSyntaxRule.vendorPrefixSelectors[eachAKey];
+        const aValues = aSyntaxRule.vendorPrefixSelectors?.[eachAKey] || [];
+        const bValues = bSyntaxRule.vendorPrefixSelectors?.[eachAKey] || [];
         return aValues.length === bValues.length && aValues.every((eachAValue)=>bValues.includes(eachAValue));
     });
     if (!isSameVendorPrefixSelectors) return false;

package/dist/utils/are-rule-selectors-equal.mjs

@@ -1,7 +1,7 @@
 function areRuleSelectorsEqual(aSyntaxRule, bSyntaxRule) {
     // suffix
-    const aVendorSuffixSelectorKeys = Object.keys(aSyntaxRule.vendorSuffixSelectors);
-    const bVendorSuffixSelectorKeys = Object.keys(bSyntaxRule.vendorSuffixSelectors);
+    const aVendorSuffixSelectorKeys = aSyntaxRule.vendorSuffixSelectors ? Object.keys(aSyntaxRule.vendorSuffixSelectors) : [];
+    const bVendorSuffixSelectorKeys = bSyntaxRule.vendorSuffixSelectors ? Object.keys(bSyntaxRule.vendorSuffixSelectors) : [];
     if (aVendorSuffixSelectorKeys.length !== bVendorSuffixSelectorKeys.length) return false;
     const isSameVendorSuffixSelectors = aVendorSuffixSelectorKeys.every((eachAKey)=>{
         if (!Object.prototype.hasOwnProperty.call(bSyntaxRule.vendorSuffixSelectors, eachAKey)) return false;
@@ -11,13 +11,13 @@ function areRuleSelectorsEqual(aSyntaxRule, bSyntaxRule) {
     });
     if (!isSameVendorSuffixSelectors) return false;
     // prefix
-    const aVendorPrefixSelectorKeys = Object.keys(aSyntaxRule.vendorPrefixSelectors);
-    const bVendorPrefixSelectorKeys = Object.keys(bSyntaxRule.vendorPrefixSelectors);
+    const aVendorPrefixSelectorKeys = aSyntaxRule.vendorPrefixSelectors ? Object.keys(aSyntaxRule.vendorPrefixSelectors) : [];
+    const bVendorPrefixSelectorKeys = bSyntaxRule.vendorPrefixSelectors ? Object.keys(bSyntaxRule.vendorPrefixSelectors) : [];
     if (aVendorPrefixSelectorKeys.length !== bVendorPrefixSelectorKeys.length) return false;
     const isSameVendorPrefixSelectors = aVendorPrefixSelectorKeys.every((eachAKey)=>{
         if (!Object.prototype.hasOwnProperty.call(bSyntaxRule.vendorPrefixSelectors, eachAKey)) return false;
-        const aValues = aSyntaxRule.vendorPrefixSelectors[eachAKey];
-        const bValues = bSyntaxRule.vendorPrefixSelectors[eachAKey];
+        const aValues = aSyntaxRule.vendorPrefixSelectors?.[eachAKey] || [];
+        const bValues = bSyntaxRule.vendorPrefixSelectors?.[eachAKey] || [];
         return aValues.length === bValues.length && aValues.every((eachAValue)=>bValues.includes(eachAValue));
     });
     if (!isSameVendorPrefixSelectors) return false;

package/package.json

@@ -1 +1 @@
-{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.1.7","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.52"},"version":"2.0.0-rc.52"}
+{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.1.7","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.53"},"version":"2.0.0-rc.53"}