Fix duplicate custom selector definition

stylify · Jan 18, 2023 · 1d066fb · 1d066fb
1 parent e6831e6
commit 1d066fb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git 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
@@ -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('<article></article>');
+
+	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
@@ -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
+}