Merge pull request #18 from suitcss/stylelint

Add stylelint to verify code style

Author: simonsmith

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-suitcss"
+}

README.md

@@ -15,7 +15,9 @@ Compiles CSS packages with:
 * [postcss-custom-media](https://github.com/postcss/postcss-custom-media)
 * [autoprefixer](https://github.com/postcss/autoprefixer)
 
-Each imported file is linted with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and minification is provided by [cssnano](http://cssnano.co/). Additional plugins can be added via the configuration options.
+Each imported file is linted with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and minification is provided by [cssnano](http://cssnano.co/). Code style can also be checked with [stylelint](http://stylelint.io/)
+
+Additional plugins can be added via the configuration options.
 
 ## Installation
 
@@ -41,6 +43,7 @@ Options:
   -h, --help                output usage information
   -V, --version             output the version number
   -m, --minify              minify output with cssnano
+  -l, --lint                ensure code adheres to the SUIT code style
   -i, --import-root [path]  the root directory for imported css files
   -c, --config [path]       a custom PostCSS config file
   -v, --verbose             log verbose output for debugging
@@ -91,6 +94,24 @@ preprocessor(css, {
 
 Where to resolve imports from. Passed to [`postcss-import`](https://github.com/postcss/postcss-import/blob/master/README.md#root).
 
+##### `lint`
+
+* Type: `Boolean`
+* Default: `false`
+
+Ensure code conforms to the [SUIT code style](https://github.com/suitcss/suit/blob/master/doc/STYLE.md). Stylelint [configuration options](http://stylelint.io/?/docs/user-guide/configuration.md) can also be overridden:
+
+```js
+{
+  lint: true,
+  stylelint: {
+    rules: {
+      indentation: [4, 'tab'],
+    }
+  }
+}
+```
+
 ##### `minify`
 
 * Type: `Boolean`
@@ -125,7 +146,7 @@ A list of plugins that are passed to PostCSS. This can be used to add new plugin
 
 ```js
 {
-  use: ['stylelint', 'postcss-property-lookup']
+  use: ['postcss-at2x', 'postcss-property-lookup']
 }
 ```
 
@@ -218,7 +239,7 @@ var defaults = [
 // config
 module.exports = {
   use: [
-    'stylelint',
+    'postcss-at2x',
     'postcss-calc',
     'autoprefixer',
     'postcss-reporter'
@@ -229,7 +250,7 @@ var result = [
   'postcss-import',
   'postcss-custom-properties',
   'postcss-custom-media',
-  'stylelint',
+  'postcss-at2x',
   'postcss-calc',
   'autoprefixer',
   'postcss-reporter'

bin/suitcss

@@ -20,8 +20,9 @@ program
   .version(require('../package.json').version)
   .usage('[<input>] [<output>]')
   .option('-m, --minify', 'minify output with cssnano')
-  .option('-i, --import-root [path]', 'the root directory for imported css files', '')
-  .option('-c, --config [path]', 'a custom PostCSS config file', '')
+  .option('-l, --lint', 'ensure code adheres to the SUIT code style')
+  .option('-i, --import-root [path]', 'the root directory for imported css files')
+  .option('-c, --config [path]', 'a custom PostCSS config file')
   .option('-v, --verbose', 'log verbose output for debugging')
   .option('-w, --watch', 'watch the input file and any imports for changes');
 
@@ -106,7 +107,11 @@ function run () {
   read(input, function (err, buffer) {
     if (err) logger.throw(err);
     var css = buffer.toString();
-    var opts = assign({}, {minify: program.minify, root: program.importRoot}, config);
+    var opts = assign({}, {
+                      minify: program.minify,
+                      root: program.importRoot,
+                      lint: program.lint
+                    }, config);
 
     suitcss(css, opts).then(function(result) {
       if (output) {

lib/index.js

@@ -9,6 +9,7 @@ var bemLinter = require('postcss-bem-linter');
 var postcss = require('postcss');
 var cssnano = require('cssnano');
 var reporter = require('postcss-reporter');
+var stylelint = require('stylelint');
 
 /**
  * Module export
@@ -22,6 +23,7 @@ module.exports = preprocessor;
 
 var defaults = {
   minify: false,
+  stylelint: false,
   use: [
     'postcss-import',
     'postcss-custom-properties',
@@ -120,10 +122,17 @@ function mergeOptions(options) {
  */
 function lintImportedFiles(options) {
   return function(css, filename) {
-    return postcss([
-      bemLinter(options['postcss-bem-linter']),
-      reporter(options['postcss-reporter'])
-    ]).process(css, {from: filename}).css;
+    var processor = postcss();
+
+    if (options.lint) {
+      processor.use(stylelint(options.stylelint));
+    }
+
+    processor
+      .use(bemLinter(options['postcss-bem-linter']))
+      .use(reporter(options['postcss-reporter']));
+
+    return processor.process(css, {from: filename}).css;
   };
 }
 

package.json

@@ -28,7 +28,9 @@
     "postcss-custom-properties": "^5.0.0",
     "postcss-import": "^7.1.3",
     "postcss-reporter": "^1.3.0",
-    "read-file-stdin": "0.2.0"
+    "read-file-stdin": "0.2.0",
+    "stylelint": "^2.3.4",
+    "stylelint-config-suitcss": "^1.0.0"
   },
   "devDependencies": {
     "chai": "^3.4.1",

test/fixtures/stylelint-import.css

@@ -0,0 +1 @@
+@import "./stylelint.css";

test/fixtures/stylelint.css

@@ -0,0 +1,4 @@
+.Component {
+  flex: 1;
+  box-sizing: content-box;
+}

test/test.js

@@ -36,6 +36,7 @@ describe('suitcss', function () {
       var keys = [
         'minify',
         'use',
+        'stylelint',
         'postcss-import',
         'postcss-reporter',
         'cssnano'
@@ -51,6 +52,11 @@ describe('suitcss', function () {
       expect(opts['postcss-import'].root).to.equal('test/root');
     });
 
+    it('should allow stylelint to be enabled', function() {
+      var opts = mergeOptions({lint: true});
+      expect(opts.lint).to.be.true;
+    });
+
     it('should allow an minify option to be set', function() {
       var opts = mergeOptions({minify: true});
       expect(opts.minify).to.be.true;
@@ -110,6 +116,24 @@ describe('suitcss', function () {
       });
     });
 
+    describe('stylelint', function() {
+      it('should check the input conforms to SUIT style rules', function(done) {
+        suitcss('@import ./stylelint.css', {
+            lint: true,
+            root: 'test/fixtures',
+            'postcss-reporter': {
+              throwError: true
+            }
+          }
+        ).then(function(result) {
+          done(new Error('stylelint should have failed conformance'));
+        }).catch(function(err) {
+          expect(err.message).to.contain('postcss-reporter: warnings or errors were found');
+          done();
+        });
+      });
+    });
+
     describe('beforeLint option', function() {
       var lintImportedFilesStub, bemLintStub, beforeLintStub, revert;
 
@@ -241,6 +265,14 @@ describe('cli', function () {
     });
   });
 
+  it('should output stylelint warnings', function (done) {
+    exec('bin/suitcss -i test/fixtures test/fixtures/stylelint-import.css test/fixtures/cli/output.css -l', function (err, stdout) {
+      if (err) return done(err);
+      expect(stdout).to.contain('Expected property "box-sizing" to come before property "flex"');
+      done();
+    });
+  });
+
   it('should minify the output', function (done) {
     exec('bin/suitcss -i test/fixtures test/fixtures/import.css test/fixtures/cli/output.css -m', function (err, stdout) {
       if (err) return done(err);