@mlut/core 2.1.1 → 2.1.2

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";';
@@ -83,8 +85,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 +97,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.concat([...utilsWithAtRule].sort(this.compareUtilsWithAtRule));
     }
+    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 +154,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,6 +1,6 @@
 {
 	"name": "@mlut/core",
-	"version": "2.1.1",
+	"version": "2.1.2",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",