Merge pull request #9 from scalder27/master

Add space between subclasses, children styles

Author: hudochenkov

.eslintrc

@@ -1,6 +1,7 @@
 {
   "rules": {
     "space-before-function-paren": [2, { "named": "never" }],
+    "space-after-keywords":        [2, "always"],
     "no-shadow-restricted-names":  [2],
     "computed-property-spacing":   [2],
     "no-empty-character-class":    [2],

.gitattributes

@@ -0,0 +1,5 @@
+# Autodetect text files
+* text=auto
+
+# Force the following filetypes to have unix eols, so Windows does not break them
+*.* text eol=lf

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log
 test/**/*.actual.css
 test/**/*.actual.scss
 dev/
+.idea/

README.md

@@ -21,7 +21,7 @@ $ npm install postcss-sorting
 
 ## Options
 
-Currently, there is only one option.
+Currently, there is only two options.
 
 ### `sort-order`
 
@@ -239,6 +239,50 @@ everything would go into five groups: variables, then group with `position`, the
 
 Example: `{ "sort-order": "zen" }`
 
+### `empty-lines-between-children-rules`
+
+Set number of empty lines between nested children rules. By default there is no empty lines between '>child' rules.
+
+Acceptable value: `{Number}` of empty lines
+
+Example: `{ "empty-lines-between-children-rules": 1, "sort-order": [ ["..."], [">child"] ] }`
+
+```scss
+/* before */
+.block {
+    position: absolute;
+
+    span {
+        display: inline-block;
+    }
+
+
+    &__element {
+        display: none;
+    }
+    &:hover {
+        top: 0;
+    }
+}
+
+/* after */
+.block {
+    position: absolute;
+
+    span {
+        display: inline-block;
+    }
+
+    &__element {
+        display: none;
+    }
+
+    &:hover {
+        top: 0;
+    }
+}
+```
+
 ## Usage
 
 See [PostCSS] docs for examples for your environment.

index.js

@@ -59,7 +59,28 @@ function cleanLineBreaks(node) {
     return node;
 }
 
+function createLineBreaks(lineBreaksCount) {
+    return new Array(lineBreaksCount + 1).join('\n');
+}
+
+function getLinesBetweenChildrenFromOptions(opts) {
+    var options = opts || {};
+    var lines = options['empty-lines-between-children-rules'];
+
+    if (lines === undefined || lines === null) {
+        return 0;
+    }
+
+    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.');
+    }
+
+    return lines;
+}
+
 module.exports = postcss.plugin('postcss-sorting', function (opts) {
+    var linesBetweenChildrenRules = getLinesBetweenChildrenFromOptions(opts);
+
     return function (css) {
         var order = getSortOrder(opts);
 
@@ -196,9 +217,14 @@ module.exports = postcss.plugin('postcss-sorting', function (opts) {
 
                     var prevNode = node.prev();
 
-                    if (prevNode && node.groupIndex > prevNode.groupIndex) {
-                        if (node.raws.before) {
-                            node.raws.before = '\n' + node.raws.before;
+                    if (prevNode && node.raws.before) {
+                        if (node.groupIndex > prevNode.groupIndex) {
+                            node.raws.before = createLineBreaks(1) + node.raws.before;
+                        }
+
+                        // Insert empty lines between children classes
+                        if (node.type === 'rule' && prevNode.type === 'rule' && linesBetweenChildrenRules > 0) {
+                            node.raws.before = createLineBreaks(linesBetweenChildrenRules) + node.raws.before;
                         }
                     }
                 });

package.json

@@ -27,6 +27,6 @@
   "scripts": {
     "test": "ava && eslint index.js test/test.js",
     "test2": "ava",
-    "lint": "eslint index.js test/test.js"
+    "lint": "eslint index.js test/test.js --fix"
   }
 }

test/fixtures/lines-between-children.css

@@ -0,0 +1,29 @@
+.platform-organize {
+    background-image: linear-gradient(-45deg, #ff83b2 0%, #da82d8 49%, #b480ff 100%);
+    &__row {
+        display: flex;
+        &:nth-child(2) {
+            flex-direction: row-reverse;
+        }
+        &:nth-child(3) {
+
+            &:hover {
+                margin-bottom: 50px;
+            }
+        }
+    }
+
+
+
+
+
+    &__row:nth-child(3) &__text {
+        padding-right: 80px;
+        @media (--platform-organize--lap) {
+            padding-right: 0;
+        }
+    }
+    &__media {
+        flex: 0 0 auto;
+    }
+}

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

@@ -0,0 +1,31 @@
+.platform-organize {
+    background-image: linear-gradient(-45deg, #ff83b2 0%, #da82d8 49%, #b480ff 100%);
+
+    &__row {
+        display: flex;
+
+        &:nth-child(2) {
+            flex-direction: row-reverse;
+        }
+
+
+        &:nth-child(3) {
+            &:hover {
+                margin-bottom: 50px;
+            }
+        }
+    }
+
+
+    &__row:nth-child(3) &__text {
+        padding-right: 80px;
+        @media (--platform-organize--lap) {
+            padding-right: 0;
+        }
+    }
+
+
+    &__media {
+        flex: 0 0 auto;
+    }
+}

test/test.js

@@ -189,3 +189,13 @@ test('Should sort prefixed propertyes as unprefixed if first one not in order, b
         'width'
     ] });
 });
+
+test('Should insert empty lines between children classes in accordance with option \'empty-lines-between-children-rules\'', t => {
+    return run(t, 'lines-between-children', {
+        'sort-order': [
+            ['...'],
+            ['>child']
+        ],
+        'empty-lines-between-children-rules': 2
+    });
+});