diff --git a/packages/stylify/src/Compiler/CustomSelector.ts b/packages/stylify/src/Compiler/CustomSelector.ts index 653c1c62..213690b6 100644 --- a/packages/stylify/src/Compiler/CustomSelector.ts +++ b/packages/stylify/src/Compiler/CustomSelector.ts @@ -32,7 +32,7 @@ export class CustomSelector { continue; } - selectors[selectorToAdd] = selectorsOrChildren; + selectors[selectorToAdd] = [selectors[selectorToAdd] ?? '', selectorsOrChildren].join(' '); continue; } @@ -59,7 +59,7 @@ export class CustomSelector { }; processTree(rootSelector, this.tree); - + console.log(selectors); return selectors; } @@ -72,7 +72,10 @@ export class CustomSelector { let contentIterator = 0; const contentlength = content.length; - const parseContent = (content: string, actualTree: CustomSelectorTreeItemInterface): any => { + const parseContent = ( + content: string, + actualTree: CustomSelectorTreeItemInterface + ): CustomSelectorTreeItemInterface => { let tokenQueue = ''; while (contentIterator < contentlength) { diff --git a/packages/stylify/tests/jest/custom-selectors.test.ts b/packages/stylify/tests/jest/custom-selectors.test.ts index 5243bdc3..34164e6b 100644 --- a/packages/stylify/tests/jest/custom-selectors.test.ts +++ b/packages/stylify/tests/jest/custom-selectors.test.ts @@ -9,7 +9,7 @@ beforeEach(() => { }); test('Custom selectors - only set', (): void => { - const customSelectorsSet = { + const customSelectors = { '*': 'box-sizing:border-box', 'body': 'font-size:16px', 'article h1': 'font-size:16px', @@ -20,7 +20,7 @@ test('Custom selectors - only set', (): void => { const compiler = new Compiler({ dev: true, - customSelectors: customSelectorsSet + customSelectors }); let compilationResult = compiler.compile(testUtils.getHtmlInputFile()); @@ -56,3 +56,27 @@ test('Random order', (): void => { testUtils.testCssFileToBe(compilationResult.generateCss(), 'random-order'); }); + +test('Duplicate definition', (): void => { + const customSelectors = { + 'article': ` + h1, h2 { + color:blue + span { margin:24px } + } + h2 { + font-size:24px + span { font-weight:bold } + } + ` + }; + + const compiler = new Compiler({ + dev: true, + customSelectors + }); + + let compilationResult = compiler.compile('
'); + + testUtils.testCssFileToBe(compilationResult.generateCss(), 'duplicate-definition'); +}); diff --git a/packages/stylify/tests/jest/custom-selectors/expected/duplicate-definition.css b/packages/stylify/tests/jest/custom-selectors/expected/duplicate-definition.css new file mode 100644 index 00000000..837870dd --- /dev/null +++ b/packages/stylify/tests/jest/custom-selectors/expected/duplicate-definition.css @@ -0,0 +1,14 @@ +article h1, +article h2{ + color: blue +} +article h1 span, +article h2 span{ + margin: 24px +} +article h2{ + font-size: 24px +} +article h2 span{ + font-weight: bold +}