postcss-nesting: fix pseudo's and allow ampersand everywhere

experimental/postcss-nesting/.tape.mjs

@@ -92,4 +92,7 @@ postcssTape(plugin)({
 	'relative-selectors': {
 		message: 'examples of relative selectors',
 	},
+	'ampersand-everywhere': {
+		message: 'allow & to be used everywhere',
+	}
 });

experimental/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changes to PostCSS Nesting Experimental
 
+### Unreleased
+
+- match Chrome's behavior for pseudo elements.
+- add support for `&` everywhere.
+
+```css
+.foo {
+  ::before {}
+}
+
+/* becomes */
+
+.foo ::before {}
+```
+
 ### 1.0.0 (October 29, 2022)
 
 Implement the 28 October version of [css-nestng-1](https://drafts.csswg.org/css-nesting/)

experimental/postcss-nesting/README.md

@@ -23,18 +23,27 @@ a, b {
 	}
 }
 
+& {
+	color: pink;
+}
+
+
 /* becomes */
 
 a, b {
 	color: red;
 }
 
 :is(a,b) c, :is(a,b) d {
-	color: white;
-}
+		color: white;
+	}
 
 :is(e) :is(a,b) {
-	color: yellow;
+		color: yellow;
+	}
+
+:scope {
+	color: pink;
 }
 ```
 

experimental/postcss-nesting/src/index.ts

@@ -1,11 +1,16 @@
 import type { PluginCreator } from 'postcss';
+import ampersandToScope from './lib/ampersand-to-scope.js';
 import walk from './lib/walk.js';
 
 const creator: PluginCreator<never> = () => {
 	return {
 		postcssPlugin: 'postcss-nesting',
 		Rule(rule, { result }) {
 			walk(rule, result);
+
+			if (rule.selector.trim().includes('&')) {
+				ampersandToScope(rule);
+			}
 		},
 	};
 };

experimental/postcss-nesting/src/lib/ampersand-to-scope.ts

@@ -0,0 +1,25 @@
+import type { Container, Node, Rule } from 'postcss';
+import parser from 'postcss-selector-parser';
+
+export default function ampersandToScope(rule: Rule) {
+	let parent: Container<Node> = rule.parent;
+
+	while (parent) {
+		if (parent.type === 'rule') {
+			return;
+		}
+
+		parent = parent.parent;
+	}
+
+	const selectorAST = parser().astSync(rule.selector);
+	if (!selectorAST) {
+		return;
+	}
+
+	selectorAST.walkNesting((nesting) => {
+		nesting.replaceWith(parser.pseudo({value: ':scope'}));
+	});
+
+	rule.selector = selectorAST.toString();
+}

experimental/postcss-nesting/src/lib/merge-selectors/merge-selectors.ts

@@ -31,12 +31,6 @@ export default function mergeSelectors(node: Node, postcssResult: Result, fromSe
 					return false;
 				}
 
-				// see : https://github.com/w3c/csswg-drafts/issues/7979
-				if (parser.isPseudoElement(maybeCombinator)) {
-					startsWithCombinator = true;
-					return false;
-				}
-
 				return false;
 			});
 

experimental/postcss-nesting/test/ampersand-everywhere.css

@@ -0,0 +1,28 @@
+& {
+	order: 1;
+}
+
+.foo & {
+	order: 2;
+}
+
+
+.foo:has(&, :not(&)) {
+	order: 3;
+}
+
+&& + & {
+	order: 4;
+}
+
+@media screen {
+	& {
+		order: 5;
+	}
+}
+
+@container (.foo) {
+	& {
+		order: 6;
+	}
+}

experimental/postcss-nesting/test/ampersand-everywhere.expect.css

@@ -0,0 +1,28 @@
+:scope {
+	order: 1;
+}
+
+.foo :scope {
+	order: 2;
+}
+
+
+.foo:has(:scope, :not(:scope)) {
+	order: 3;
+}
+
+:scope:scope + :scope {
+	order: 4;
+}
+
+@media screen {
+	:scope {
+		order: 5;
+	}
+}
+
+@container (.foo) {
+	:scope {
+		order: 6;
+	}
+}

experimental/postcss-nesting/test/examples/example.css

@@ -9,3 +9,7 @@ a, b {
 		color: yellow;
 	}
 }
+
+& {
+	color: pink;
+}

experimental/postcss-nesting/test/examples/example.expect.css

@@ -1,9 +1,15 @@
 a, b {
 	color: red;
 }
+
 :is(a,b) c, :is(a,b) d {
 		color: white;
 	}
+
 :is(e) :is(a,b) {
 		color: yellow;
 	}
+
+:scope {
+	color: pink;
+}

experimental/postcss-nesting/test/ignore.expect.css

@@ -6,7 +6,7 @@ a, b {
 		order: 2;
 	}
 
-& e {
+:scope e {
 	order: 3;
 }
 

experimental/postcss-nesting/test/relative-selectors.expect.css

@@ -19,7 +19,7 @@
 	}
 
 
-:is(.foo)::before {
+:is(.foo) ::before {
 		order: 5;
 	}
 
@@ -44,6 +44,6 @@
 	}
 
 
-:is(.foo)::before, :is(.foo) .other {
+:is(.foo) ::before, :is(.foo) .other {
 		order: 15;
 	}