@master/css 2.0.0-rc.67 → 2.0.0-rc.69

package/dist/variable-rule.mjs

@@ -2,28 +2,25 @@ class VariableRule {
     name;
     variable;
     css;
-    nodes;
+    nodes = [];
     constructor(name, variable, css){
         this.name = name;
         this.variable = variable;
         this.css = css;
-        this.nodes = [];
         const hasDefaultValue = variable.value !== undefined;
         if (hasDefaultValue) {
-            this.nodes.push(new VariableRuleNode(this.name, variable, css));
+            this.nodes.push(new VariableRuleNode(this, variable, css));
         }
-        if (variable.modes) {
+        if (variable.modes && this.css.config.modeTrigger) {
             for(const mode in variable.modes){
                 const modeVariable = variable.modes[mode];
-                const variableRule = new VariableRuleNode(this.name, modeVariable, css, mode);
-                if (variableRule.modeTrigger) {
-                    const isDefaultMode = hasDefaultValue ? false : this.css.config.defaultMode === mode;
-                    variableRule.isDefaultMode = isDefaultMode;
-                    if (isDefaultMode) {
-                        this.nodes.unshift(variableRule);
-                    } else {
-                        this.nodes.push(variableRule);
-                    }
+                const variableRule = new VariableRuleNode(this, modeVariable, css, mode);
+                const isDefaultMode = hasDefaultValue ? false : this.css.config.defaultMode === mode;
+                variableRule.isDefaultMode = isDefaultMode;
+                if (isDefaultMode) {
+                    this.nodes.unshift(variableRule);
+                } else {
+                    this.nodes.push(variableRule);
                 }
             }
         }
@@ -36,42 +33,51 @@ class VariableRule {
     }
 }
 class VariableRuleNode {
-    name;
+    rule;
     variable;
     css;
     mode;
     native;
-    isDefaultMode;
-    constructor(name, variable, css, mode){
-        this.name = name;
+    isDefaultMode = false;
+    constructor(rule, variable, css, mode){
+        this.rule = rule;
         this.variable = variable;
         this.css = css;
         this.mode = mode;
-        this.isDefaultMode = false;
-    }
-    get modeTrigger() {
-        return this.mode ? this.css.config.modes?.[this.mode] : undefined;
     }
     get selectorText() {
         const isDefaultMode = this.isDefaultMode;
         if (this.mode) {
-            switch(this.modeTrigger){
-                case 'media':
-                    return ':root';
+            switch(this.css.config.modeTrigger){
                 case 'host':
-                    return `:host(.${this.mode})` + (isDefaultMode ? ',:host' : '');
+                    return `:host(.${this.mode})${isDefaultMode ? ',:host' : ''}`;
                 case 'class':
-                    return `.${this.mode}` + (isDefaultMode ? ',:root' : '');
+                    return `.${this.mode}${isDefaultMode ? ',:root' : ''}`;
                 default:
-                    return '';
+                    return ':root';
             }
         } else {
             return ':root';
         }
     }
     get text() {
-        let text = `${this.selectorText}{--${this.name}:${String(this.variable.value)}}`;
-        if (this.modeTrigger === 'media') {
+        let value = '';
+        switch(this.rule.variable.type){
+            case 'color':
+                {
+                    const color = this.variable;
+                    value = (color.alpha ?? 1) < 1 ? `${color.space}(${color.value}/${color.alpha})` : `${color.space}(${color.value})`;
+                    break;
+                }
+            case 'number':
+                value = String(this.variable.value);
+                break;
+            case 'string':
+                value = this.variable.value;
+                break;
+        }
+        let text = `${this.selectorText}{--${this.rule.name}:${value}}`;
+        if (this.css.config.modeTrigger === 'media' && this.mode) {
             text = `@media (prefers-color-scheme:${this.mode}){${text}}`;
         }
         return text;

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.1","@master/normal.css":"^3.2.0","@techor/extend":"^3.2.0","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.67"},"version":"2.0.0-rc.67"}
+{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","bench":"vitest bench","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"},"./*":{"types":"./dist/*.d.ts","require":"./dist/*.cjs","import":"./dist/*.mjs"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^3.0.0","@master/normal.css":"^3.2.0","csstype":"^3.1.3","json-safe-extend":"^3.2.5"},"devDependencies":{"shared":"^2.0.0-rc.69"},"version":"2.0.0-rc.69"}

package/dist/utils/autofill-solid-style.d.ts

@@ -1,3 +0,0 @@
-import { SyntaxRuleDefinition } from '../types/config';
-declare const autofillSolidStyle: SyntaxRuleDefinition['transformValueComponents'];
-export default autofillSolidStyle;