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