Merge pull request #95 from csscomb/tg/scss-less

Support sorting in *.scss and *.less files

Author: mishanga

.jshint-groups.js

@@ -27,7 +27,7 @@ module.exports = {
         test: {
             options: {
                 node: true,
-                predef: ['describe', 'beforeEach', 'it']
+                predef: ['describe', 'beforeEach', 'afterEach', 'it']
             },
             includes: ['test/*.js']
         }

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.X.X - 2013-XX-XX
+- Use Gonzales PE to parse *.scss and *.less files
+- Support sorting properties in *.scss and *.less files
+
 ## 1.0.0 - 2013-11-06
 - Option: vendor-prefix-align
 - Dependencies updated

README.md

@@ -6,7 +6,7 @@ You can easily write your own [configuration](#configuration) to make your style
 
 The main feature is the [sorting properties](#sort-order) in specific order.
 It was inspired by the same-named [@miripiruni](https://github.com/miripiruni)'s [PHP-based tool](https://github.com/csscomb/csscomb).
-This is the new JavaScript version, based on powerful CSS parser [Gonzales](https://github.com/css/gonzales).
+This is the new JavaScript version, based on powerful CSS parser [Gonzales PE](https://github.com/tonyganch/gonzales-pe).
 
 ## Installation
 
@@ -363,6 +363,35 @@ p {
 }
 ```
 
+If you sort properties in `*.scss` or `*.less` files, you can use one of 3
+keywords in your config:
+  * `$variable` for variable declarations (e.g. `$var` in Sass or `@var` in LESS);
+  * `$include` for included mixins (e.g. `@include ...` and `@extend ...` in Sass
+    or `.mixin()` in LESS);
+  * `$import` for `@import` rules.
+
+Example: `{ "sort-order": [ [ "$variable" ], [ "$include" ], [ "top", "padding" ] ] }`
+
+```scss
+/* before */
+p {
+    padding: 0;
+    @include mixin($color);
+    $color: tomato;
+    top: 0;
+}
+
+/* after */
+p {
+    $color: tomato;
+
+    @include mixin($color);
+
+    top: 0;
+    padding: 0;
+}
+```
+
 ### stick-brace
 
 Available values:
@@ -465,5 +494,6 @@ This software is released under the terms of the [MIT license](https://github.co
 ## Other projects
 * https://github.com/senchalabs/cssbeautify
 * https://github.com/css/gonzales
+* https://github.com/tonyganch/gonzales-pe
 * https://github.com/css/csso
 * https://github.com/nzakas/parser-lib

lib/csscomb.js

@@ -1,4 +1,4 @@
-var gonzales = require('gonzales');
+var gonzales = require('gonzales-pe');
 var minimatch = require('minimatch');
 var vow = require('vow');
 var vfs = require('vow-fs');
@@ -103,22 +103,23 @@ Comb.prototype = {
     /**
      * Process file provided with a string.
      * @param {String} text
+     * @param {String} [syntax] Syntax name (e.g. `scss`)
      * @param {String} [filename]
      */
-    processString: function(text, filename) {
+    processString: function(text, syntax, filename) {
         if (!text) return text;
         var tree;
         var string = JSON.stringify;
         try {
-            tree = gonzales.srcToCSSP(text);
+            tree = gonzales.cssToAST({ syntax: syntax, css: text });
         } catch (e) {
             throw new Error('Parsing error at ' + filename + ': ' + e.message);
         }
         if (typeof tree === 'undefined') {
             throw new Error('Undefined tree at ' + filename + ': ' + string(text) + ' => ' + string(tree));
         }
         tree = this.processTree(tree);
-        return gonzales.csspToSrc(tree);
+        return gonzales.astToCSS({ syntax: syntax, ast: tree });
     },
 
     /**
@@ -129,9 +130,11 @@ Comb.prototype = {
      */
     processFile: function(path) {
         var _this = this;
-        if (this._shouldProcess(path) && path.match(/\.css$/)) {
+        // TODO: Move extension check into `_shouldProcess` method
+        if (this._shouldProcess(path) && path.match(/\.[css, scss]$/)) {
             return vfs.read(path, 'utf8').then(function(data) {
-                var processedData = _this.processString(data, path);
+                var syntax = path.split('.').pop();
+                var processedData = _this.processString(data, syntax, path);
                 var changed = data !== processedData;
                 var lint = _this._lint;
 

lib/options/always-semicolon.js

@@ -29,7 +29,7 @@ module.exports = {
                 if (type === 'declaration') {
                     var space = [];
                     for (var j = value.length; j--;) {
-                        if (value[j][0] !== 's' && value[j][0] !== 'comment') break;
+                        if (['s', 'commentML', 'commentSL'].indexOf(value[j][0]) === -1) break;
                         space.unshift(value.splice(j)[0]);
                     }
                     node.splice.apply(node, [i + 1, 0, ['decldelim']].concat(space));

lib/options/remove-empty-rulesets.js

@@ -67,7 +67,7 @@ module.exports = {
     },
 
     _isDeclarationOrComment: function(node) {
-        return node[0] === 'declaration' || node[0] === 'comment';
+        return ['declaration', 'commentML', 'commentSL'].indexOf(node[0]) > -1;
     },
 
     _isRuleset: function(node) {