From 60da3d7c2b7efff62a383f9908ea15b670134a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr?= <8machy@seznam.cz> Date: Wed, 18 Jan 2023 13:22:27 +0000 Subject: [PATCH 1/2] Fixed random custom selectors order bug --- .../stylify/src/Compiler/CustomSelector.ts | 6 +-- .../tests/jest/custom-selectors.test.ts | 51 +++++++++++++++---- .../expected/random-order.css | 9 ++++ 3 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 packages/stylify/tests/jest/custom-selectors/expected/random-order.css diff --git a/packages/stylify/src/Compiler/CustomSelector.ts b/packages/stylify/src/Compiler/CustomSelector.ts index 7719469c..653c1c62 100644 --- 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 index 22dfa069..5243bdc3 100644 --- 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 new file mode 100644 index 00000000..df9aa173 --- /dev/null +++ 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 +} From b646e54bebdd6d4c15a3c238eeb63f0da63c2225 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vladim=C3=ADr?= <8machy@seznam.cz> Date: Wed, 18 Jan 2023 13:22:39 +0000 Subject: [PATCH 2/2] Remove comment from tests --- .../tests/jest/selectors-mangling.test.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/stylify/tests/jest/selectors-mangling.test.ts b/packages/stylify/tests/jest/selectors-mangling.test.ts index 5f39ce36..eb5fb880 100644 --- 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);