Merge pull request #51 from suitcss/lint-main-file

Allow input file to be linted

Author: simonsmith

CHANGELOG.md

@@ -1,5 +1,7 @@
 ### HEAD
 
+* Input file is now linted (previously only imported files were passed through
+  the linting tools)
 * Add `--throw-error` (`-e`) to CLI
 * Enable `lint` option by default
 * Add `postcss-apply`

README.md

@@ -74,16 +74,27 @@ Examples:
 
 Returns a [PostCSS promise](http://api.postcss.org/LazyResult.html)
 
+```js
+preprocessor(css: String [, options: Object] [, filename: String]);
+```
+
+* `css`: CSS input (_required_)
+* `options`: Options to the preprocessor (see below) (_optional_)
+* `filename`: Filename of the input CSS file (_optional_)
+
+#### Example
+
 ```js
 var preprocessor = require('suitcss-preprocessor');
 var fs = require('fs');
 
-var css = fs.readFileSync('src/components/index.css', 'utf8');
+var filename = 'src/components/index.css';
+var css = fs.readFileSync(filename, 'utf8');
 
 preprocessor(css, {
   root: 'path/to/css',
   minify: true,
-}).then(function(result) {
+}, filename).then(function(result) {
   fs.writeFileSync('build/bundle.css', result.css);
 });
 ```

bin/suitcss

@@ -123,7 +123,7 @@ function run() {
       });
     }
 
