`fix: true` + .stylelintignore results in ignored files content replaced with `[]`

[orionrush]

I'm currently trying to pass my s/css files through gulp-stylelint using the fix: true flag. I also have a .stylelintignore file which ignores vendor style directories. The following gulpfile.js script successfully lints files, but when it comes to the files in the ignored directories, the contents are stripped and replaced with []. I was expecting that these files would be ignored (unaltered).

I haven't had enough experience with gulp to tell if this is expected behaviour, or if this is an issue with the implementation of my script, or some sort of buffer/stream issue with gulp or gulp-stylelint, OR if the issue lies with stylelint itself. This said, I noticed a comment in gulp-stylelint src/index.js line 155 which makes me think that gulp-stylelint is a good place to start:

  function onStreamEnd(done) {
    Promise
     ...
        process.nextTick(() => {
          // if the file was skipped, for example, by .stylelintignore, then res.results will be []
          const errorCount = lintResults.filter(res => res.results.length).reduce((sum, res) => {
     ...

The pattern [] referenced is exactly what I'm seeing. Any insight into how to fix this?

Many thanks in advance.

---

//.stylelintignore

/styles/scss/vendor/

//.stylelintrc

{
  "plugins": [
   "stylelint-scss"
  ],
  "extends": [
        "stylelint-config-recommended-scss"
  ],
  "rules": {
        "no-descending-specificity": null
  }
}

//gulpfile.js
const { src, dest, task, watch, series, parallel } = require("gulp");
const stylelint = require("gulp-stylelint");

function lint_styles(done) {
    src("./styles/**/*")
        .pipe(
            stylelint({
                reporters: [{ formatter: "string", console: true }],
                fix: true,
            })
        )
        .pipe(dest("./styles/"));
    done();
}

task("lintStyles", lint_styles);

[orionrush]

Just to see if running stylelint as a postcss plugin would produce similar results, I found that the .stylelintignore is not honoured at all. Possibly related to this. That issue was closed, by postcss as the recommendation was to use stylelint as a stand-alone tool, or with gulp-stylelint–– namecheck!

For anyone that is curious, here is what I tried:

const { src, dest, task, watch, series, parallel } = require("gulp");
const 
    stylelint = require("stylelint"),
    reporter = require("postcss-reporter"),
    postcssSass = require("postcss-sass");

var stylePrefs = {
    syntax: require("postcss-scss"),
    processor: [stylelint({ fix: true, ignoreFiles: ["/styles/scss/vendor/"] }), reporter({ clearReportedMessages: true })],
}

function lint_styles(done) {
    src("./styles/**/*")
        .pipe(plumber())
        .pipe(
            postcss(stylePrefs.processor, {
                syntax: stylePrefs.syntax,
            })
        )
        .pipe(dest("./styles/"));
    done();
}

task("lintStyles", lint_styles);

Just to be through(hopefull) I also tried different combinations of the ignoreFiles: ["./styles/scss/vendor/"] flag to no avail.

One nice bonus of using gulp-stylelint is that the console error formatting is much nicer! so I hope we can find a way through this.

[mattcasey]

I solved it for now using a custom formatter. You can also filter out warnings this way:

const stylelint = require('stylelint');

gulp.src( sourcePath('styles.scss') )
  .pipe(gulpStylelint({
      reporters: [
        {
          console: true,
          // https://github.com/stylelint/stylelint/blob/master/docs/developer-guide/formatters.md
          formatter: function (results) {
            const filtered = results.filter(r => {
              // ignore bootstrap src
              if (/bootstrap/.test(r.source)) {
                return false;
              }
              r.warnings = r.warnings.filter(w => w.severity === 'error');
              return r.warnings.length > 0;
            });
            return stylelint.formatters.string(filtered);
          }
        }
      ]
    })

[markleppke]

I tried using the custom formatter above. No luck in our environment. Simply doesn't work. Any news on gulp-stylelint getting future updates? Seems like gulp and it's ecosystem is dying... Do i need to switch to webpack?

[ajiho]

gulp.task('fix-css', function () {

    return gulp
        .src([
            'src/scss/**/*.scss',
            //Exclude the same directory as in the `.stylelintignore` file
            '!src/scss/plugins-override/*.scss',
        ])
        .pipe(gulpStylelint({
            fix: true,
        }))
        .pipe(gulp.dest('src/scss'));

});

[ronilaukkarinen]

I tried using the custom formatter above. No luck in our environment. Simply doesn't work. Any news on gulp-stylelint getting future updates? Seems like gulp and it's ecosystem is dying... Do i need to switch to webpack?

This repository is abandoned. Use my fork, see the comment here.