Added leftovers token to sort-order option, fixes csscomb#160.

ppambler · Jun 9, 2014 · 09223a0 · 09223a0
1 parent bb759a8
commit 09223a0
Show file tree

Hide file tree

Showing 14 changed files with 298 additions and 2 deletions.
diff --git a/doc/options.md b/doc/options.md
@@ -326,6 +326,28 @@ p {
 }
 ```
 
+### Leftovers
+
+When there are properties that are not mentioned in the `sort-order` option, they are inserted after all the sorted properties in the new group in the same order they were in the source stylesheet.
+
+You can override this by using a “leftovers” token: `...` — just place it either in its own group, or near other properties in any other group and CSSComb would place all the properties that were not sorted where the `...` was in `sort-order`.
+
+So, with this value:
+
+``` json
+{
+    "sort-order": [
+        ["$variable"],
+        ["position"],
+        ["...", "border"],
+        ["$include"],
+        ["font"]
+    ]
+}
+```
+
+everything would go into five groups: variables, then group with `position`, then group containing all the leftovers plus the `border`, then group with all includes and then the `font`.
+
 ## space-after-colon
 
 Set space after `:` in declarations.

diff --git a/lib/options/sort-order.js b/lib/options/sort-order.js
@@ -52,6 +52,10 @@ module.exports = {
         // (e.g. `color`), or @-rule's special keyword (e.g. `$import`):
         var propertyName;
 
+        // Index to place the nodes that shouldn't be sorted
+        var lastGroupIndex = order['...'] ? order['...'].group : Infinity;
+        var lastPropertyIndex = order['...'] ? order['...'].prop : Infinity;
+
         // Counters for loops:
         var i;
         var l;
@@ -173,10 +177,11 @@ module.exports = {
             // If the declaration's property is in order's list, save its
             // group and property indices. Otherwise set them to 10000, so
             // declaration appears at the bottom of a sorted list:
+
             extendedNode.groupIndex = orderProperty && orderProperty.group > -1 ?
-                orderProperty.group : 10000;
+                orderProperty.group : lastGroupIndex;
             extendedNode.propertyIndex = orderProperty && orderProperty.prop > -1 ?
-                orderProperty.prop : 10000;
+                orderProperty.prop : lastPropertyIndex;
 
             // Mark current node to remove it later from parent node:
             deleted.push(i);

diff --git a/test/options/sort-order-scss.js b/test/options/sort-order-scss.js
@@ -100,4 +100,17 @@ describe('options/sort-order (scss)', function() {
         ] });
         this.shouldBeEqual('condition.scss', 'condition.expected.scss');
     });
+
+    it('Should sort complex case with leftovers', function() {
+        this.comb.configure({
+          "sort-order": [
+            ["$variable"],
+            ["position"],
+            ["...", "border"],
+            ["$include"],
+            ["font"]
+          ]
+        });
+        this.shouldBeEqual('leftovers.scss', 'leftovers.expected.scss');
+    });
 });
diff --git a/test/options/sort-order-scss/leftovers.expected.scss b/test/options/sort-order-scss/leftovers.expected.scss
@@ -0,0 +1,36 @@
+a {
+    $red: tomato;
+
+    position: $tomato;
+
+    leftover: yay;
+    border: 1px solid;
+
+    @include .nani;
+
+    font: 20px/16px Arial, sans-serif;
+}
+b {
+    $red: tomato;
+
+    position: $tomato;
+
+    leftover: yay;
+    border: 1px solid;
+
+    @include .nani;
+
+    font: 20px/16px Arial, sans-serif;
+}
+c {
+    $red: tomato;
+
+    position: $tomato;
+
+    leftover: yay;
+    border: 1px solid;
+
+    @include .nani;
+
+    font: 20px/16px Arial, sans-serif;
+}
diff --git a/test/options/sort-order-scss/leftovers.scss b/test/options/sort-order-scss/leftovers.scss
@@ -0,0 +1,24 @@
+a {
+    leftover: yay;
+    border: 1px solid;
+    @include .nani;
+    font: 20px/16px Arial, sans-serif;
+    position: $tomato;
+    $red: tomato;
+}
+b {
+    border: 1px solid;
+    @include .nani;
+    position: $tomato;
+    leftover: yay;
+    font: 20px/16px Arial, sans-serif;
+    $red: tomato;
+}
+c {
+    border: 1px solid;
+    @include .nani;
+    font: 20px/16px Arial, sans-serif;
+    position: $tomato;
+    $red: tomato;
+    leftover: yay;
+}
diff --git a/test/options/sort-order.js b/test/options/sort-order.js
@@ -82,4 +82,34 @@ describe('options/sort-order', function() {
         this.comb.configure(config);
         this.shouldBeEqual('issue-94-3.css', 'issue-94-3.expected.css');
     });
+
+    it('Should place the leftovers in the end', function() {
+        var config = this.Comb.getConfig('csscomb');
+        this.comb.configure(config);
+        this.shouldBeEqual('leftovers-1.css', 'leftovers-1.expected.css');
+    });
+
+    it('Should place the leftovers in the beginning', function() {
+        var config = this.Comb.getConfig('csscomb');
+        config['sort-order'][0].unshift(['...']);
+        this.comb.configure(config);
+        this.shouldBeEqual('leftovers-2.css', 'leftovers-2.expected.css');
+        config['sort-order'][0].shift();
+    });
+
+    it('Should place the leftovers in the beginning of its group', function() {
+        var config = this.Comb.getConfig('csscomb');
+        config['sort-order'][1].unshift('...');
+        this.comb.configure(config);
+        this.shouldBeEqual('leftovers-3.css', 'leftovers-3.expected.css');
+        config['sort-order'][1].shift();
+    });
+
+    it('Should place the leftovers in the middle of its group', function() {
+        var config = this.Comb.getConfig('csscomb');
+        config['sort-order'][1].splice(1, 0, '...');
+        this.comb.configure(config);
+        this.shouldBeEqual('leftovers-4.css', 'leftovers-4.expected.css');
+        config['sort-order'][1].splice(1, 1);
+    });
 });
diff --git a/test/options/sort-order/leftovers-1.css b/test/options/sort-order/leftovers-1.css
@@ -0,0 +1,20 @@
+a
+{
+    leftover: yay;
+    z-index: 1;
+    position: absolute;
+}
+
+b
+{
+    z-index: 2;
+    leftover: yay;
+    position: absolute;
+}
+
+c
+{
+    z-index: 3;
+    position: absolute;
+    leftover: yay;
+}
diff --git a/test/options/sort-order/leftovers-1.expected.css b/test/options/sort-order/leftovers-1.expected.css
@@ -0,0 +1,23 @@
+a
+{
+    position: absolute;
+    z-index: 1;
+
+    leftover: yay;
+}
+
+b
+{
+    position: absolute;
+    z-index: 2;
+
+    leftover: yay;
+}
+
+c
+{
+    position: absolute;
+    z-index: 3;
+
+    leftover: yay;
+}
diff --git a/test/options/sort-order/leftovers-2.css b/test/options/sort-order/leftovers-2.css
@@ -0,0 +1,20 @@
+a
+{
+    leftover: yay;
+    z-index: 1;
+    position: absolute;
+}
+
+b
+{
+    z-index: 2;
+    leftover: yay;
+    position: absolute;
+}
+
+c
+{
+    z-index: 3;
+    position: absolute;
+    leftover: yay;
+}
diff --git a/test/options/sort-order/leftovers-2.expected.css b/test/options/sort-order/leftovers-2.expected.css
@@ -0,0 +1,23 @@
+a
+{
+    leftover: yay;
+
+    position: absolute;
+    z-index: 1;
+}
+
+b
+{
+    leftover: yay;
+
+    position: absolute;
+    z-index: 2;
+}
+
+c
+{
+    leftover: yay;
+
+    position: absolute;
+    z-index: 3;
+}
diff --git a/test/options/sort-order/leftovers-3.css b/test/options/sort-order/leftovers-3.css
@@ -0,0 +1,20 @@
+a
+{
+    leftover: yay;
+    z-index: 1;
+    position: absolute;
+}
+
+b
+{
+    z-index: 2;
+    leftover: yay;
+    position: absolute;
+}
+
+c
+{
+    z-index: 3;
+    position: absolute;
+    leftover: yay;
+}
diff --git a/test/options/sort-order/leftovers-3.expected.css b/test/options/sort-order/leftovers-3.expected.css
@@ -0,0 +1,20 @@
+a
+{
+    leftover: yay;
+    position: absolute;
+    z-index: 1;
+}
+
+b
+{
+    leftover: yay;
+    position: absolute;
+    z-index: 2;
+}
+
+c
+{
+    leftover: yay;
+    position: absolute;
+    z-index: 3;
+}
diff --git a/test/options/sort-order/leftovers-4.css b/test/options/sort-order/leftovers-4.css
@@ -0,0 +1,20 @@
+a
+{
+    leftover: yay;
+    z-index: 1;
+    position: absolute;
+}
+
+b
+{
+    z-index: 2;
+    leftover: yay;
+    position: absolute;
+}
+
+c
+{
+    z-index: 3;
+    position: absolute;
+    leftover: yay;
+}
diff --git a/test/options/sort-order/leftovers-4.expected.css b/test/options/sort-order/leftovers-4.expected.css
@@ -0,0 +1,20 @@
+a
+{
+    position: absolute;
+    leftover: yay;
+    z-index: 1;
+}
+
+b
+{
+    position: absolute;
+    leftover: yay;
+    z-index: 2;
+}
+
+c
+{
+    position: absolute;
+    leftover: yay;
+    z-index: 3;
+}