-    suitcss(css, opts).then(function(result) {
+    suitcss(css, opts, input).then(function(result) {
       if (output) {
         writeFileSync(output, result.css + '\n');
       } else {

lib/index.js

@@ -53,16 +53,17 @@ var defaults = {
  * Process CSS
  *
  * @param {String} css
+ * @param {Object} options
+ * @param {String} filename
  * @returns {Promise}
  */
 
-function preprocessor(css, options) {
+function preprocessor(css, options, filename) {
   options = mergeOptions(options);
 
   var plugins = options.use.map(function(p) {
     var plugin = require(p);
     var settings = options[p];
-
     return settings ? plugin(settings) : plugin;
   });
 
@@ -72,7 +73,9 @@ function preprocessor(css, options) {
     processor.use(cssnano(options.cssnano));
   }
 
-  return processor.process(css, options.postcss);
+  return lintFile(css, options, filename).then(function(result) {
+    return processor.process(result.css, options.postcss);
+  });
 }
 
 /**
@@ -95,7 +98,7 @@ function mergeOptions(options) {
 
   easyImportOpts.transform = function(css, filename) {
     var transformedCss = origTransform(css);
-    return lintImportedFiles(mergedOpts, transformedCss, filename).then(function(result) {
+    return lintFile(transformedCss, mergedOpts, filename).then(function(result) {
       return result.css;
     });
   };
@@ -116,30 +119,36 @@ function mergeOptions(options) {
 }
 
 /**
- * Lint each imported component with postcss-bem-linter
- * and stylelint
+ * Lint component with postcss-bem-linter and stylelint
  *
+ * @param {String} css
  * @param {Object} options
+ * @param {String} filename
  * @returns {Promise} Used by postcss-import transform
  */
-function lintImportedFiles(options, css, filename) {
+function lintFile(css, options, filename) {
   var processor = postcss();
 
   if (options.lint) {
     processor.use(stylelint(options.stylelint || stylelintConfigSuit));
   }
 
+  // Merge filename alongside any other `postcss` options
+  assign(options, {
+    postcss: {from: filename}
+  });
+
   processor
     .use(bemLinter(options['postcss-bem-linter']))
     .use(reporter(options['postcss-reporter']));
 
   if (isPromise(css)) {
     return css.then(function(css) { // eslint-disable-line no-shadow
-      return processor.process(css, {from: filename});
+      return processor.process(css, options.postcss);
     });
   }
 
-  return processor.process(css, {from: filename});
+  return processor.process(css, options.postcss);
 }
 
 function isPromise(obj) {

test/fixtures/component.css

@@ -1,7 +1,6 @@
 /** @define Component */
 
 @import "./util.css";
-
 @custom-media --media-query (min-width: 200px);
 
 :root {
@@ -12,17 +11,19 @@
 }
 
 .Component {
+  background: color(red a(90%));
   font-size: var(--Component-size);
   width: calc(100% * 1 / 6);
-  background: color(red a(90%));
 }
 
 .Component-item {
   display: flex;
+
   @apply --Component-color;
 }
 
 @media (--media-query) {
+
   .Component-item {
     color: red;
   }

test/fixtures/component.out.css

@@ -5,17 +5,19 @@
 }
 
 .Component {
+  background: rgba(255, 0, 0, 0.9);
   font-size: 16px;
   width: 16.66667%;
-  background: rgba(255, 0, 0, 0.9);
 }
 
 .Component-item {
   display: flex;
+
   color: green;
 }
 
 @media (min-width: 200px) {
+
   .Component-item {
     color: red;
   }

test/fixtures/config.out.css

@@ -5,17 +5,19 @@
 }
 
 .Component {
+  background: rgba(255, 0, 0, 0.9);
   font-size: 16px;
   width: 16.66667%;
-  background: rgba(255, 0, 0, 0.9);
 }
 
 .Component-item {
   display: flex;
+
   color: green;
 }
 
 @media (min-width: 200px) {
+
   .Component-item {
     color: red;
   }

test/fixtures/minify.out.css

@@ -1 +1 @@
-.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%;background:rgba(255,0,0,.9)}.Component-item{display:flex;color:green}@media (min-width:200px){.Component-item{color:red}}
+.u-img{border-radius:50%}.Component{background:rgba(255,0,0,.9);font-size:16px;width:16.66667%}.Component-item{display:flex;color:green}@media (min-width:200px){.Component-item{color:red}}

test/test.js

@@ -20,15 +20,15 @@ var expect = chai.expect;
 
 describe('suitcss', function() {
   it('should return a css string', function(done) {
-    suitcss('body {}').then(function(result) {
+    suitcss('body {}', {lint: false}).then(function(result) {
       expect(result.css).to.be.a('string');
       done();
     });
   });
 
   it('should handle invalid input', function() {
     expect(function() {
-      suitcss(null);
+      suitcss(null, {lint: false});
     }).to.throw(TypeError);
   });
 
@@ -59,7 +59,8 @@ describe('suitcss', function() {
       });
 
       suitcss('body {}', {
-        debug: debug
+        debug: debug,
+        lint: false
       }).then(function () {
         expect(debug.calledOnce).to.be.true;
         done();
@@ -102,19 +103,20 @@ describe('suitcss', function() {
 
       beforeEach(function() {
         postcssStub = sinon.stub();
-        processMethodStub = sinon.stub();
+        processMethodStub = sinon.stub().returns(Promise.resolve());
 
         postcssStub.returns({
-          use: sinon.spy(),
+          use: sinon.stub().returns({use: sinon.spy()}),
           process: processMethodStub
         });
         revert = suitcss.__set__('postcss', postcssStub);
         suitcss('body {}', {
           root: 'something',
+          lint: false,
           postcss: {
-            from: 'somefile.css'
+            test: 'testing'
           }
-        });
+        }, 'filename.css');
       });
 
       afterEach(function() {
@@ -123,15 +125,17 @@ describe('suitcss', function() {
 
       it('should pass postcss options to the processor', function() {
         expect(processMethodStub.getCall(0).args[1]).to.eql({
-          from: 'somefile.css'
+          from: 'filename.css',
+          test: 'testing'
         });
       });
     });
 
     describe('using the transform option in postcss-import', function() {
       it('should use a default transform function that just returns the css', function(done) {
         suitcss('@import "./util.css";', {
-          root: 'test/fixtures'
+          root: 'test/fixtures',
+          lint: false
         }).then(function(result) {
           expect(result.css).to.equal('.u-img {\n  border-radius: 50%;\n}');
           done();
@@ -144,6 +148,7 @@ describe('suitcss', function() {
 
         suitcss('@import "./util.css";', {
           root: 'test/fixtures',
+          lint: false,
           'postcss-easy-import': {
             transform: transformStub
           }
@@ -159,6 +164,7 @@ describe('suitcss', function() {
       it('should also work with a promise returned from the custom transform function', function(done) {
         suitcss('@import "./util.css";', {
           root: 'test/fixtures',
+          lint: false,
           'postcss-easy-import': {
             transform: function() {
               return Promise.resolve('body { font: red; }');
@@ -186,7 +192,8 @@ describe('suitcss', function() {
 
       it('should call the updateWatchTaskFiles function with the file paths', function(done) {
         suitcss('@import "./util.css";', {
-          root: 'test/fixtures'
+          root: 'test/fixtures',
+          lint: false
         }).then(function() {
           expect(updateWatchTaskFilesSpy.getCall(0).args[0][0]).to.contain('util.css');
           done();
@@ -199,6 +206,7 @@ describe('suitcss', function() {
 
         suitcss('@import "./util.css";', {
           root: 'test/fixtures',
+          lint: false,
           'postcss-easy-import': {
             onImport: onImportSpy
           }
@@ -264,7 +272,7 @@ describe('suitcss', function() {
 
       it('should allow the config to be overidden', function() {
         return expect(
-          suitcss('@import "./stylelint.css"', {
+          suitcss('@import "./stylelint.css"\n\n', {
             root: 'test/fixtures',
             stylelint: {
               extends: 'stylelint-config-suitcss',
@@ -281,14 +289,24 @@ describe('suitcss', function() {
 
       it('should throw an error if stylelint fails', function() {
         return expect(
-          suitcss('@import "./stylelint.css"', {
+          suitcss('@import "./stylelint.css"\n\n', {
             root: 'test/fixtures',
             'postcss-reporter': {
               throwError: true
             }
           })
         ).to.be.rejectedWith(Error, 'postcss-reporter: warnings or errors were found');
       });
+
+      it('should lint the input file', function() {
+        return expect(
+          suitcss('body {}', {
+            'postcss-reporter': {
+              throwError: true
+            }
+          })
+        ).to.be.rejectedWith(Error, 'postcss-reporter: warnings or errors were found');
+      });
     });
   });
 });
@@ -304,6 +322,7 @@ describe('features', function() {
 
     suitcss(input, {
       root: 'test/fixtures',
+      lint: false,
       // disable autoprefixer
       autoprefixer: {add: false, remove: false}
     }).then(function(result) {
@@ -317,6 +336,7 @@ describe('features', function() {
     var output = '.test { -webkit-filter: blur(1px); filter: blur(1px) }';
 
     suitcss(input, {
+      lint: false,
       autoprefixer: {
         browsers: 'Chrome 50'
       }
@@ -349,15 +369,15 @@ describe('cli', function() {
   });
 
   it('should read from a file and write to stdout', function(done) {
-    exec('node bin/suitcss -c test/noautoprefixer.config.js test/fixtures/cli/input.css', function(err, stdout) {
+    exec('node bin/suitcss -L -c test/noautoprefixer.config.js test/fixtures/cli/input.css', function(err, stdout) {
       if (err) return done(err);
       expect(stdout).to.equal(output);
       done();
     });
   });
 
   it('should read from stdin and write to stdout', function(done) {
-    var testChild = exec('node bin/suitcss -c test/noautoprefixer.config.js', function(err, stdout) {
+    var testChild = exec('node bin/suitcss -L -c test/noautoprefixer.config.js', function(err, stdout) {
       if (err) return done(err);
       expect(stdout).to.equal(output);
       done();