postcss-nesting : better handling of nested selectors that begin with a letter (#861)

* postcss-nesting : better handling of nested selectors that begin with a letter

* Update plugins/postcss-nesting/CHANGELOG.md

* Update CHANGELOG.md

* fix typo

Author: romainmenke

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to PostCSS Nesting
 
+### Unreleased (patch)
+
+- Skip nested rules that have a selector that begins with a letter
+- Better warning when nested rules have a selector that begins with a letter
+
 ### 11.2.0 (February 13, 2023)
 
 - Added: support for `&` at the root

plugins/postcss-nesting/dist/index.cjs

@@ -29,7 +29,8 @@ export default function mergeSelectors(node: Node, postcssResult: Result, fromSe
 
 			if (!fromAtNest) {
 				if (x === 0 && toSelectorAST.nodes?.[0]?.nodes?.[0]?.type === 'tag') {
-					node.warn(postcssResult, `Nested selectors must start with a symbol : "${toSelectors[x]}"`);
+					node.warn(postcssResult, `Nested selectors must start with a symbol and "${toSelectors[x]}" begins with a letter.`);
+					return [];
 				}
 			}
 

plugins/postcss-nesting/dist/index.mjs

@@ -7,6 +7,19 @@ import { walkFunc } from './walk-func.js';
 import { options } from './options.js';
 
 export default function transformNestRuleWithinRule(node: AtRule, parent: Rule, result: Result, walk: walkFunc, opts: options) {
+	let selectors = [];
+
+	try {
+		selectors = mergeSelectors(node, result, parent.selectors, comma(node.params), opts, true);
+	} catch (err) {
+		node.warn(result, `Failed to parse selectors : "${parent.selector}" / "${node.params}" with message: "${err.message}"`);
+		return;
+	}
+
+	if (!selectors.length) {
+		return;
+	}
+
 	// move previous siblings and the node to before the parent
 	shiftNodesBeforeParent(node, parent);
 
@@ -15,12 +28,7 @@ export default function transformNestRuleWithinRule(node: AtRule, parent: Rule,
 	rule.raws.semicolon = true; /* nested rules end with "}" and do not have this flag set */
 
 	// update the selectors of the node to be merged with the parent
-	try {
-		rule.selectors = mergeSelectors(node, result, parent.selectors, comma(node.params), opts, true);
-	} catch (err) {
-		node.warn(result, `Failed to parse selectors : "${parent.selector}" / "${node.params}" with message: "${err.message}"`);
-		return;
-	}
+	rule.selectors = selectors;
 
 	// replace the node with the new rule
 	node.replaceWith(rule);

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

@@ -16,6 +16,10 @@ export default function transformRuleWithinRule(node: Rule, parent: Rule, result
 		return;
 	}
 
+	if (!selectors.length) {
+		return;
+	}
+
 	// Group all declarations after the first one.
 	groupDeclarations(parent);
 

plugins/postcss-nesting/src/lib/nest-rule-within-rule.ts

@@ -1,9 +1,9 @@
 a, b {
 	order: 1;
-}
-a c, b c, a d, b d {
+	c, d {
 		order: 2;
 	}
+}
 :scope e {
 	order: 3;
 }

plugins/postcss-nesting/src/lib/rule-within-rule.ts

@@ -1,9 +1,9 @@
 a, b {
 	order: 1;
-}
-a c, b c, a d, b d {
+	c, d {
 		order: 2;
 	}
+}
 :scope e {
 	order: 3;
 }

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

@@ -4,10 +4,10 @@
 	}
 }
 
-@nest &.child {
-	}
-
 .foo : bar {
+	@nest &.child {
+		order: 2;
+	}
 }
 
 .foo {
@@ -16,8 +16,8 @@
 	}
 }
 
-@nest &.child : bar {
-	}
-
 .foo {
+	@nest &.child : bar {
+		order: 4;
+	}
 }