Merge pull request #64 from mr150/fix/jit-issues

Fix/jit issues
mr150 · Jul 23, 2024 · 8d2f3ea · 8d2f3ea
2 parents 4abcbd7 + dfe03db
commit 8d2f3ea
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/core",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",

diff --git a/packages/core/src/jit/JitEngine.ts b/packages/core/src/jit/JitEngine.ts
@@ -21,10 +21,13 @@ export class JitEngine {
 		'@use "sass:map";\n @use "../sass/tools/settings" as ml;';
 	private readonly utilsByFile = new Map<string, string[]>();
 	private readonly 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]/,
 	};
 	private readonly configRegexps = {
 		userSettings: /@use ['"][^'"]*(tools|mlut|core)['"](\s*as\s+[\w]+)?\s+with\s*\(([^;]+)\);/s,
@@ -34,6 +37,10 @@ export class JitEngine {
 	async init(
 		[inputPath, inputContent]: [string | undefined, string | undefined] = ['', '']
 	) {
+		if (this.utils.size) {
+			return;
+		}
+
 		let sassConfig: string | undefined = this.defaultSassConfig;
 
 		if (inputPath && inputContent) {
@@ -92,24 +99,21 @@ export class JitEngine {
 	}
 
 	private extractUtils(content: string): string[] {
-		const allClassNames: string[] = [];
-
-		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);
+			?.reduce(this.filterAndProcessClassStr, []) ?? [];
+
+		fixedContent = fixedContent.replace(this.utilsRegexps.quotedContent, '');
 
-		const singleQuotedClassNames = content
-			.replace(this.utilsRegexps.quotedContent, '')
+		fixedContent
 			.match(this.utilsRegexps.singleQuotedContent)
-			//eslint-disable-next-line
-			?.map(this.normalizeClassNameStr, this);
+			?.reduce(this.filterAndProcessClassStr, allClassNames);
 
-		for (const item of [quotedClassNames, singleQuotedClassNames]) {
-			if (item instanceof Array) {
-				allClassNames.push(...item);
-			}
-		}
+		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) => (
@@ -128,9 +132,15 @@ export class JitEngine {
 		}, new Set<string>())];
 	}
 
-	private normalizeClassNameStr(str: string) {
-		return str.replace(this.utilsRegexps.tooMoreSpaces, ' ').slice(1, -1);
-	}
+	private filterAndProcessClassStr = (acc: string[], str: string) => {
+		if (this.utilsRegexps.uppercaseLetter.test(str)) {
+			acc.push(
+				str.replace(this.utilsRegexps.tooMoreSpaces, ' ').slice(1, -1)
+			);
+		}
+
+		return acc;
+	};
 
 	private extractUserSassConfig(content: string): string | undefined {
 		let matchResult = content.match(this.configRegexps.userSettings);

diff --git a/test/jit/JitEngine.test.ts b/test/jit/JitEngine.test.ts
@@ -32,6 +32,7 @@ describe('JitEngine', () => {
 @include testou.apply('C-ih');
 `;
 
+	/* eslint-disable */
 	const extractUtilsContent = `
 <div class="
 D-n
@@ -40,15 +41,17 @@ md_Gc-s1 Pb6u Ps Lol5    md_Mxh130vh Ps
 
 @:pfrm_-Try0 ^one_Bgc-$bgColor?#c06_h Ct-'id:';attr(id)_b
 ">
-Lorem Ipsum
+Lorem \`Ipsum\`
 </div>
 
-const wrapperCss = "M1u	 -Myvar12 Ps d-g";
+const myStr = "simpl'e text" + ' testou' + "" + "[email protected]";
+const wrapperCss = "M1u	 -Myvar12 \\"Ps\\" d-g";
 
-<MyComponent className={cn('D-f Gap5u', wrapperCss)}/>
-`;
+<MyComponent className={cn('D-f \\'Gap5u', wrapperCss)}/>
+` + "\n<button className={`D-ib ${flag ? 'Bgc-red' : ''}`}>Clear</div>";
+	/* eslint-enable */
 
-	it('extract utils from content', async () => {
+	it('extract utils from the content', async () => {
 		const jit = new JitEngine();
 		await jit.init();
 
@@ -69,14 +72,17 @@ const wrapperCss = "M1u	 -Myvar12 Ps d-g";
 				'M1u',
 				'-Myvar12',
 				'D-f',
-				'Gap5u'
+				'Gap5u',
+				'Bgc-red',
+				'D-ib',
 			],
 		);
 	});
 
 	it('generate CSS from the file', async () => {
 		const jit = new JitEngine();
 		await jit.init([sassInputPath, sassInputContent]);
+		await jit.init(['BROKEN/PATH', 'NONE']);
 
 		/* eslint-disable */
 		const cssOutput = `.C-ih {