@mlut/core 2.1.1 → 2.1.3

package/README.md

@@ -1,8 +1,8 @@
 # mlut core #
 
-<img alt="Logo" src="https://github.com/mr150/mlut/raw/master/docs/img/logo-full.png" width="350"/>
+<img alt="Logo" src="https://github.com/mlutcss/mlut/raw/master/docs/img/logo-full.png" width="350"/>
 
-The [mlut](https://github.com/mr150/mlut) core contains:
+The [mlut](https://github.com/mlutcss/mlut) core contains:
 - Sass tools
 - CSS library
 - JIT engine
@@ -18,7 +18,7 @@ When using this package, you will need to install Sass separately. We recommend
 This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
 
 ## Documentation ##
-Full documentation available [here](https://mr150.github.io/mlut/)
+Full documentation available [here](https://mlutcss.github.io/mlut/)
 
 ## License ##
 MIT

package/dist/jit/JitEngine.d.ts

@@ -1,5 +1,7 @@
 export declare class JitEngine {
     private utils;
+    private breakpoints;
+    private breakpointsMap;
     private inputFileDir;
     private sassModuleName;
     private inputFileCache;
@@ -13,6 +15,7 @@ export declare class JitEngine {
     updateSassConfig(content: string): Promise<void>;
     generateCss(): Promise<string>;
     private extractUtils;
+    private compareUtilsWithAtRule;
     private filterAndProcessClassStr;
     private extractUserSassConfig;
     private loadUtils;

package/dist/jit/JitEngine.js

@@ -9,6 +9,8 @@ const sass = await import('sass-embedded')
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export class JitEngine {
     utils = new Set();
+    breakpoints = [];
+    breakpointsMap = {};
     inputFileDir = __dirname;
     sassModuleName = 'tools';
     inputFileCache = '@use "../sass/tools";';
@@ -66,7 +68,14 @@ export class JitEngine {
             logger.warn('No content to generate CSS was found!');
             return '';
         }
-        const allUniqueUtils = [...new Set([...this.utilsByFile.values()].flat())];
+        const mainUtils = [];
+        const atRuleUtils = [];
+        for (const [main, withAr] of this.utilsByFile.values()) {
+            mainUtils.push(main);
+            atRuleUtils.push(withAr);
+        }
+        const sortedAtRuleUtils = atRuleUtils.flat().sort(this.compareUtilsWithAtRule);
+        const allUniqueUtils = [...new Set(mainUtils.flat().concat(sortedAtRuleUtils))];
         const applyStr = `\n@include ${this.sassModuleName}.apply(${JSON.stringify(allUniqueUtils)},(),true);`;
         return sass.compileStringAsync(this.inputFileCache + applyStr, { loadPaths: [this.inputFileDir, 'node_modules'] }).then(({ css }) => css, (e) => (logger.error('Sass compilation error.', e), ''));
     }
@@ -83,8 +92,10 @@ export class JitEngine {
             .replace(this.utilsRegexps.singleQuotedContent, '')
             .match(this.utilsRegexps.backtickQuotedContent)
             ?.reduce(this.filterAndProcessClassStr, allClassNames);
-        return [...allClassNames.join(' ').split(' ').reduce((acc, cssClass) => {
-                const utility = cssClass.split('_').find((str) => (this.utilsRegexps.utilName.test(str)));
+        const utilsWithAtRule = new Set();
+        const mainUtils = [...allClassNames.join(' ').split(' ').reduce((acc, cssClass) => {
+                const utilComponents = cssClass.split('_');
+                const utility = utilComponents.find((str) => (this.utilsRegexps.utilName.test(str)));
                 if (utility) {
                     const separator = utility.replace(this.utilsRegexps.utilName, '')[0];
                     if (separator && !this.utilsRegexps.valueSeparator.test(separator)) {
@@ -93,12 +104,42 @@ export class JitEngine {
                     const utilName = utility.match(this.utilsRegexps.utilName)?.[0];
                     if (this.utils.has(utilName) ||
                         (utilName[0] === '-' && !this.utilsRegexps.contextUtil.test(utilName))) {
-                        acc.add(cssClass);
+                        const [atRule] = utilComponents;
+                        if (utilComponents.length > 1 && !atRule.startsWith(utilName) && (atRule[0] === '@' ||
+                            atRule[0] === '<' ||
+                            (atRule in this.breakpointsMap) ||
+                            this.breakpoints.find((item) => atRule.startsWith(item)))) {
+                            utilsWithAtRule.add(cssClass);
+                        }
+                        else {
+                            acc.add(cssClass);
+                        }
                     }
                 }
                 return acc;
             }, new Set())];
+        return [mainUtils, [...utilsWithAtRule]];
     }
+    compareUtilsWithAtRule = (a, b) => {
+        if (a[0] === '@' && b[0] === '@') {
+            return 0;
+        }
+        if (a[0] === '@') {
+            return 1;
+        }
+        if (b[0] === '@') {
+            return -1;
+        }
+        const bpA = a.split('_')[0];
+        const bpB = b.split('_')[0];
+        if (!(bpA in this.breakpointsMap)) {
+            return 1;
+        }
+        if (!(bpB in this.breakpointsMap)) {
+            return -1;
+        }
+        return this.breakpointsMap[bpA] - this.breakpointsMap[bpB];
+    };
     filterAndProcessClassStr = (acc, str) => {
         if (this.utilsRegexps.uppercaseLetter.test(str)) {
             acc.push(str.replace(this.utilsRegexps.tooMoreSpaces, ' ').slice(1, -1));
@@ -120,12 +161,25 @@ export class JitEngine {
         }
     }
     async loadUtils(userConfig = this.defaultSassConfig) {
-        const { css } = (await sass.compileStringAsync(userConfig + '\n a{ all: map.keys(map.get(ml.$utils-db, "utils", "registry")); }', {
+        const placeholderRules = `
+			\n a{ all: map.keys(map.get(ml.$utils-db, "utils", "registry")); }
+			\n b{ all: map.keys(map.get(ml.$at-rules-cfg, "breakpoints")); }
+		`;
+        const { css } = (await sass.compileStringAsync(userConfig + placeholderRules, {
             style: 'compressed',
             loadPaths: [__dirname, 'node_modules'],
         }));
-        const strEnd = css.lastIndexOf('"') - css.length + 1;
-        this.utils = new Set(JSON.parse('[' + css.split('all:')[1].slice(0, strEnd) + ']'));
+        const [, rawUtils, rawBreakpoints] = css.split('all:');
+        const rawUtilsStrEnd = rawUtils.lastIndexOf('"') - rawUtils.length + 1;
+        const rawBpsStrEnd = rawBreakpoints.lastIndexOf('"') - rawBreakpoints.length + 1;
+        this.utils = new Set(JSON.parse('[' + rawUtils.slice(0, rawUtilsStrEnd) + ']'));
+        this.breakpoints =
+            JSON.parse('[' + rawBreakpoints.slice(0, rawBpsStrEnd) + ']');
+        this.breakpointsMap = this.breakpoints.reduce((acc, item, i) => {
+            acc['<' + item] = i - 0.1;
+            acc[item] = i;
+            return acc;
+        }, {});
     }
 }
 export const jitEngine = new JitEngine();

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@mlut/core",
-	"version": "2.1.1",
+	"version": "2.1.3",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",
 	"license": "MIT",
-	"homepage": "https://mr150.github.io/mlut/",
+	"homepage": "https://mlut.style/",
 	"types": "dist/index.d.ts",
 	"keywords": [
 		"mlut",
@@ -21,10 +21,10 @@
 	"repository": {
 		"type": "git",
 		"directory": "packages/core",
-		"url": "https://github.com/mr150/mlut.git"
+		"url": "https://github.com/mlutcss/mlut.git"
 	},
 	"bugs": {
-		"url": "https://github.com/mr150/mlut/issues"
+		"url": "https://github.com/mlutcss/mlut/issues"
 	},
 	"exports": {
 		".": {
@@ -41,8 +41,8 @@
 	],
 	"devDependencies": {
 		"@types/node": "^20.10.5",
-		"sass-embedded": "^1.71.0",
-		"sass": "^1.71.0",
+		"sass": "^1.93.0",
+		"sass-embedded": "^1.93.0",
 		"typescript": "^4.8.0"
 	}
 }