Fix similar screens matching

packages/stylify/src/Compiler/CustomSelector.ts

@@ -59,7 +59,7 @@ export class CustomSelector {
 		};
 
 		processTree(rootSelector, this.tree);
-		console.log(selectors);
+
 		return selectors;
 	}
 

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();
 			}
 

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'
+	);
+});

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
+}
+}