postcss-nesting: nested conditionals (#1368)

Author: romainmenke

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changes to PostCSS Nesting
 
+### Unreleased (patch)
+
+- Edition `2024-02`:
+  - Do not rewrite selectors for declarations in conditional rules to a form with `:is()`
+
+This will work:
+```css
+::before, ::after {
+	color: blue;
+
+	@media screen { color: cyan; }
+}
+```
+
+This still **wont** work:
+```css
+::before, ::after {
+	color: blue;
+
+	&:hover { color: cyan; }
+}
+```
+
 ### 12.1.1
 
 _March 31, 2024_

plugins/postcss-nesting/dist/index.cjs

@@ -1,7 +1,6 @@
 import type { AtRule, Result, Rule } from 'postcss';
 import type { walkFunc } from './walk-func.js';
 import cleanupParent from '../../shared/lib/cleanup-parent.js';
-import mergeSelectors from './merge-selectors.js';
 import shiftNodesBeforeParent from '../../shared/lib/shift-nodes-before-parent.js';
 import validAtrules from '../../shared/lib/valid-atrules.js';
 
@@ -13,13 +12,6 @@ export default function atruleWithinRule(node: AtRule, parent: Rule, result: Res
 	if (node.nodes) {
 		const rule = parent.clone().removeAll().append(node.nodes);
 
-		const selectors = mergeSelectors(node, '&', parent.selector, result);
-		if (!selectors) {
-			return;
-		}
-
-		rule.selector = selectors;
-
 		// append the new rule to the node
 		node.append(rule);
 

plugins/postcss-nesting/dist/index.mjs

@@ -11,7 +11,7 @@ a {
 }
 		}
 			@media (max-width: 200px) {
-		:is(a b) {
+		a b {
 				order: 4;
 		}
 			}
@@ -39,7 +39,7 @@ a {
 }
 		}
 			@media (max-width: 200px) {
-		:is(a b) {
+		a b {
 				order: 4;
 		}
 			}
@@ -57,14 +57,14 @@ a {
 
 @media screen {
 
-:is(a,.a) {
+a, .a {
 		order: 7;
 }
 	}
 
 @media screen {
 
-:is(a,a::after) {
+a, a::after {
 		order: 8;
 }
 	}

plugins/postcss-nesting/src/editions/2024-02/lib/atrule-within-rule.ts

@@ -377,10 +377,6 @@ article {
 		color: blue;
 	}
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 }
 
@@ -391,10 +387,6 @@ article {
 		color: blue;
 	}
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 
 	&.foo {
@@ -403,3 +395,19 @@ article {
 
 	/* valid! */
 }
+
+::after, .foo {
+	color: green;
+
+	& {
+		color: blue;
+	}
+
+	color: red;
+
+	@media screen {
+		color: purple;
+	}
+
+	color: orange;
+}

plugins/postcss-nesting/test/media.edition-2024-02.expect.css

@@ -353,10 +353,6 @@ article {
 article {
 		color: blue;
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 	}
 
@@ -367,10 +363,6 @@ article {
 article {
 		color: blue;
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 	}
 
@@ -379,3 +371,28 @@ article.foo {
 	}
 
 /* valid! */
+
+::after, .foo {
+	color: green;
+}
+
+:is(::after,.foo) {
+		color: blue;
+	}
+
+::after, .foo {
+
+	color: red;
+}
+
+@media screen {
+
+::after, .foo {
+		color: purple;
+}
+	}
+
+::after, .foo {
+
+	color: orange;
+}

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

@@ -358,10 +358,6 @@ __bar.foo {
 article {
 	color: green;
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 }
 article {
@@ -371,10 +367,6 @@ article {
 article {
 	color: green;
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 }
 
@@ -387,3 +379,22 @@ article.foo {
 	}
 
 /* valid! */
+
+::after, .foo {
+	color: green;
+
+	color: red;
+
+	color: orange;
+}
+
+:is(::after,.foo) {
+		color: blue;
+	}
+
+@media screen {
+
+::after, .foo {
+		color: purple;
+}
+	}

plugins/postcss-nesting/test/spec-examples.edition-2024-02.expect.css

@@ -358,10 +358,6 @@ __bar.foo {
 article {
 	color: green;
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 }
 article {
@@ -371,10 +367,6 @@ article {
 article {
 	color: green;
 
-	/*
-		NOTE : We are more forgiving than the spec
-		This declaration is preserved
-	*/
 	color: red;
 }
 
@@ -387,3 +379,22 @@ article.foo {
 	}
 
 /* valid! */
+
+::after, .foo {
+	color: green;
+
+	color: red;
+
+	color: orange;
+}
+
+::after, .foo {
+		color: blue;
+	}
+
+@media screen {
+
+::after, .foo {
+		color: purple;
+	}
+	}