postcss-nesting : fix #285 (#288)

* postcss-nesting : fix #285

* add changelog

* typo

Author: romainmenke

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changes to PostCSS Nesting
 
+### Unreleased (patch)
+
+- Avoid creating duplicate selectors containing only comments.
+
+```diff
+.alpha {
+	/* loose comment */
+	& .beta {
+		order: 1;
+	}
+}
+
+/* becomes */
+
+- .alpha {
+-   /* loose comment */
+- }
++ /* loose comment */
+.alpha .beta {
+	order: 1;
+}
+```
+
 ### 10.1.2 (January 12, 2022)
 
 - Improved : selector specificity calculation

plugins/postcss-nesting/src/lib/cleanup-parent.js

@@ -1,5 +1,11 @@
 export default function cleanupParent(parent) {
 	if (!parent.nodes.length) {
 		parent.remove();
+		return;
+	}
+
+	const commentNodes = parent.nodes.filter(node => node.type === 'comment');
+	if (commentNodes.length === parent.nodes.length) {
+		parent.replaceWith(...commentNodes);
 	}
 }

plugins/postcss-nesting/src/lib/shift-nodes-before-parent.js

@@ -1,10 +1,13 @@
+import cleanupParent from './cleanup-parent';
+
 export default function shiftNodesBeforeParent(node) {
 	const parent = node.parent;
 	const index = parent.index(node);
 
 	// conditionally move previous siblings into a clone of the parent
 	if (index) {
-		parent.cloneBefore().removeAll().append(parent.nodes.slice(0, index));
+		const newParent = parent.cloneBefore().removeAll().append(parent.nodes.slice(0, index));
+		cleanupParent(newParent);
 	}
 
 	// move the current node before the parent (and after the conditional clone)

plugins/postcss-nesting/test/basic.css

@@ -115,3 +115,31 @@ a {
 		order: 51;
 	}
 }
+
+/* leading : root */
+.comments {
+	/* leading : 1 */
+	order: 1;
+	/* trailing: 2 */
+
+	& .comment {
+		order: 2;
+	}
+
+	/* loose comment */
+	& .comment {
+		order: 3;
+	}
+
+	/* leading : 4 */
+	order: 4;
+	/* trailing: 5 */
+
+	& .comment {
+		/* nested deeper */
+
+		& .comment {
+			order: 5;
+		}
+	}
+}

plugins/postcss-nesting/test/basic.expect.css

@@ -128,3 +128,27 @@ a b[a="a&b"] {
 .a:hover::before, .b:focus::before, .a:hover::after, .b:focus::after {
 		order: 51;
 	}
+
+/* leading : root */
+.comments {
+	/* leading : 1 */
+	order: 1
+	/* trailing: 2 */
+}
+.comments .comment {
+		order: 2;
+	}
+/* loose comment */
+.comments .comment {
+		order: 3;
+	}
+.comments {
+
+	/* leading : 4 */
+	order: 4
+	/* trailing: 5 */
+}
+/* nested deeper */
+.comments .comment .comment {
+			order: 5;
+		}

plugins/postcss-nesting/test/basic.no-is-pseudo-selector.expect.css

@@ -128,3 +128,27 @@ a b[a="a&b"] {
 .a:hover::before, .b:focus::before, .a:hover::after, .b:focus::after {
 		order: 51;
 	}
+
+/* leading : root */
+.comments {
+	/* leading : 1 */
+	order: 1
+	/* trailing: 2 */
+}
+.comments .comment {
+		order: 2;
+	}
+/* loose comment */
+.comments .comment {
+		order: 3;
+	}
+.comments {
+
+	/* leading : 4 */
+	order: 4
+	/* trailing: 5 */
+}
+/* nested deeper */
+.comments .comment .comment {
+			order: 5;
+		}

plugins/postcss-nesting/test/spec-examples.expect.css

@@ -390,7 +390,4 @@ article.foo {
 		color: yellow;
 	}
 
-article {
-
-	/* valid! */
-	}
+/* valid! */

plugins/postcss-nesting/test/spec-examples.no-is-pseudo-selector.expect.css

@@ -390,7 +390,4 @@ article.foo {
 		color: yellow;
 	}
 
-article {
-
-	/* valid! */
-	}
+/* valid! */