New option: space-after-combinator

ppambler · Jun 9, 2014 · b35c1a6 · b35c1a6
1 parent f2a4521
commit b35c1a6
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 0 deletions.
diff --git a/config/csscomb.json b/config/csscomb.json
@@ -13,6 +13,7 @@
     "quotes": "single",
     "remove-empty-rulesets": true,
     "space-after-colon": " ",
+    "space-after-combinator": " ",
     "space-before-colon": "",
     "space-before-combinator": " ",
     "strip-spaces": true,

diff --git a/doc/options.md b/doc/options.md
@@ -367,6 +367,36 @@ a {
 }
 ```
 
+## space-after-combinator
+
+Set space after combinator (for example, in selectors like `p > a`).
+
+Acceptable values:
+
+* `{Number}` — number of whitespaces;
+* `{String}` — string with whitespaces, tabs or line breaks.
+
+Example: `{ 'space-after-combinator': 1 }`
+
+```scss
+// Before:
+p>a { color: panda; }
+
+// After:
+p> a { color: panda; }
+```
+
+Example: `{ 'space-after-combinator': '\n  ' }`
+
+```scss
+// Before:
+p > a { color: panda; }
+
+// After:
+p >
+  a { color: panda; }
+```
+
 ## space-before-colon
 
 Set space before `:` in declarations.

diff --git a/lib/csscomb.js b/lib/csscomb.js
@@ -15,6 +15,7 @@ var OPTIONS = [
     'quotes',
     'strip-spaces',
     'eof-newline',
+    'space-after-combinator',
     'space-before-combinator',
     'space-before-colon',
     'space-after-colon',

diff --git a/lib/options/space-after-combinator.js b/lib/options/space-after-combinator.js
@@ -0,0 +1,61 @@
+module.exports = {
+    name: 'space-after-combinator',
+
+    accepts: {
+        number: true,
+        string: /^[ \t\n]*$/
+    },
+
+    /**
+     * Processes tree node.
+     *
+     * @param {String} nodeType
+     * @param {node} node
+     */
+    process: function(nodeType, node) {
+        if (nodeType !== 'selector') return;
+
+        var value = this.getValue('space-after-combinator');
+
+        for (var i = node.length; i--;) {
+            var subSelector = node[i];
+            for (var j = subSelector.length; j--;) {
+                if (subSelector[j][0] !== 'combinator') continue;
+
+                if (subSelector[j + 1][0] === 's') {
+                    subSelector[j + 1][1] = value;
+                } else {
+                    subSelector.splice(j + 1, 0, ['s', value]);
+                }
+            }
+        }
+    },
+
+    /**
+     * Detects the value of an option at the tree node.
+     *
+     * @param {String} nodeType
+     * @param {node} node
+     */
+    detect: function(nodeType, node) {
+        if (nodeType !== 'selector') return;
+
+        var variants = [];
+
+        for (var i = node.length; i--;) {
+            var subSelector = node[i];
+            for (var j = subSelector.length; j--;) {
+                if (subSelector[j][0] !== 'combinator') continue;
+
+                if (subSelector[j + 1][0] === 's') {
+                    variants.push(subSelector[j + 1][1]);
+                } else {
+                    variants.push('');
+                }
+            }
+        }
+
+        return variants;
+    }
+};
+
diff --git a/test/options/space-after-combinator.js b/test/options/space-after-combinator.js
@@ -0,0 +1,84 @@
+describe('options/space-after-combinator:', function() {
+    beforeEach(function() {
+        this.filename = __filename;
+    });
+
+    it('Array value => should not change anything', function() {
+        this.comb.configure({ 'space-after-combinator': ['', ' '] });
+        this.shouldBeEqual('test.css');
+    });
+
+    it('Invalid string value => should not change anything', function() {
+        this.comb.configure({ 'space-after-combinator': '  nani  ' });
+        this.shouldBeEqual('test.css');
+    });
+
+    it('Float number value => should not change anything', function() {
+        this.comb.configure({ 'space-after-combinator': 3.5 });
+        this.shouldBeEqual('test.css');
+    });
+
+    it('Integer value => should set proper space after combinator', function() {
+        this.comb.configure({ 'space-after-combinator': 0 });
+        this.shouldBeEqual('test.css', 'test.expected.css');
+    });
+
+    it('Valid string value (spaces only) => should set proper space after combinator', function() {
+        this.comb.configure({ 'space-after-combinator': '  ' });
+        this.shouldBeEqual('test.css', 'test-2.expected.css');
+    });
+
+    it('Valid string value (spaces and newlines) => should set proper space after combinator', function() {
+        this.comb.configure({ 'space-after-combinator': '\n    ' });
+        this.shouldBeEqual('test.css', 'test-3.expected.css');
+    });
+
+    it('Should detect no whitespaces after combinator', function() {
+        this.shouldDetect(
+            ['space-after-combinator'],
+            'a+b { color:red }',
+            { 'space-after-combinator': '' }
+        );
+    });
+
+    it('Should detect a space after combinator', function() {
+        this.shouldDetect(
+            ['space-after-combinator'],
+            'a + \n b { color:red }',
+            { 'space-after-combinator': ' \n ' }
+        );
+    });
+
+    it('Should detect a space after combinator in long selector', function() {
+        this.shouldDetect(
+            ['space-after-combinator'],
+            'a + b ~ c>d { color:red }',
+            { 'space-after-combinator': ' ' }
+        );
+    });
+
+    it('Should detect a space after combinator in long selector, test 2', function() {
+        this.shouldDetect(
+            ['space-after-combinator'],
+            'a>b + c + d { color:red }',
+            { 'space-after-combinator': ' ' }
+        );
+    });
+
+    it('Should detect no whitespaces after combinator in long selector', function() {
+        this.shouldDetect(
+            ['space-after-combinator'],
+            'a+b ~ c+d { color:red }',
+            { 'space-after-combinator': '' }
+        );
+    });
+
+    it('Shouldn’t detect whitespaces after combinator in selector without combinators', function() {
+        this.shouldDetect(
+            ['space-after-combinator'],
+            'a { color:red }',
+            {}
+        );
+    });
+});
+
diff --git a/test/options/space-after-combinator/test-2.expected.css b/test/options/space-after-combinator/test-2.expected.css
@@ -0,0 +1,10 @@
+a>  b { color: red }
+a>  b { color: red }
+a >  b { color: red }
+a+  b { color: red }
+a+  b { color: red }
+a +  b { color: red }
+a~  b { color: red }
+a~  b { color: red }
+a ~  b { color: red }
+a ~  b+  c>  d { color: red }
diff --git a/test/options/space-after-combinator/test-3.expected.css b/test/options/space-after-combinator/test-3.expected.css
@@ -0,0 +1,22 @@
+a>
+    b { color: red }
+a>
+    b { color: red }
+a >
+    b { color: red }
+a+
+    b { color: red }
+a+
+    b { color: red }
+a +
+    b { color: red }
+a~
+    b { color: red }
+a~
+    b { color: red }
+a ~
+    b { color: red }
+a ~
+    b+
+    c>
+    d { color: red }
diff --git a/test/options/space-after-combinator/test.css b/test/options/space-after-combinator/test.css
@@ -0,0 +1,10 @@
+a>b { color: red }
+a> b { color: red }
+a >b { color: red }
+a+b { color: red }
+a+ b { color: red }
+a +b { color: red }
+a~b { color: red }
+a~ b { color: red }
+a ~b { color: red }
+a ~b+ c>d { color: red }
diff --git a/test/options/space-after-combinator/test.expected.css b/test/options/space-after-combinator/test.expected.css
@@ -0,0 +1,10 @@
+a>b { color: red }
+a>b { color: red }
+a >b { color: red }
+a+b { color: red }
+a+b { color: red }
+a +b { color: red }
+a~b { color: red }
+a~b { color: red }
+a ~b { color: red }
+a ~b+c>d { color: red }