@mlut/core 1.0.0 → 2.0.1

package/dist/jit/JitEngine.d.ts

@@ -1,18 +1,19 @@
 export declare class JitEngine {
     private utils;
-    private inputFilePath;
     private inputFileDir;
     private sassModuleName;
     private inputFileCache;
-    private generationDebounce;
     private readonly defaultSassConfig;
     private readonly utilsByFile;
     private readonly utilsRegexps;
     private readonly configRegexps;
     init([inputPath, inputContent]?: [string | undefined, string | undefined]): Promise<void>;
-    putAndGenerateCss(id: string, content: string): Promise<string | undefined>;
+    putContent(id: string, content: string | undefined): void;
+    deleteContent(id: string): boolean;
+    updateSassConfig(content: string): Promise<void>;
+    generateCss(): Promise<string>;
     private extractUtils;
-    private normalizeClassNameStr;
+    private filterAndProcessClassStr;
     private extractUserSassConfig;
     private loadUtils;
 }

package/dist/jit/JitEngine.js

@@ -8,82 +8,78 @@ const sass = await import('sass-embedded')
 const __dirname = new URL('.', import.meta.url).pathname;
 export class JitEngine {
     utils = new Set();
-    inputFilePath = '';
     inputFileDir = __dirname;
     sassModuleName = 'tools';
     inputFileCache = '@use "../sass/tools";';
-    generationDebounce;
     defaultSassConfig = '@use "sass:map";\n @use "../sass/tools/settings" as ml;';
     utilsByFile = new Map();
     utilsRegexps = {
-        quotedContent: /"\n?[^"]*?[A-Z][^"\n]*\n?"/g,
-        singleQuotedContent: /'\n?[^']*?[A-Z][^'\n]*\n?'/g,
+        quotedContent: /"\n?[^"]*[^"\n]*\n?"/g,
+        singleQuotedContent: /'\n?[^']*[^'\n]*\n?'/g,
+        backtickQuotedContent: /`\n?[^`]*[^`\n]*\n?`/g,
         tooMoreSpaces: /\s{2,}|\n/g,
+        escapedQuotes: /\\['"`]/g,
         utilName: /^-?[A-Z]{1}[a-zA-Z]*/,
+        uppercaseLetter: /[A-Z]/,
     };
     configRegexps = {
         userSettings: /@use ['"][^'"]*(tools|mlut|core)['"](\s*as\s+[\w]+)?\s+with\s*\(([^;]+)\);/s,
         sassModuleName: /@use ['"][^'"]*(tools|mlut|core)['"]\s*;/s,
     };
     async init([inputPath, inputContent] = ['', '']) {
+        if (this.utils.size) {
+            return;
+        }
         let sassConfig = this.defaultSassConfig;
         if (inputPath && inputContent) {
-            this.inputFilePath = path.join(process.cwd(), inputPath);
-            this.inputFileDir = path.dirname(this.inputFilePath);
+            this.inputFileDir = path.dirname(path.resolve(process.cwd(), inputPath));
             this.inputFileCache = inputContent;
             sassConfig = this.extractUserSassConfig(inputContent);
         }
         await this.loadUtils(sassConfig);
     }
-    async putAndGenerateCss(id, content) {
+    putContent(id, content) {
+        if (!content) {
+            return;
+        }
+        this.utilsByFile.set(id, this.extractUtils(content));
+    }
+    deleteContent(id) {
+        return this.utilsByFile.delete(id);
+    }
+    async updateSassConfig(content) {
+        this.inputFileCache = content;
+        const sassConfig = this.extractUserSassConfig(content);
+        if (sassConfig) {
+            await this.loadUtils(sassConfig);
+        }
+    }
+    async generateCss() {
         if (this.utils.size === 0) {
             logger.warn('Config with utilities is not loaded!');
             return '';
         }
-        if (id === this.inputFilePath) {
-            this.inputFileCache = content;
-            const sassConfig = this.extractUserSassConfig(content);
-            if (sassConfig) {
-                await this.loadUtils(sassConfig);
-            }
-        }
-        else if (content) {
-            this.utilsByFile.set(id, this.extractUtils(content));
-        }
-        else {
-            this.utilsByFile.delete(id);
+        if (this.utilsByFile.size === 0) {
+            logger.warn('No content to generate CSS was found!');
+            return '';
         }
-        return new Promise((resolve) => {
-            //eslint-disable-next-line
-            let timeout;
-            clearTimeout(this.generationDebounce);
-            this.generationDebounce = setTimeout(async () => {
-                clearTimeout(timeout);
-                const allUniqueUtils = [...new Set([...this.utilsByFile.values()].flat())];
-                const applyStr = `\n@include ${this.sassModuleName}.apply(${JSON.stringify(allUniqueUtils)},(),true);`;
-                // `compileStringAsync` is almost always faster than `compile` in sass-embedded
-                const css = await sass.compileStringAsync(this.inputFileCache + applyStr, { loadPaths: [this.inputFileDir, 'node_modules'] }).then(({ css }) => css, (e) => (logger.error('Sass compilation error.', e), undefined));
-                resolve(css);
-            }, 100);
-            timeout = setTimeout(() => resolve(undefined), 300);
-        });
+        const allUniqueUtils = [...new Set([...this.utilsByFile.values()].flat())];
+        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), ''));
     }
     extractUtils(content) {
-        const allClassNames = [];
-        const quotedClassNames = content
+        let fixedContent = content.replace(this.utilsRegexps.escapedQuotes, '');
+        const allClassNames = fixedContent
             .match(this.utilsRegexps.quotedContent)
-            //eslint-disable-next-line
-            ?.map(this.normalizeClassNameStr, this);
-        const singleQuotedClassNames = content
-            .replace(this.utilsRegexps.quotedContent, '')
+            ?.reduce(this.filterAndProcessClassStr, []) ?? [];
+        fixedContent = fixedContent.replace(this.utilsRegexps.quotedContent, '');
+        fixedContent
             .match(this.utilsRegexps.singleQuotedContent)
-            //eslint-disable-next-line
-            ?.map(this.normalizeClassNameStr, this);
-        for (const item of [quotedClassNames, singleQuotedClassNames]) {
-            if (item instanceof Array) {
-                allClassNames.push(...item);
-            }
-        }
+            ?.reduce(this.filterAndProcessClassStr, allClassNames);
+        fixedContent
+            .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)));
                 if (utility) {
@@ -95,9 +91,12 @@ export class JitEngine {
                 return acc;
             }, new Set())];
     }
