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

package/dist/common.cjs

@@ -104,10 +104,31 @@ const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-line
 const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\\(.*\\)|(?:\$colors)(?![a-zA-Z0-9-]))/;
 const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\(.*\))/;
 const OFFICIAL_URL = new URL('https://rc.css.master.co');
+const CLASS_ATTRIBUTES = [
+    'class',
+    'className'
+];
+const CLASS_DECLARATIONS = [
+    'styles'
+];
+const CLASS_FUNCTIONS = [
+    'clsx',
+    'cva',
+    'ctl',
+    'cv',
+    'class',
+    'classnames',
+    'classVariant',
+    'styled(?:\\s+)?(?:\\.\\w+)?',
+    'classList(?:\\s+)?\\.(?:add|remove|toggle|replace)'
+];
 
 exports.ANIMATION_SIGN = ANIMATION_SIGN;
 exports.AT_SIGN = AT_SIGN;
 exports.BASE_UNIT_REGEX = BASE_UNIT_REGEX;
+exports.CLASS_ATTRIBUTES = CLASS_ATTRIBUTES;
+exports.CLASS_DECLARATIONS = CLASS_DECLARATIONS;
+exports.CLASS_FUNCTIONS = CLASS_FUNCTIONS;
 exports.COLOR_VALUE_REGEX = COLOR_VALUE_REGEX;
 exports.DELIMITER_SIGN = DELIMITER_SIGN;
 exports.IMAGE_VALUE_REGEX = IMAGE_VALUE_REGEX;

package/dist/common.d.ts

@@ -20,3 +20,6 @@ export declare const IMAGE_VALUE_REGEX: RegExp;
 export declare const COLOR_VALUE_REGEX: RegExp;
 export declare const NUMBER_VALUE_REGEX: RegExp;
 export declare const OFFICIAL_URL: URL;
+export declare const CLASS_ATTRIBUTES: string[];
+export declare const CLASS_DECLARATIONS: string[];
+export declare const CLASS_FUNCTIONS: string[];

package/dist/common.mjs

@@ -102,5 +102,23 @@ const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-line
 const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\\(.*\\)|(?:\$colors)(?![a-zA-Z0-9-]))/;
 const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\(.*\))/;
 const OFFICIAL_URL = new URL('https://rc.css.master.co');
+const CLASS_ATTRIBUTES = [
+    'class',
+    'className'
+];
+const CLASS_DECLARATIONS = [
+    'styles'
+];
+const CLASS_FUNCTIONS = [
+    'clsx',
+    'cva',
+    'ctl',
+    'cv',
+    'class',
+    'classnames',
+    'classVariant',
+    'styled(?:\\s+)?(?:\\.\\w+)?',
+    'classList(?:\\s+)?\\.(?:add|remove|toggle|replace)'
+];
 
-export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS };
+export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS };

package/dist/config/index.cjs

@@ -6,6 +6,7 @@ var utilities = require('./utilities.cjs');
 var animations = require('./animations.cjs');
 var variables = require('./variables.cjs');
 var rules = require('./rules.cjs');
