Merge pull request #173 from stylify/fixes4

Fixes4
stylify · Jan 18, 2023 · 54074f1 · 54074f1
2 parents 1bea29b + b646e54
commit 54074f1
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/packages/stylify/src/Compiler/CustomSelector.ts b/packages/stylify/src/Compiler/CustomSelector.ts
@@ -84,19 +84,19 @@ export class CustomSelector {
 					if (!nestedTreeSelector) {
 						throw new Error(`Selector levels cannot be created without selector. Processing "${content}".`);
 					}
-					actualTree.selectors += tokenQueue.replace(nestedTreeSelector[0], '').trim();
+					actualTree.selectors += tokenQueue.replace(nestedTreeSelector[0], '');
 					tokenQueue = '';
 					actualTree.children[nestedTreeSelector[1].trim()] = parseContent(content, createTree());
 
 				} else if (character === '}') {
-					actualTree.selectors += tokenQueue.trim();
+					actualTree.selectors += tokenQueue;
 					break;
 
 				} else {
 					tokenQueue += character;
 
 					if (contentIterator === contentlength) {
-						actualTree.selectors += tokenQueue.trim();
+						actualTree.selectors += tokenQueue;
 						tokenQueue = '';
 						break;
 					}

diff --git a/packages/stylify/tests/jest/custom-selectors.test.ts b/packages/stylify/tests/jest/custom-selectors.test.ts
@@ -1,19 +1,23 @@
 import TestUtils from '../../../../tests/TestUtils';
-import { Compiler } from '../../src';
+import { Compiler, minifiedSelectorGenerator } from '../../src';
 
 const testName = 'custom-selectors';
 const testUtils = new TestUtils('stylify', testName);
 
-const customSelectorsSet = {
-	'*': 'box-sizing:border-box',
-	'body': 'font-size:16px',
-	'article h1': 'font-size:16px',
-	'::selection': 'color:#fff',
-	a: 'hover:color:red',
-	'h2:hover': 'color:green'
-}
+beforeEach(() => {
+	minifiedSelectorGenerator.processedSelectors = {};
+});
 
 test('Custom selectors - only set', (): void => {
+	const customSelectorsSet = {
+		'*': 'box-sizing:border-box',
+		'body': 'font-size:16px',
+		'article h1': 'font-size:16px',
+		'::selection': 'color:#fff',
+		a: 'hover:color:red',
+		'h2:hover': 'color:green'
+	};
+
 	const compiler = new Compiler({
 		dev: true,
 		customSelectors: customSelectorsSet
@@ -23,3 +27,32 @@ test('Custom selectors - only set', (): void => {
 
 	testUtils.testCssFileToBe(compilationResult.generateCss());
 });
+
+test('Random order', (): void => {
+	const compiler = new Compiler({
+		dev: true,
+		components: {
+			'btn:(\\S+)': ({matches}) => {
+				const types = {
+					'orange': `
+						color:#fff
+						&:focus { background:darkorange }
+						font-size:16px
+					`
+				};
+
+				const typeUtilities = types[matches[1]] ?? undefined;
+
+				if (typeof typeUtilities === 'undefined') {
+					throw new Error(`Button type "${matches[1]}" not found.`);
+				}
+
+				return typeUtilities;
+			}
+		}
+	});
+
+	let compilationResult = compiler.compile('btn:orange', undefined, false);
+
+	testUtils.testCssFileToBe(compilationResult.generateCss(), 'random-order');
+});
diff --git a/packages/stylify/tests/jest/custom-selectors/expected/random-order.css b/packages/stylify/tests/jest/custom-selectors/expected/random-order.css
@@ -0,0 +1,9 @@
+.btn\:orange{
+	color: #fff
+}
+.btn\:orange{
+	font-size: 16px
+}
+.btn\:orange:focus{
+	background: darkorange
+}
diff --git a/packages/stylify/tests/jest/selectors-mangling.test.ts b/packages/stylify/tests/jest/selectors-mangling.test.ts
@@ -1,14 +1,19 @@
 import TestUtils from '../../../../tests/TestUtils';
-import { Compiler } from '../../src';
+import { Compiler, minifiedSelectorGenerator } from '../../src';
 
 const testName = 'selectors-mangling';
 const testUtils = new TestUtils('stylify', testName);
 
+beforeEach(() => {
+	minifiedSelectorGenerator.processedSelectors = {};
+});
+
 /**
  * This test is here, because dollars were removed when content was mangled. It is becuase $$ is replaced by $
  * and it broke some of the functionality in some codes when mangled.
  */
-/* test('Mangle with special characters - dollars should stay as they are and non should removed.', (): void => {
+
+test('Mangle with special characters - dollars should stay as they are and non should removed.', (): void => {
 	const fileName = 'mangle-with-special-characters';
  	const inputContent = testUtils.getHtmlInputFile(fileName);
 
@@ -23,7 +28,7 @@ const testUtils = new TestUtils('stylify', testName);
 });
 
 test('Mangle single letter macros', (): void => {
-	const fileName = 'mangle-single-letters-macros';
+	const fileName = 'mangle-single-letter-macros';
 	const inputContent = testUtils.getHtmlInputFile(fileName);
 
 	const compiler = new Compiler({
@@ -42,16 +47,16 @@ test('Mangle single letter macros', (): void => {
 });
 
 test('Duplicate selectors', (): void => {
-	const fileName = 'mangle-single-letters-macros';
+	const fileName = 'mangle-duplicate-selectors';
 	const inputContent = testUtils.getHtmlInputFile(fileName);
 
-	const compiler = new Compiler({ mangleSelectors: true, dev:true });
+	const compiler = new Compiler({ mangleSelectors: true });
 	let compilationResult = compiler.compile(inputContent);
 
 	testUtils.testCssFileToBe(compilationResult.generateCss(), fileName);
 	testUtils.testHtmlFileToBe(compiler.rewriteSelectors(inputContent), fileName);
 });
- */
+
 test('Component selector similar to custom selector', (): void => {
 	const fileName = 'components-and-custom-selectors-collision';
 	const inputContent = testUtils.getHtmlInputFile(fileName);