Fix adding additional empty line between @media and children #19

Author: hudochenkov

CHANGELOG.md

@@ -2,6 +2,9 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.3.1
+* Fix adding additional empty line if both `empty-lines-between-children-rules` and `empty-lines-between-media-rules` are not 0. #19
+
 ## 1.3.0
 * Added `empty-lines-between-media-rules` option which set a number of empty lines between nested media rules. #16
 

index.js

@@ -181,20 +181,16 @@ function fetchAllCommentsAfterNode(comments, nextNode, node, currentInitialIndex
 	return fetchAllCommentsAfterNode(comments.concat(nextNode), nextNode.next(), node, nextNode.initialIndex);
 }
 
-function getApplicableNode(node) {
+function getApplicableNode(lookFor, node) {
 	// find if there any rules before, and skip the comments
 	var prevNode = node.prev();
 
-	if (prevNode.type === 'rule') {
-		return node;
-	}
-
-	if (prevNode.type === 'atrule') {
+	if (prevNode.type === lookFor) {
 		return node;
 	}
 
 	if (prevNode.type === 'comment') {
-		return getApplicableNode(prevNode);
+		return getApplicableNode(lookFor, prevNode);
 	}
 
 	return false;
@@ -286,7 +282,7 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
 						// Insert empty lines between children classes
 						if (node.type === 'rule' && linesBetweenChildrenRules > 0) {
 							// between rules can be comments, so empty lines should be added to first comment between rules, rather than to rule
-							applicableNode = getApplicableNode(node);
+							applicableNode = getApplicableNode('rule', node);
 
 							if (applicableNode) {
 								applicableNode.raws.before = createLineBreaks(linesBetweenChildrenRules) + applicableNode.raws.before;
@@ -296,7 +292,7 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
 						// Insert empty lines between media rules
 						if (node.type === 'atrule' && node.name === 'media' && linesBetweenMediaRules > 0) {
 							// between rules can be comments, so empty lines should be added to first comment between rules, rather than to rule
-							applicableNode = getApplicableNode(node);
+							applicableNode = getApplicableNode('atrule', node);
 
 							if (applicableNode) {
 								applicableNode.raws.before = createLineBreaks(linesBetweenMediaRules) + applicableNode.raws.before;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-sorting",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "PostCSS plugin to sort rules content with specified order.",
   "keywords": [
     "postcss",

test/fixtures/lines-between-rules-issue-19.css

@@ -0,0 +1,16 @@
+.color {
+	@mixin coloring;
+	color: white;
+	@media (--viewport-md) {
+		color: green;
+	}
+	@media (--viewport-lg) {
+		color: red;
+	}
+	span {
+		color: black;
+	}
+	span {
+		color: pink;
+	}
+}

test/fixtures/lines-between-rules-issue-19.expected.css

@@ -0,0 +1,21 @@
+.color {
+	@mixin coloring;
+
+	color: white;
+
+	@media (--viewport-md) {
+		color: green;
+	}
+
+	@media (--viewport-lg) {
+		color: red;
+	}
+
+	span {
+		color: black;
+	}
+
+	span {
+		color: pink;
+	}
+}

test/test.js

@@ -226,6 +226,19 @@ test('Should insert empty lines between @media rules in accordance with option \
 	});
 });
 
+test('Should not insert additional line between @media and children rules if they have empty lines inside group', t => {
+	return run(t, 'lines-between-rules-issue-19', {
+		"sort-order": [
+			["@mixin"],
+			["..."],
+			["@media"],
+			[">child"]
+		],
+		"empty-lines-between-children-rules": 1,
+		"empty-lines-between-media-rules": 1
+	});
+});
+
 // test('Should sort LESS files', t => {
 //     return run(t, 'less.less', {}, 'less');
 // });