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

package/dist/rule.mjs

@@ -3,7 +3,6 @@ import cssEscape from './shared/utils/css-escape.mjs';
 import { Layer } from './layer.mjs';
 import { BASE_UNIT_REGEX } from './constants/base-unit-regex.mjs';
 
-const atRuleRegExp = /^(media|supports|page|font-face|keyframes|counter-style|font-feature-values|property|layer|container)(?=\||{|\(|$)/;
 class Rule {
     className;
     css;
@@ -12,6 +11,7 @@ class Rule {
     natives;
     order;
     layer;
+    atToken;
     stateToken;
     declarations;
     animationNames;
@@ -24,6 +24,7 @@ class Rule {
         this.natives = [];
         this.order = 0;
         this.layer = 0;
+        this.atToken = '';
         this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
             const { functions } = this.css.config;
             let currentValue = '';
@@ -45,9 +46,9 @@ class Rule {
                         const variable = this.css.variables[eachValueComponent.name];
                         if (variable) {
                             const handleVariable = (normalHandler, varHandler)=>{
-                                if (variable.themes) {
-                                    if (this.theme) {
-                                        const themeVariable = variable.themes[this.theme] ?? variable;
+                                if (variable.modes) {
+                                    if (this.mode) {
+                                        const themeVariable = variable.modes[this.mode] ?? variable;
                                         if (themeVariable?.value) {
                                             normalHandler(themeVariable);
                                         }
@@ -262,8 +263,8 @@ class Rule {
         if (!definition.separators) definition.separators = [
             ','
         ];
-        const { scope, important, themeDriver } = css.config;
-        const { selectors, mediaQueries, stylesBy, animations } = css;
+        const { scope, important, modeDriver } = css.config;
+        const { selectors, queries, stylesBy, animations } = css;
         const classNames = stylesBy[className];
         if (create) create.call(this, className);
         // 1. value / selectorToken
@@ -449,109 +450,124 @@ class Rule {
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
             if (atToken) {
+                this.atToken += '@' + atToken;
                 if (atToken === 'rtl' || atToken === 'ltr') {
                     this.direction = atToken;
                 } else {
-                    let type = '';
-                    let queryText;
-                    const atRuleResult = atRuleRegExp.exec(atToken);
+                    let queryType;
+                    const atComponents = [];
+                    // x font-face, counter-style, keyframes, font-feature-values, property, layer
+                    const queryTypeRegExp = /^(media|supports|container)/;
+                    const atRuleResult = queryTypeRegExp.exec(atToken);
                     if (atRuleResult) {
-                        type = atRuleResult[1];
-                        queryText = atToken.slice(type.length);
-                    } else {
-                        this.media = {
+                        queryType = atRuleResult[1];
+                        atComponents.push({
+                            type: 'arbitrary',
                             token: atToken,
-                            features: {}
-                        };
-                        const queryTexts = [];
-                        const analyzeToken = (typeOrFeatureToken)=>{
-                            if (typeOrFeatureToken === 'all' || typeOrFeatureToken === 'print' || typeOrFeatureToken === 'screen' || typeOrFeatureToken === 'speech') {
-                                this.media.type = typeOrFeatureToken;
-                            } else if (typeOrFeatureToken.startsWith('')) {
-                                if (typeOrFeatureToken === 'landscape' || typeOrFeatureToken === 'portrait') {
-                                    queryTexts.push('(orientation:' + typeOrFeatureToken + ')');
-                                } else if (typeOrFeatureToken === 'motion' || typeOrFeatureToken === 'reduced-motion') {
-                                    queryTexts.push('(prefers-reduced-motion:' + (typeOrFeatureToken === 'motion' ? 'no-preference' : 'reduce') + ')');
+                            value: atToken.slice(queryType.length).replace(/\|/g, ' ')
+                        });
+                    } else {
+                        const analyzeToken = (atComponentToken)=>{
+                            if (atComponentToken === 'all' || atComponentToken === 'print' || atComponentToken === 'screen' || atComponentToken === 'speech') {
+                                queryType = 'media';
+                                atComponents.push({
+                                    type: 'media-type',
+                                    token: atComponentToken,
+                                    value: atComponentToken
+                                });
+                            } else if (atComponentToken === '&') {
+                                atComponents.push({
+                                    type: 'operator',
+                                    token: atComponentToken,
+                                    value: 'and'
+                                });
+                            } else if (atComponentToken.startsWith('')) {
+                                const targetQuery = queries[atComponentToken];
+                                if (targetQuery && typeof targetQuery === 'string') {
+                                    const match = targetQuery.match(queryTypeRegExp);
+                                    queryType = match ? match[1] : '';
+                                    if (!queryType) throw new Error(`Invalid query '${atComponentToken}': '${targetQuery}'`);
+                                    atComponents.push({
+                                        type: 'arbitrary',
+                                        value: targetQuery.slice(match ? match[1].length + 1 : 0)
+                                    });
                                 } else {
-                                    const targetMediaQuery = mediaQueries[typeOrFeatureToken];
-                                    if (targetMediaQuery && typeof targetMediaQuery === 'string') {
-                                        queryTexts.push(targetMediaQuery);
-                                    } else {
-                                        let featureName = '';
-                                        let extremumOperator = '';
-                                        let correction = 0;
-                                        if (typeOrFeatureToken.startsWith('<=')) {
-                                            extremumOperator = '<=';
-                                            featureName = 'max-width';
-                                        } else if (typeOrFeatureToken.startsWith('>=') || targetMediaQuery) {
-                                            extremumOperator = '>=';
-                                            featureName = 'min-width';
-                                        } else if (typeOrFeatureToken.startsWith('>')) {
-                                            extremumOperator = '>';
-                                            featureName = 'min-width';
-                                            correction = .02;
-                                        } else if (typeOrFeatureToken.startsWith('<')) {
-                                            extremumOperator = '<';
-                                            featureName = 'max-width';
-                                            correction = -.02;
-                                        }
-                                        const token = extremumOperator ? typeOrFeatureToken.replace(extremumOperator, '') : typeOrFeatureToken;
-                                        const viewport = mediaQueries[token];
-                                        switch(featureName){
-                                            case 'max-width':
-                                            case 'min-width':
-                                                // eslint-disable-next-line no-case-declarations
-                                                let featureComponent = {};
-                                                if (typeof viewport === 'number') {
-                                                    featureComponent = {
-                                                        type: 'number',
-                                                        value: viewport + correction,
-                                                        unit: 'px'
-                                                    };
-                                                } else {
-                                                    featureComponent = this.parseValueComponent(token, 'px');
-                                                    if (featureComponent.type === 'number' && featureComponent.unit === 'px') {
-                                                        featureComponent.value += correction;
-                                                    }
-                                                }
-                                                this.media.features[featureName] = featureComponent;
-                                                if (featureComponent.type === 'number') {
-                                                    queryTexts.push('(' + featureName + ':' + (featureComponent.value + featureComponent.unit) + ')');
+                                    // todo: container queries
+                                    queryType = 'media';
+                                    let featureName = '';
+                                    let extremumOperator = '';
+                                    let correction = 0;
+                                    if (atComponentToken.startsWith('<=')) {
+                                        extremumOperator = '<=';
+                                        featureName = 'max-width';
+                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
+                                        extremumOperator = '>=';
+                                        featureName = 'min-width';
+                                    } else if (atComponentToken.startsWith('>')) {
+                                        extremumOperator = '>';
+                                        featureName = 'min-width';
+                                        correction = .02;
+                                    } else if (atComponentToken.startsWith('<')) {
+                                        extremumOperator = '<';
+                                        featureName = 'max-width';
+                                        correction = -.02;
+                                    }
+                                    const token = extremumOperator ? atComponentToken.replace(extremumOperator, '') : atComponentToken;
+                                    const viewport = queries[token];
+                                    switch(featureName){
+                                        case 'max-width':
+                                        case 'min-width':
+                                            // eslint-disable-next-line no-case-declarations
+                                            if (typeof viewport === 'number') {
+                                                atComponents.push({
+                                                    type: 'feature',
+                                                    name: featureName,
+                                                    valueType: 'number',
+                                                    value: viewport + correction,
+                                                    unit: 'px'
+                                                });
+                                            } else {
+                                                const valueComponent = this.parseValueComponent(token, 'px');
+                                                if (valueComponent.type === 'number') {
+                                                    atComponents.push({
+                                                        type: 'feature',
+                                                        name: featureName,
+                                                        valueType: 'number',
+                                                        value: valueComponent.value + correction,
+                                                        unit: valueComponent.unit
+                                                    });
                                                 } else {
-                                                    queryTexts.push('(' + featureName + ':' + featureComponent.value + ')');
+                                                    atComponents.push({
+                                                        type: 'feature',
+                                                        name: featureName,
+                                                        valueType: 'string',
+                                                        value: token
+                                                    });
                                                 }
-                                                break;
-                                        }
+                                            }
+                                            break;
                                     }
                                 }
                             }
                         };
                         const isAmpersandIncluded = atToken.includes('&');
                         if (isAmpersandIncluded) {
-                            const typeOrFeatureTokens = atToken.split('&');
-                            for (const typeOrFeatureToken of typeOrFeatureTokens){
-                                analyzeToken(typeOrFeatureToken);
+                            const typeOrFeatureTokens = atToken.split(/(&|,)/);
+                            for (const atComponentToken of typeOrFeatureTokens){
+                                analyzeToken(atComponentToken);
                             }
                         } else {
                             analyzeToken(atToken);
                         }
-                        if (this.media.type) {
-                            queryText = this.media.type;
-                        }
-                        if (queryTexts.length) {
-                            queryText = queryTexts.join(' and ');
-                        }
-                        if (!queryText) {
+                        if (!atComponents.length) {
                             if (!isAmpersandIncluded) {
-                                this.theme = atToken;
+                                this.mode = atToken;
                                 continue;
                             }
-                        } else {
-                            type = 'media';
                         }
                     }
-                    if (queryText) {
-                        this.at[type] = (type in this.at ? this.at[type] + ' and ' : '') + queryText.replace(/\|/g, ' ');
+                    if (queryType) {
+                        this.at[queryType] = atComponents;
                     }
                 }
             }
@@ -610,7 +626,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.theme && themeDriver !== 'media' ? themeDriver === 'host' ? `:host(.${this.theme}) ` : `.${this.theme} ` : '') + (scope ? scope + ' ' : '') + eachPrefixText).reduce((arr, eachPrefixText)=>{
+                    const getCssText = (name)=>prefixTexts.map((eachPrefixText)=>(this.mode && modeDriver !== 'media' ? modeDriver === '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;
@@ -619,10 +635,10 @@ class Rule {
                         }, []).join(',');
                     let cssText = getCssText(className) + (classNames ? classNames.reduce((str, className)=>str + ',' + getCssText(className), '') : '') + '{' + propertiesText.join(';') + '}';
                     for (const key of Object.keys(this.at).sort((_a, b)=>b === 'supports' ? -1 : 1)){
-                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key] + '{' + cssText + '}';
+                        cssText = '@' + key + (key.includes(' ') ? '' : ' ') + this.at[key].map((eachAtComponent)=>this.resolveAtComponent(eachAtComponent)).join(' ') + '{' + cssText + '}';
                     }
-                    if (this.theme && themeDriver === 'media') {
-                        cssText = `@media(prefers-color-scheme:${this.theme}){` + cssText + '}';
+                    if (this.mode && modeDriver === 'media') {
+                        cssText = `@media(prefers-color-scheme:${this.mode}){` + cssText + '}';
                     }
                     this.natives.push({
                         text: cssText
@@ -631,6 +647,18 @@ class Rule {
             }
         }
     }
+    resolveAtComponent(atComponent) {
+        switch(atComponent.type){
+            case 'arbitrary':
+                return atComponent.value;
+            case 'media-type':
+                return atComponent.value;
+            case 'feature':
+                return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
+            case 'operator':
+                return atComponent.value;
+        }
+    }
     resolveValue;
     get text() {
         return this.natives.map((eachNative)=>eachNative.text).join('');

package/dist/tokens/screen-sizes.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var mediaQueries = {
+var screenSizes = {
     '4xs': 360,
     '3xs': 480,
     '2xs': 600,
@@ -14,4 +14,4 @@ var mediaQueries = {
     '4xl': 2560
 };
 
-module.exports = mediaQueries;
+module.exports = screenSizes;

package/dist/tokens/screen-sizes.mjs

@@ -1,4 +1,4 @@
-var mediaQueries = {
+var screenSizes = {
     '4xs': 360,
     '3xs': 480,
     '2xs': 600,
@@ -12,4 +12,4 @@ var mediaQueries = {
     '4xl': 2560
 };
 
-export { mediaQueries as default };
+export { screenSizes as default };

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":"rc","@master/normal.css":"^2.0.0","@techor/extend":"^3.0.16"},"devDependencies":{"css-shared":"^2.0.0-rc.24","csstype":"^3.1.3"},"version":"2.0.0-rc.24"}
+{"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":{"css-shared":"^2.0.0-rc.26","csstype":"^3.1.3"},"version":"2.0.0-rc.26"}

package/dist/config/media-queries.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var screenSizes = require('../tokens/screen-sizes.cjs');
-
-
-
-module.exports = screenSizes;

package/dist/config/media-queries.d.ts

@@ -1 +0,0 @@
-export { default } from '../tokens/screen-sizes';

package/dist/config/media-queries.mjs

@@ -1 +0,0 @@
-export { default } from '../tokens/screen-sizes.mjs';

package/dist/functions/transform-color-with-opacity.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-function transformColorWithOpacity(color, opacityStr) {
-    let opacity = opacityStr.endsWith('%') ? parseFloat(opacityStr) / 100.0 : +opacityStr;
-    opacity = isNaN(opacity) ? 1 : Math.min(Math.max(opacity, 0), 1);
-    return color + Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0');
-}
-
-exports.transformColorWithOpacity = transformColorWithOpacity;

package/dist/functions/transform-color-with-opacity.d.ts

@@ -1 +0,0 @@
-export declare function transformColorWithOpacity(color: string, opacityStr: string): string;

package/dist/functions/transform-color-with-opacity.mjs

@@ -1,7 +0,0 @@
-function transformColorWithOpacity(color, opacityStr) {
-    let opacity = opacityStr.endsWith('%') ? parseFloat(opacityStr) / 100.0 : +opacityStr;
-    opacity = isNaN(opacity) ? 1 : Math.min(Math.max(opacity, 0), 1);
-    return color + Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0');
-}
-
-export { transformColorWithOpacity };

package/dist/utils/extend-config.d.ts

@@ -1,2 +0,0 @@
-import type { Config } from '../config';
-export declare function extendConfig(...configs: Config[]): Config;