From 9a8e8d96e10d3dc8f19a621a54e741ab55869656 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr?= <8machy@seznam.cz>
Date: Thu, 19 Jan 2023 16:14:48 +0000
Subject: [PATCH] Fix similar screens matching

---
 .../stylify/src/Compiler/CustomSelector.ts    |  2 +-
 packages/stylify/src/Compiler/MacroMatch.ts   | 49 +++++++++++++------
 .../tests/jest/dynamic-screens.test.ts        | 13 -----
 packages/stylify/tests/jest/screens.test.ts   | 33 +++++++++++++
 .../expected/index.css                        |  0
 .../jest/screens/expected/similar-screens.css | 11 +++++
 .../input/index.html                          |  0
 7 files changed, 79 insertions(+), 29 deletions(-)
 delete mode 100644 packages/stylify/tests/jest/dynamic-screens.test.ts
 create mode 100644 packages/stylify/tests/jest/screens.test.ts
 rename packages/stylify/tests/jest/{dynamic-screens => screens}/expected/index.css (100%)
 create mode 100644 packages/stylify/tests/jest/screens/expected/similar-screens.css
 rename packages/stylify/tests/jest/{dynamic-screens => screens}/input/index.html (100%)

diff --git a/packages/stylify/src/Compiler/CustomSelector.ts b/packages/stylify/src/Compiler/CustomSelector.ts
index 213690b6..980ee3b9 100644
--- a/packages/stylify/src/Compiler/CustomSelector.ts
+++ b/packages/stylify/src/Compiler/CustomSelector.ts
@@ -59,7 +59,7 @@ export class CustomSelector {
 		};
 
 		processTree(rootSelector, this.tree);
-		console.log(selectors);
+
 		return selectors;
 	}
 
