Add empty-lines-between-media-rules option #16

Author: hudochenkov

README.md

@@ -26,7 +26,8 @@ $ npm install postcss-sorting
 ```json
 {
 	"sort-order": "default",
-	"empty-lines-between-children-rules": 0
+	"empty-lines-between-children-rules": 0,
+	"empty-lines-between-media-rules": 0
 }
 ```
 
@@ -248,7 +249,7 @@ Example: `{ "sort-order": "zen" }`
 
 ### `empty-lines-between-children-rules`
 
-Set a number of empty lines between nested children rules. By default there is no empty lines between '>child' rules.
+Set a number of empty lines between nested children rules. By default there is no empty lines between `>child` rules.
 
 Acceptable value: `{Number}` of empty lines
 
@@ -290,6 +291,34 @@ Example: `{ "empty-lines-between-children-rules": 1, "sort-order": [ ["..."], ["
 }
 ```
 
+### `empty-lines-between-media-rules`
+
+Set a number of empty lines between nested media rules. By default there is no empty lines between `@media` rules.
+
+Acceptable value: `{Number}` of empty lines
+
+Example: `{ "empty-lines-between-media-rules": 1, "sort-order": ["@media"] }`
+
+```scss
+/* before */
+.block {
+	@media (min-width: 1px) {}
+
+
+	@media (min-width: 2px) {}
+	@media (min-width: 3px) {}
+}
+
+/* after */
+.block {
+	@media (min-width: 1px) {}
+
+	@media (min-width: 2px) {}
+
+	@media (min-width: 3px) {}
+}
+```
+
 ## Usage
 
 See [PostCSS] docs for examples for your environment.

index.js

@@ -9,6 +9,7 @@ function verifyOptions(options) {
 
 	options['sort-order'] = options['sort-order'] || 'default';
 	options['empty-lines-between-children-rules'] = options['empty-lines-between-children-rules'] || 0;
+	options['empty-lines-between-media-rules'] = options['empty-lines-between-media-rules'] || 0;
 
 	return options;
 }
@@ -48,11 +49,11 @@ function getSortOrderFromOptions(options) {
 	return order;
 }
 
-function getLinesBetweenChildrenFromOptions(options) {
-	var lines = options['empty-lines-between-children-rules'];
+function getLinesBetweenRulesFromOptions(name, options) {
+	var lines = options['empty-lines-between-' + name + '-rules'];
 
 	if (typeof lines !== 'number' || isNaN(lines) || !isFinite(lines) || lines < 0 || Math.floor(lines) !== lines) {
-		throw new Error('Type of "empty-lines-between-children-rules" option must be integer with positive value.');
+		throw new Error('Type of "empty-lines-between-' + name + '-rules" option must be integer with positive value.');
 	}
 
 	return lines;
@@ -188,6 +189,10 @@ function getApplicableNode(node) {
 		return node;
 	}
 
+	if (prevNode.type === 'atrule') {
+		return node;
+	}
+
 	if (prevNode.type === 'comment') {
 		return getApplicableNode(prevNode);
 	}
@@ -201,7 +206,8 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
 
 	return function (css) {
 		var order = getSortOrderFromOptions(opts);
-		var linesBetweenChildrenRules = getLinesBetweenChildrenFromOptions(opts);
+		var linesBetweenChildrenRules = getLinesBetweenRulesFromOptions('children', opts);
+		var linesBetweenMediaRules = getLinesBetweenRulesFromOptions('media', opts);
 
 		css.walk(function (rule) {
 			// Process only rules and atrules with nodes
@@ -275,15 +281,27 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
 							node.raws.before = createLineBreaks(1) + node.raws.before;
 						}
 
+						var applicableNode;
+
 						// Insert empty lines between children classes
 						if (node.type === 'rule' && linesBetweenChildrenRules > 0) {
-							// between child rules can be comments, so empty lines should be added to first comment between rules, rather than to rule
-							var applicableNode = getApplicableNode(node);
+							// between rules can be comments, so empty lines should be added to first comment between rules, rather than to rule
+							applicableNode = getApplicableNode(node);
 
 							if (applicableNode) {
 								applicableNode.raws.before = createLineBreaks(linesBetweenChildrenRules) + applicableNode.raws.before;
 							}
 						}
+
+						// 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);
+
+							if (applicableNode) {
+								applicableNode.raws.before = createLineBreaks(linesBetweenMediaRules) + applicableNode.raws.before;
+							}
+						}
 					}
 				});
 			}

test/fixtures/lines-between-media.css

@@ -0,0 +1,42 @@
+.block {
+	@media (--platform-organize--lap) {
+		padding-right: 0;
+	}
+	@media (min-width: 900px) {
+		padding-right: 0;
+	}
+}
+.block {
+
+
+
+
+	@media (--platform-organize--lap) {
+		padding-right: 0;
+	}
+
+
+
+
+
+
+
+
+	@media (min-width: 900px) {
+		padding-right: 0;
+	}
+}
+.block {
+	display: none;
+
+	@media (min-width: 1px) {}
+	/* comment 1 */
+	@media (min-width: 2px) {}
+
+
+
+
+	/* comment 2 */
+	/* comment 3 */
+	@media (min-width: 3px) {}
+}

test/fixtures/lines-between-media.expected.css

@@ -0,0 +1,34 @@
+.block {
+	@media (--platform-organize--lap) {
+		padding-right: 0;
+	}
+
+
+	@media (min-width: 900px) {
+		padding-right: 0;
+	}
+}
+.block {
+	@media (--platform-organize--lap) {
+		padding-right: 0;
+	}
+
+
+	@media (min-width: 900px) {
+		padding-right: 0;
+	}
+}
+.block {
+	display: none;
+
+	@media (min-width: 1px) {}
+
+
+	/* comment 1 */
+	@media (min-width: 2px) {}
+
+
+	/* comment 2 */
+	/* comment 3 */
+	@media (min-width: 3px) {}
+}

test/test.js

@@ -216,6 +216,16 @@ test('Should insert empty lines between children classes in accordance with opti
 	});
 });
 
+test('Should insert empty lines between @media rules in accordance with option \'empty-lines-between-media-rules\'', t => {
+	return run(t, 'lines-between-media', {
+		'sort-order': [
+			['...'],
+			['@media']
+		],
+		'empty-lines-between-media-rules': 2
+	});
+});
+
 // test('Should sort LESS files', t => {
 //     return run(t, 'less.less', {}, 'less');
 // });