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

package/dist/config/rules.mjs

@@ -171,6 +171,10 @@ const rules = {
                         '-webkit-font-smoothing': 'antialiased',
                         '-moz-osx-font-smoothing': 'grayscale'
                     };
+                default:
+                    return {
+                        'font-smooth': value
+                    };
             }
         }
     },
@@ -792,6 +796,9 @@ const rules = {
         key: 'cols',
         type: SyntaxRuleType.NativeShorthand
     },
+    'overflow-wrap': {
+        type: SyntaxRuleType.Native
+    },
     'white-space': {
         type: SyntaxRuleType.Native
     },

package/dist/config/utilities.cjs

@@ -89,7 +89,7 @@ const utilities = {
     isolate: {
         isolation: 'isolate'
     },
-    overflowed: {
+    overflow: {
         overflow: 'visible'
     },
     untouchable: {
@@ -190,8 +190,16 @@ const utilities = {
         'white-space': 'break-spaces'
     },
     'break-word': {
-        'overflow-wrap': 'break-word',
-        overflow: 'hidden'
+        'word-break': 'break-word'
+    },
+    'wrap-break-word': {
+        'overflow-wrap': 'break-word'
+    },
+    'wrap-anywhere': {
+        'overflow-wrap': 'anywhere'
+    },
+    'wrap-normal': {
+        'overflow-wrap': 'normal'
     },
     'gradient-text': {
         '-webkit-text-fill-color': 'transparent',

package/dist/config/utilities.d.ts

@@ -87,7 +87,7 @@ declare const utilities: {
     readonly isolate: {
         readonly isolation: "isolate";
     };
-    readonly overflowed: {
+    readonly overflow: {
         readonly overflow: "visible";
     };
     readonly untouchable: {
@@ -188,8 +188,16 @@ declare const utilities: {
         readonly 'white-space': "break-spaces";
     };
     readonly 'break-word': {
+        readonly 'word-break': "break-word";
+    };
+    readonly 'wrap-break-word': {
         readonly 'overflow-wrap': "break-word";
-        readonly overflow: "hidden";
+    };
+    readonly 'wrap-anywhere': {
+        readonly 'overflow-wrap': "anywhere";
+    };
+    readonly 'wrap-normal': {
+        readonly 'overflow-wrap': "normal";
     };
     readonly 'gradient-text': {
         readonly '-webkit-text-fill-color': "transparent";

package/dist/config/utilities.mjs

@@ -87,7 +87,7 @@ const utilities = {
     isolate: {
         isolation: 'isolate'
     },
-    overflowed: {
+    overflow: {
         overflow: 'visible'
     },
     untouchable: {
@@ -188,8 +188,16 @@ const utilities = {
         'white-space': 'break-spaces'
     },
     'break-word': {
-        'overflow-wrap': 'break-word',
-        overflow: 'hidden'
+        'word-break': 'break-word'
+    },
+    'wrap-break-word': {
+        'overflow-wrap': 'break-word'
+    },
+    'wrap-anywhere': {
+        'overflow-wrap': 'anywhere'
+    },
+    'wrap-normal': {
+        'overflow-wrap': 'normal'
     },
     'gradient-text': {
         '-webkit-text-fill-color': 'transparent',

package/dist/core.cjs

@@ -224,52 +224,41 @@ class MasterCSS {
     resolveComponents() {
         const { components } = this.config;
         const flatComps = components ? flattenObject.flattenObject(components) : {};
-        const names = Object.keys(flatComps);
-        const nameSet = new Set(names);
-        // First pass: expand class names recursively
-        for (const name of names){
-            if (this.components.has(name)) continue;
-            const currentClass = [];
-            this.components.set(name, currentClass);
+        const flatNames = Object.keys(flatComps);
+        const resolve = (name, currentClasses = [])=>{
+            const compClasses = this.components.get(name);
+            if (compClasses) {
+                currentClasses.push(...compClasses);
+                return;
+            }
             const className = flatComps[name];
-            if (!className) continue;
-            const classNames = className.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
-            const seen = new Set();
-            const addClass = (cls)=>{
-                if (!seen.has(cls)) {
-                    seen.add(cls);
-                    currentClass.push(cls);
-                }
-            };
-            for (const eachClassName of classNames){
-                if (nameSet.has(eachClassName)) {
-                    addClass(eachClassName);
-                    // Lazy expand dependencies if not processed
-                    if (!this.components.has(eachClassName)) {
-                        const componentClass = flatComps[eachClassName];
-                        if (componentClass) {
-                            this.components.set(eachClassName, []) // placeholder to prevent infinite loop
-                            ;
-                            // Recursively resolve
-                            const depClassNames = componentClass.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
-                            depClassNames.forEach(addClass);
-                        }
-                    }
-                    const componentClasses = this.components.get(eachClassName);
-                    componentClasses?.forEach(addClass);
+            if (!className) return;
+            const classes = className.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
+            for (const cls of classes){
+                if (flatNames.includes(cls)) {
+                    resolve(cls, currentClasses);
                 } else {
-                    addClass(eachClassName);
+                    currentClasses.push(cls);
                 }
             }
+            this.components.set(name, [
+                ...currentClasses
+            ]);
+        };
+        // First pass: expand class names recursively
+        for (const name of flatNames){
+            resolve(name);
         }
         // Second pass: convert to grouped syntax rule strings
-        this.components.forEach((componentClasses, componentName)=>{
+        this.components.forEach((compClasses, componentName)=>{
             const syntaxRulesByStateToken = {};
-            for (const syntax of componentClasses){
+            for (const syntax of compClasses){
                 const parsed = this.create(syntax);
-                if (parsed?.text) {
+                if (parsed?.valid) {
                     const group = syntaxRulesByStateToken[parsed.stateToken] ||= [];
                     group.push(parsed);
+                } else {
+                    console.error(`Invalid class "${syntax}" found in ${componentName} component.`);
                 }
             }
             const result = Object.entries(syntaxRulesByStateToken).map(([stateToken, syntaxRules])=>{
@@ -554,22 +543,24 @@ class MasterCSS {
      * @returns SyntaxRule[]
      */ generate(className, mode) {
         let syntaxRules = [];
-        const componentClasses = this.components.get(className);
-        if (componentClasses) {
-            componentClasses.forEach((eachSyntax)=>{
-                const syntaxRule = this.create(eachSyntax, className, mode);
+        const compClasses = this.components.get(className);
+        if (compClasses) {
+            compClasses.forEach((cls)=>{
+                const syntaxRule = this.create(cls, className, mode);
                 if (syntaxRule && syntaxRule.valid) {
                     syntaxRules.push(syntaxRule);
+                } else {
+                    console.error(`Invalid syntax class "${cls}" is in ${className} component.`);
                 }
             });
         } else {
             const atIndex = className.indexOf('@');
             if (atIndex !== -1) {
                 const name = className.slice(0, atIndex);
-                const componentClasses = this.components.get(name);
-                if (componentClasses) {
+                const compClasses = this.components.get(name);
+                if (compClasses) {
                     const atToken = className.slice(atIndex);
-                    componentClasses.forEach((eachSyntax)=>{
+                    compClasses.forEach((eachSyntax)=>{
                         const syntaxRule = this.create(eachSyntax + atToken, className, mode);
                         if (syntaxRule && syntaxRule.valid) {
                             syntaxRules.push(syntaxRule);

package/dist/core.mjs

@@ -222,52 +222,41 @@ class MasterCSS {
     resolveComponents() {
         const { components } = this.config;
         const flatComps = components ? flattenObject(components) : {};
-        const names = Object.keys(flatComps);
-        const nameSet = new Set(names);
-        // First pass: expand class names recursively
-        for (const name of names){
-            if (this.components.has(name)) continue;
-            const currentClass = [];
-            this.components.set(name, currentClass);
+        const flatNames = Object.keys(flatComps);
+        const resolve = (name, currentClasses = [])=>{
+            const compClasses = this.components.get(name);
+            if (compClasses) {
+                currentClasses.push(...compClasses);
+                return;
+            }
             const className = flatComps[name];
-            if (!className) continue;
-            const classNames = className.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
-            const seen = new Set();
-            const addClass = (cls)=>{
-                if (!seen.has(cls)) {
-                    seen.add(cls);
-                    currentClass.push(cls);
-                }
-            };
-            for (const eachClassName of classNames){
-                if (nameSet.has(eachClassName)) {
-                    addClass(eachClassName);
-                    // Lazy expand dependencies if not processed
-                    if (!this.components.has(eachClassName)) {
-                        const componentClass = flatComps[eachClassName];
-                        if (componentClass) {
-                            this.components.set(eachClassName, []) // placeholder to prevent infinite loop
-                            ;
-                            // Recursively resolve
-                            const depClassNames = componentClass.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
-                            depClassNames.forEach(addClass);
-                        }
-                    }
-                    const componentClasses = this.components.get(eachClassName);
-                    componentClasses?.forEach(addClass);
+            if (!className) return;
+            const classes = className.replace(/(?:\n\s*)+/g, ' ').trim().split(' ');
+            for (const cls of classes){
+                if (flatNames.includes(cls)) {
+                    resolve(cls, currentClasses);
                 } else {
-                    addClass(eachClassName);
+                    currentClasses.push(cls);
                 }
             }
+            this.components.set(name, [
+                ...currentClasses
+            ]);
+        };
+        // First pass: expand class names recursively
+        for (const name of flatNames){
+            resolve(name);
         }
         // Second pass: convert to grouped syntax rule strings
-        this.components.forEach((componentClasses, componentName)=>{
+        this.components.forEach((compClasses, componentName)=>{
             const syntaxRulesByStateToken = {};
-            for (const syntax of componentClasses){
+            for (const syntax of compClasses){
                 const parsed = this.create(syntax);
-                if (parsed?.text) {
+                if (parsed?.valid) {
                     const group = syntaxRulesByStateToken[parsed.stateToken] ||= [];
                     group.push(parsed);
+                } else {
+                    console.error(`Invalid class "${syntax}" found in ${componentName} component.`);
                 }
             }
             const result = Object.entries(syntaxRulesByStateToken).map(([stateToken, syntaxRules])=>{
@@ -552,22 +541,24 @@ class MasterCSS {
      * @returns SyntaxRule[]
      */ generate(className, mode) {
         let syntaxRules = [];
-        const componentClasses = this.components.get(className);
-        if (componentClasses) {
-            componentClasses.forEach((eachSyntax)=>{
-                const syntaxRule = this.create(eachSyntax, className, mode);
+        const compClasses = this.components.get(className);
+        if (compClasses) {
+            compClasses.forEach((cls)=>{
+                const syntaxRule = this.create(cls, className, mode);
                 if (syntaxRule && syntaxRule.valid) {
                     syntaxRules.push(syntaxRule);
+                } else {
+                    console.error(`Invalid syntax class "${cls}" is in ${className} component.`);
                 }
             });
         } else {
             const atIndex = className.indexOf('@');
             if (atIndex !== -1) {
                 const name = className.slice(0, atIndex);
-                const componentClasses = this.components.get(name);
-                if (componentClasses) {
+                const compClasses = this.components.get(name);
+                if (compClasses) {
                     const atToken = className.slice(atIndex);
-                    componentClasses.forEach((eachSyntax)=>{
+                    compClasses.forEach((eachSyntax)=>{
                         const syntaxRule = this.create(eachSyntax + atToken, className, mode);
                         if (syntaxRule && syntaxRule.valid) {
                             syntaxRules.push(syntaxRule);

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.65"},"version":"2.0.0-rc.65"}
+{"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"}

package/dist/config/styles.cjs

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

package/dist/config/styles.d.ts

@@ -1,3 +0,0 @@
-export interface ConfigStyles {
-    [key: string]: string | ConfigStyles;
-}

package/dist/config/styles.mjs

@@ -1 +0,0 @@
-