How can i lint my styles by using gulp-sass and gulp-stylelint

Question

I have several SASS files that should be compiled separately. I want to lint theirs and also theirs "imports"

I have some sass files:

// style.scss

@import "./styles/a.scss";

body {
  background-color: #FFF;
}


// styles/a.scss
h1 {
  font-size: 28px;
  color: #GGG; // invalid hex to test stylelint
}

I compile sass styles by gulp like this:

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');

function compileStyles(src, dest) {
  gulp.src(src)
    .pipe(plumber({
      errorHandler: console.error
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(dest));
}

compileStyles('src/style.scss', 'dest');

I would like to add stylelint here. I try do this by adding stylelint

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const gulpStylelint = require('gulp-stylelint');

function compileStyles(src, dest) {
  gulp.src(src)
    .pipe(plumber({
      errorHandler: console.error
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulpStylelint({
      failAfterError: true,
      reporters: [
        {formatter: 'string', console: true}
      ]
    }))
    .pipe(gulp.dest(dest));
}

compileStyles('src/style.scss', 'dest');

It's works, but stylelint process compiled styles. How can i apply stylelint before compiling, but include import statements.

score 0 · Answer 1 · answered Nov 21 '18 at 10:06

Create a separate task for linting your Scss files. You should have a task for compiling your styles and another for linting them. It is the attempt to combine these separate tasks into a single one that is causing the problem.

gulp.task('lint-styles', function lintStyles() {
  const gulpStylelint = require('gulp-stylelint');    
  return gulp
    .src('src/**/*.scss')
    .pipe(gulpStylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
    }));
});

gulp.task('compile-styles', function compileStyles() {
  const gulpSass = require('gulp-sass');    
  return gulp
    .src('src/style.scss')
    .pipe(gulpSass())
    .pipe(gulp.dest('dest'));
});

How can i lint my styles by using gulp-sass and gulp-stylelint

1 Answers1