+var modes = require('./modes.cjs');
 var functions = require('./functions.cjs');
 
 const config = {
@@ -16,12 +17,12 @@ const config = {
     functions,
     animations,
     variables,
+    modes,
     scope: '',
     rootSize: 16,
     baseUnit: 4,
     override: false,
-    important: false,
-    modeDriver: 'class'
+    important: false
 };
 
 exports.queries = queries;
@@ -30,5 +31,6 @@ exports.utilities = utilities;
 exports.animations = animations;
 exports.variables = variables;
 exports.rules = rules.default;
+exports.modes = modes;
 exports.functions = functions;
 exports.config = config;

package/dist/config/index.d.ts

@@ -4,11 +4,12 @@ import utilities from './utilities';
 import animations from './animations';
 import variables from './variables';
 import rules from './rules';
+import modes from './modes';
 import functions from './functions';
 import type { PropertiesHyphen } from 'csstype';
 import type { Rule, RuleDefinition, ValueComponent } from '../rule';
 declare const config: Config;
-export { config, queries, selectors, utilities, rules, functions, animations, variables };
+export { config, queries, selectors, utilities, rules, functions, animations, variables, modes };
 export type VariableValue = number | string | Array<number | string>;
 export type VariableDefinition = {
     [key in '' | `@${string}` | string]?: VariableValue | VariableDefinition;
@@ -41,6 +42,9 @@ export type UtilityDefinitions = {
 } & {
     [key: string]: PropertiesHyphen;
 };
+export type ModeDefinitions = {
+    [key: string]: 'class' | 'media' | 'host';
+};
 export interface FunctionDefinition {
     unit?: string;
     transform?(this: Rule, value: string, bypassVariableNames: string[]): string | ValueComponent[];
@@ -63,5 +67,5 @@ export interface Config {
     override?: boolean;
     functions?: FunctionDefinitions;
     animations?: AnimationDefinitions;
-    modeDriver?: 'class' | 'media' | 'host';
+    modes?: Record<string, 'class' | 'media' | 'host' | false>;
 }

package/dist/config/index.mjs

@@ -4,6 +4,7 @@ import utilities from './utilities.mjs';
 import animations from './animations.mjs';
 import variables from './variables.mjs';
 import rules from './rules.mjs';
+import modes from './modes.mjs';
 import functions from './functions.mjs';
 
 const config = {
@@ -14,12 +15,12 @@ const config = {
     functions,
     animations,
     variables,
+    modes,
     scope: '',
     rootSize: 16,
     baseUnit: 4,
     override: false,
-    important: false,
-    modeDriver: 'class'
+    important: false
 };
 
-export { animations, config, functions, queries, rules, selectors, utilities, variables };
+export { animations, config, functions, modes, queries, rules, selectors, utilities, variables };

package/dist/config/modes.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+const modes = {
+    dark: 'class',
+    light: 'class'
+};
+
+module.exports = modes;

package/dist/config/modes.d.ts

@@ -0,0 +1,3 @@
+import type { ModeDefinitions } from './';
+declare const modes: ModeDefinitions;
+export default modes;

package/dist/config/modes.mjs

@@ -0,0 +1,6 @@
+const modes = {
+    dark: 'class',
+    light: 'class'
+};
+
+export { modes as default };

package/dist/core.cjs

@@ -922,7 +922,7 @@ class MasterCSS {
                             let mediaConditionText;
                             let selectorText;
                             if (mode) {
-                                switch(this.config.modeDriver){
+                                switch(this.config.modes?.[mode]){
                                     case 'media':
                                         mediaConditionText = `@media(prefers-color-scheme:${mode})`;
                                         selectorText = ':root';
@@ -930,9 +930,11 @@ class MasterCSS {
                                     case 'host':
                                         selectorText = `:host(.${mode})`;
                                         break;
-                                    default:
+                                    case 'class':
                                         selectorText = `.${mode}`;
                                         break;
+                                    default:
+                                        return;
                                 }
                             } else {
                                 selectorText = ':root';

package/dist/core.mjs

@@ -918,7 +918,7 @@ class MasterCSS {
                             let mediaConditionText;
                             let selectorText;
                             if (mode) {
-                                switch(this.config.modeDriver){
+                                switch(this.config.modes?.[mode]){
                                     case 'media':
                                         mediaConditionText = `@media(prefers-color-scheme:${mode})`;
                                         selectorText = ':root';
@@ -926,9 +926,11 @@ class MasterCSS {
                                     case 'host':
                                         selectorText = `:host(.${mode})`;
                                         break;
-                                    default:
+                                    case 'class':
                                         selectorText = `.${mode}`;
                                         break;
+                                    default:
+                                        return;
                                 }
                             } else {
                                 selectorText = ':root';

package/dist/index.cjs

@@ -22,6 +22,7 @@ var utilities = require('./config/utilities.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');
 
 
@@ -31,6 +32,9 @@ exports.Rule = rule.Rule;
 exports.ANIMATION_SIGN = common.ANIMATION_SIGN;
 exports.AT_SIGN = common.AT_SIGN;
 exports.BASE_UNIT_REGEX = common.BASE_UNIT_REGEX;
+exports.CLASS_ATTRIBUTES = common.CLASS_ATTRIBUTES;
+exports.CLASS_DECLARATIONS = common.CLASS_DECLARATIONS;
+exports.CLASS_FUNCTIONS = common.CLASS_FUNCTIONS;
 exports.COLOR_VALUE_REGEX = common.COLOR_VALUE_REGEX;
 exports.DELIMITER_SIGN = common.DELIMITER_SIGN;
 exports.IMAGE_VALUE_REGEX = common.IMAGE_VALUE_REGEX;
@@ -64,4 +68,5 @@ exports.utilities = utilities;
 exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
+exports.modes = modes;
 exports.rules = rules.default;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 export { config } from './config/index.mjs';
 export { Rule } from './rule.mjs';
-export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS } from './common.mjs';
+export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, CLASS_ATTRIBUTES, CLASS_DECLARATIONS, CLASS_FUNCTIONS, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS } from './common.mjs';
 export { default as MasterCSS, default, masterCSSs } from './core.mjs';
 export { default as Layer } from './layer.mjs';
 export { default as extendConfig } from './utils/extend-config.mjs';
@@ -18,4 +18,5 @@ export { default as utilities } from './config/utilities.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/rule.cjs

@@ -266,7 +266,7 @@ class Rule {
         if (!definition.separators) definition.separators = [
             ','
         ];
-        const { scope, important, modeDriver } = css.config;
+        const { scope, important, modes } = css.config;
         const { selectors, queries, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
@@ -558,7 +558,7 @@ class Rule {
                             analyzeToken(atToken);
                         }
                         if (!atComponents.length) {
-                            if (!isAmpersandIncluded) {
+                            if (!isAmpersandIncluded && modes?.[atToken]) {
                                 this.mode = atToken;
                                 continue;
                             }
@@ -624,7 +624,7 @@ class Rule {
                     const prefixSelectors = this.vendorPrefixSelectors[prefixSelectorVendor];
                     const suffixSelectors = this.vendorSuffixSelectors[eachSuffixSelectorVendor];
                     const prefixTexts = prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText);
-                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modeDriver !== 'media' ? modeDriver === 'host' ? `:host(.${this.mode}) ` : `.${this.mode} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
+                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modes?.[this.mode] !== 'media' ? modes?.[this.mode] === 'host' ? `:host(.${this.mode}) ` : `.${this.mode} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
                             arr.push(suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
                                 _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
                                 return _arr;
@@ -635,7 +635,7 @@ class Rule {
                     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 && modeDriver === 'media') {
+                    if (this.mode && modes?.[this.mode] === 'media') {
                         cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
                     this.natives.push({

package/dist/rule.mjs

@@ -264,7 +264,7 @@ class Rule {
         if (!definition.separators) definition.separators = [
             ','
         ];
-        const { scope, important, modeDriver } = css.config;
+        const { scope, important, modes } = css.config;
         const { selectors, queries, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
@@ -556,7 +556,7 @@ class Rule {
                             analyzeToken(atToken);
                         }
                         if (!atComponents.length) {
-                            if (!isAmpersandIncluded) {
+                            if (!isAmpersandIncluded && modes?.[atToken]) {
                                 this.mode = atToken;
                                 continue;
                             }
@@ -622,7 +622,7 @@ class Rule {
                     const prefixSelectors = this.vendorPrefixSelectors[prefixSelectorVendor];
                     const suffixSelectors = this.vendorSuffixSelectors[eachSuffixSelectorVendor];
                     const prefixTexts = prefixSelectors.map((eachPrefixSelector)=>eachPrefixSelector + prefixText);
-                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modeDriver !== 'media' ? modeDriver === 'host' ? `:host(.${this.mode}) ` : `.${this.mode} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
+                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modes?.[this.mode] !== 'media' ? modes?.[this.mode] === 'host' ? `:host(.${this.mode}) ` : `.${this.mode} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
                             arr.push(suffixSelectors.reduce((_arr, eachSuffixSelector)=>{
                                 _arr.push(eachPrefixText + '.' + cssEscape(name) + eachSuffixSelector);
                                 return _arr;
@@ -633,7 +633,7 @@ class Rule {
                     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 && modeDriver === 'media') {
+                    if (this.mode && modes?.[this.mode] === 'media') {
                         cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
                     this.natives.push({

package/package.json

@@ -1 +1 @@
-{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","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/css"},"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":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.0.0","@master/normal.css":"^2.1.0","@techor/extend":"^3.0.18"},"devDependencies":{"@master/css-shared":"^2.0.0-rc.27","csstype":"^3.1.3"},"version":"2.0.0-rc.27"}
+{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"jest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","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":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.0.0","@master/normal.css":"^2.1.0","@techor/extend":"^3.0.18"},"devDependencies":{"@master/css-shared":"^2.0.0-rc.29","csstype":"^3.1.3"},"version":"2.0.0-rc.29"}