Nested mixins' declarations should no longer be reordered when flattening nested rules

Author: pciarach

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Nesting
 
+### Unreleased (patch)
+
+- Fix reorder of declarations inside nested `@mixin` rules
+
 ### 12.0.3
 
 _February 19, 2024_

plugins/postcss-nesting/dist/index.cjs

@@ -1,5 +1,13 @@
 import type { ChildNode, Container } from 'postcss';
 
+function isMixinAtRule(node: ChildNode): boolean {
+	return node.type === 'atrule' && node.name.toLowerCase() === 'mixin';
+}
+
+function isNonMixinAtRule(node: ChildNode): boolean {
+	return node.type === 'atrule' && !isMixinAtRule(node);
+}
+
 export default function groupDeclarations(node: Container<ChildNode>) {
 	// https://drafts.csswg.org/css-nesting/#mixing
 	// When a style rule contains both declarations and nested style rules or nested conditional group rules,
@@ -24,13 +32,13 @@ export default function groupDeclarations(node: Container<ChildNode>) {
 			return;
 		}
 
-		if (child.type === 'atrule' && child.name.toLowerCase() === 'mixin') {
+		if (isMixinAtRule(child)) {
 			let prev = child.prev();
 			// We assume that
 			// - a mixin after declarations will resolve to more declarations
-			// - a mixin after rules or at-rules will resolve to more rules or at-rules
+			// - a mixin after rules or at-rules will resolve to more rules or at-rules (except after another mixin)
 			while (prev) {
-				if ((prev.type === 'rule' || prev.type === 'atrule')) {
+				if ((prev.type === 'rule' || (isNonMixinAtRule(prev)))) {
 					return;
 				}
 
@@ -50,7 +58,7 @@ export default function groupDeclarations(node: Container<ChildNode>) {
 
 		if (child.type === 'comment') {
 			const next = child.next();
-			if (next && (next.type === 'comment' || next.type === 'rule' || (next.type === 'atrule' && next.name.toLowerCase() !== 'mixin'))) {
+			if (next && (next.type === 'comment' || next.type === 'rule' || isNonMixinAtRule(next))) {
 				return;
 			}
 

plugins/postcss-nesting/dist/index.mjs

@@ -27,6 +27,25 @@ const mixinPluginDeclaration = () => {
 
 mixinPluginDeclaration.postcss = true;
 
+const mixinPluginNestedRules = () => {
+	return {
+		postcssPlugin: 'mixin',
+		AtRule: {
+			mixin(node, { postcss }) {
+				if (node.params === 'nestedMixins') {
+					node.replaceWith(postcss.parse('@mixin mixinWithDecl; @mixin mixinToOverride; &:disabled { color: white; }', {from : 'mixin.css'}));
+				} else if (node.params === 'mixinWithDecl') {
+					node.replaceWith(postcss.parse('color: blue;', {from : 'mixin.css'}));
+				} else if (node.params === 'mixinToOverride') {
+					node.replaceWith(postcss.parse('display: flex;', {from : 'mixin.css'}));
+				}
+			},
+		},
+	};
+};
+
+mixinPluginNestedRules.postcss = true;
+
 postcssTape(plugin)({
 	'basic': {
 		message: 'supports basic usage',
@@ -168,6 +187,14 @@ postcssTape(plugin)({
 			noIsPseudoSelector: true,
 		},
 	},
+	'mixin-nested-rules': {
+		message: 'supports mixin with nested rules',
+		plugins: [mixinPluginNestedRules(), plugin()],
+	},
+	'mixin-nested-rules-after-media': {
+		message: 'supports mixin with nested rules',
+		plugins: [mixinPluginNestedRules(), plugin()],
+	},
 	'spec-examples': {
 		message: 'supports all spec examples',
 	},

plugins/postcss-nesting/src/lib/group-declarations.ts

@@ -0,0 +1,10 @@
+a {
+	color: yellow;
+	display: inline-flex;
+
+	@media (min-width: 768px) {
+		color: red;
+	}
+
+	@mixin nestedMixins;
+}

plugins/postcss-nesting/test/_tape.mjs

@@ -0,0 +1,12 @@
+a {
+	color: yellow;
+	display: inline-flex;
+}
+@media (min-width: 768px) {
+	a {
+		color: red;
+}
+	}
+a {color: blue;display: flex;
+}
+a:disabled { color: white; }

plugins/postcss-nesting/test/mixin-nested-rules-after-media.css

@@ -0,0 +1,8 @@
+a {
+	color: yellow;
+
+	& b {
+		@mixin nestedMixins;
+		display: inline-flex;
+	}
+}

plugins/postcss-nesting/test/mixin-nested-rules-after-media.expect.css

@@ -0,0 +1,7 @@
+a {
+	color: yellow;
+}
+a b {color: blue;display: flex;
+		display: inline-flex;
+	}
+a b:disabled { color: white; }