-    normalizeClassNameStr(str) {
-        return str.replace(this.utilsRegexps.tooMoreSpaces, ' ').slice(1, -1);
-    }
+    filterAndProcessClassStr = (acc, str) => {
+        if (this.utilsRegexps.uppercaseLetter.test(str)) {
+            acc.push(str.replace(this.utilsRegexps.tooMoreSpaces, ' ').slice(1, -1));
+        }
+        return acc;
+    };
     extractUserSassConfig(content) {
         let matchResult = content.match(this.configRegexps.userSettings);
         if (matchResult != null) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/core",
-	"version": "1.0.0",
+	"version": "2.0.1",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",
@@ -27,10 +27,10 @@
 		"url": "https://github.com/mr150/mlut/issues"
 	},
 	"exports": {
-    ".": {
-      "default": "./dist/index.js"
-    }
-  },
+		".": {
+			"default": "./dist/index.js"
+		}
+	},
 	"scripts": {
 		"build": "rm -rf dist && tsc && cp src/sass dist/ -r"
 	},
@@ -43,6 +43,6 @@
 		"@types/node": "^20.10.5",
 		"sass-embedded": "^1.71.0",
 		"sass": "^1.71.0",
-		"typescript": "^5.3.3"
+		"typescript": "^4.8.0"
 	}
 }