gulp-scsslint

SCSS-Lint plugin for gulp

gulp-scsslint

SCSS-Lint plugin for gulp.

scss-lint is a Ruby gem written by The Causes Engineering Team. This plugin wraps the scss-lint binary for gulp and provides default and failure reporters.

npm install gulp-scsslint --save-dev

This plugin requires Ruby and scss-lint to be installed. If you're on OS X or Linux you probably already have Ruby installed.

From a terminal:

ruby -v # test that Ruby is installed 
gem update --system && gem install scss-lint
var scsslint = require('gulp-scsslint');
var gulp = require('gulp');
 
gulp.task('lint', function() {
  gulp.src('styles/*.scss')
    .pipe(scsslint())
    .pipe(scsslint.reporter());
});

Use file globbing and pattern negation to exclude files that should not be linted (e.g. vendor files):

gulp.src(['styles/*.scss', '!styles/vendor.scss'])

If you use the same task for linting and sass transpilation, then gulp-filter can temporarily remove the vendor files from the pipe:

 
gulp.task('sass', function() {
  var gulpFilter = require('gulp-filter');
  var vendorFilter = gulpFilter('!styles/vendor.scss');
 
  gulp.src('styles/*.scss')
    .pipe(vendorFilter)           // temporarily filter out vendor.scss 
    .pipe(scsslint())
    .pipe(vendorFilter.restore()) // restore vendor.scss to the piped files 
    .pipe(sass())
    .pipe(gulp.dest('assets/css'));
});

But it's probably better to use two separate tasks:

gulp.task('lint', function() { ... });
gulp.task('sass', ['lint'], function() { ... });

Type: String

You can pass the path to your .scss-lint.yml file directly to the plugin, though if your config file uses the standard file name and location then SCSS-Lint will find it by default.

gulp.src('styles/*.scss')
  .pipe(scsslint('my-scss-lint.yml'))
});

Type: Object

For example:

scsslint({
  config: 'my-scss-lint.yml',
  bin: 'bundle exec scss-lint',
  args: ['--exclude=vendor.scss'] // see caveat below 
})

Type: String

Path to your .scss-lint.yml file. Default is .

Type: String

The scss-lint call signature. Default is scss-lint. In the context of bundler, bundle exec scss-lint might be preferable.

Type: Array

An array of additional arguments supported by scss-lint. See scss-lint --help for options.

For example:

args: ['--exclude=vendor.scss']

N.B.: Most options will conflict with this plugin or cause inconsistent results. For example, --exclude will cause an error to be emitted if all files passed to scss-lint are excluded; and excluded files will be marked us as successfully linted: excluded_file.scsslint = {success: true}. Use these options with caution.

N.B.: Options should not include a space between the option property and the value.

Adds the following properties to the file object:

  file.scsslint.success = true; // or false 
  file.scsslint.errorCount = 0; // number of errors returned by SCSS-Lint 
  file.scsslint.results = []; // SCSS-Lint errors 

The objects in results have all the properties of the issue tags in SCSS-Lint's XML output, for example:

file.scsslint.results = [{
  'line': 123,
  'column': 10,
  'severity': 'warning', // or `error` 
  'reason': 'a description of the error'
}]

The default reporter logs SCSS-Lint warnings and errors using a format similar to SCSS-Lint's default.

stuff
  .pipe(scsslint())
  .pipe(scsslint.reporter())

Example output:

test/fixtures/error.scss:3 [E] Invalid CSS after "  font": expected ";", was ":"
test/fixtures/warning.scss:2 [W] Color `black` should be written in hexadecimal form as `#000`

By default, only program errors cause errors to be emitted on the stream. If you would also like SCSS-Lint warnings and errors to cause errors to be emitted on the stream (for example, to fail the build on a CI server), use the 'fail' reporter.

This example will log the errors using the default reporter, then fail if SCSS-Lint found any issues in the SCSS.

stuff
  .pipe(scsslint())
  .pipe(scsslint.reporter())
  .pipe(scsslint.reporter('fail'))

Custom reporter functions can be passed as scsslint.reporter(reporterFunc). The reporter function will be called for each linted file that includes an error or warning and passed the file object as described above.

If the custom reporter returns non-falsey, the returned value will be provided to the stream callback and will generate an error.

var scsslint = require('gulp-scsslint');
var gulp = require('gulp');
var gutil = require('gulp-util');
 
var myReporter = function(file) {
  gutil.log(file.scsslint.errorCount + ' errors');
};
 
gulp.task('lint', function() {
  return gulp.src('styles/*.scss')
    .pipe(scsslint())
    .pipe(scsslint.reporter(myReporter));
});

See src/reports.js for more detailed examples.