diff --git a/packages/stylify/src/Compiler/MacroMatch.ts b/packages/stylify/src/Compiler/MacroMatch.ts
index 2a0b3086..de0d600c 100755
--- a/packages/stylify/src/Compiler/MacroMatch.ts
+++ b/packages/stylify/src/Compiler/MacroMatch.ts
@@ -30,32 +30,51 @@ export class MacroMatch {
 
 		if (this.screenAndPseudoClassesMatch) {
 			const screenAndPseudoClassesMatchArray = this.screenAndPseudoClassesMatch.split(':');
-			let possibleScreenMatch = screenAndPseudoClassesMatchArray[0]
-				.replace(/&&/ig, ' and ')
-				.replace(/\|\|/ig, ', ');
+			const operators: string[] = [];
+			const possibleScreenMatchItems = screenAndPseudoClassesMatchArray[0]
+				.replace(/&&/ig, () => {
+					operators.push(' and ');
+					return '__OPERATOR__';
+				})
+				.replace(/\|\|/ig, () => {
+					operators.push(', ');
+					return '__OPERATOR__';
+				})
+				.split('__OPERATOR__');
 
 			let screenMatched = false;
+			let possibleScreenMatchString = '';
 
-			for (const key in screens) {
-				const screenRegExp = new RegExp('\\b' + key, 'g');
-				const screenMatches = screenRegExp.exec(possibleScreenMatch);
+			possibleScreenMatchItems.forEach((possibleScreenMatch) => {
+				for (const key in screens) {
+					const screenRegExp = new RegExp(`\\b${key}$`, 'g');
+					const screenMatches = screenRegExp.exec(possibleScreenMatch);
 
-				if (screenMatches === null) {
-					continue;
+					if (screenMatches === null) {
+						continue;
+					}
+
+					let screenData = screens[key];
+
+					if (typeof screenData === 'function') {
+						screenData = screenData(screenMatches[0]);
+					}
+
+					possibleScreenMatch = possibleScreenMatch.replace(screenRegExp, screenData);
+					screenMatched = true;
 				}
 
-				let screenData = screens[key];
+				const operator = operators[0] ?? '';
 
-				if (typeof screenData === 'function') {
-					screenData = screenData(screenMatches[0]);
+				if (operator) {
+					operators.shift();
 				}
 
-				possibleScreenMatch = possibleScreenMatch.replace(screenRegExp, screenData);
-				screenMatched = true;
-			}
+				possibleScreenMatchString += `${possibleScreenMatch}${operator}`;
+			});
 
 			if (screenMatched) {
-				this.screen = possibleScreenMatch;
+				this.screen = possibleScreenMatchString;
 				screenAndPseudoClassesMatchArray.shift();
 			}
 
diff --git a/packages/stylify/tests/jest/dynamic-screens.test.ts b/packages/stylify/tests/jest/dynamic-screens.test.ts
deleted file mode 100644
index 7a3c0516..00000000
--- a/packages/stylify/tests/jest/dynamic-screens.test.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import TestUtils from '../../../../tests/TestUtils';
-import { Compiler } from '../../src';
-
-const testName = 'dynamic-screens';
-const testUtils = new TestUtils('stylify', testName);
-const inputIndex = testUtils.getHtmlInputFile();
-
-const compiler = new Compiler({ dev: true });
-let compilationResult = compiler.compile(inputIndex);
-
-test('Dynamic screens', (): void => {
-	testUtils.testCssFileToBe(compilationResult.generateCss());
-});
diff --git a/packages/stylify/tests/jest/screens.test.ts b/packages/stylify/tests/jest/screens.test.ts
new file mode 100644
index 00000000..1a5de68b
--- /dev/null
+++ b/packages/stylify/tests/jest/screens.test.ts
@@ -0,0 +1,33 @@
+import TestUtils from '../../../../tests/TestUtils';
+import { Compiler, minifiedSelectorGenerator } from '../../src';
+
+const testName = 'screens';
+const testUtils = new TestUtils('stylify', testName);
+
+beforeEach(() => {
+	minifiedSelectorGenerator.processedSelectors = {};
+});
+
+/* test('Dynamic screens', (): void => {
+	const inputIndex = testUtils.getHtmlInputFile();
+
+	const compiler = new Compiler({ dev: true });
+	let compilationResult = compiler.compile(inputIndex);
+
+	testUtils.testCssFileToBe(compilationResult.generateCss());
+}); */
+
+test('Similar screens', (): void => {
+	const compiler = new Compiler({
+		dev: true,
+		screens: {
+			'tablet': '(min-width: 123px)',
+			'tablet-deprecated': '(min-width: 345px)'
+		}
+	});
+
+	testUtils.testCssFileToBe(
+		compiler.compile('tablet:color:blue tablet-deprecated:color:red', undefined, false).generateCss(),
+		'similar-screens'
+	);
+});
diff --git a/packages/stylify/tests/jest/dynamic-screens/expected/index.css b/packages/stylify/tests/jest/screens/expected/index.css
similarity index 100%
rename from packages/stylify/tests/jest/dynamic-screens/expected/index.css
rename to packages/stylify/tests/jest/screens/expected/index.css
diff --git a/packages/stylify/tests/jest/screens/expected/similar-screens.css b/packages/stylify/tests/jest/screens/expected/similar-screens.css
new file mode 100644
index 00000000..b286841d
--- /dev/null
+++ b/packages/stylify/tests/jest/screens/expected/similar-screens.css
@@ -0,0 +1,11 @@
+@media (min-width: 123px) {
+.tablet\:color\:blue{
+	color: blue
+}
+}
+
+@media (min-width: 345px) {
+.tablet-deprecated\:color\:red{
+	color: red
+}
+}
diff --git a/packages/stylify/tests/jest/dynamic-screens/input/index.html b/packages/stylify/tests/jest/screens/input/index.html
similarity index 100%
rename from packages/stylify/tests/jest/dynamic-screens/input/index.html
rename to packages/stylify/tests/jest/screens/input/index.html