Task lintCss always succeeds

[brendanfalkowski]

Problem

When the lintCss task encounters an error it also fires a success notification (it should not).

Steps to reproduce

• Run gulp watch
• Edit the file: /css/src/module/_thing.scss
• Type x on the last line + save
• This will fail to compile and trigger the linter

Expected outcome

1. Task css fails + fires an error OS notification
2. Task lintCss fails + fires an error OS notification

Actual outcome

1. Task css fails + fires an error OS notification
2. Task lintCss fails + fires an error OS notification
3. Task lintCss fires a success OS notification ❌

Video

[brendanfalkowski]

See: https://github.com/olegskl/gulp-stylelint

Tried these plugin options:

• failAfterError: true — no effect
• { reporters: [{ formatter: errorFormatter }] } — Using this repo's errorFormatter() as the formatter messes up the notify plugin
• fix: true — didn't fix the issue, but doesn't work in this task flow because the lintCss task always writes via gulp.dest() which triggers the css task (recursive loop)

[phated]

@brendanfalkowski I think we need to submit some PRs to that repository to split the linting and reporting into separate streams (similar to how gulp-eslint works). I'm really disappointed in the quality of gulp-stylelint 😭

[phated]

Is there a reason gulp-stylelint is needed over gulp-csslint? The csslint plugin looks to follow gulp patterns better (even though their formatter stream is a Through stream, they at least .resume it). I should actually submit a PR over to them to clean up that.

[brendanfalkowski]

@phated — Hmm, at the time, Stylelint seemed like the best choice (still does), even though the Gulp wrapper isn't top notch. I wrote a full ruleset for Stylelint, and appreciate how robust it is:

https://github.com/gravitydepartment/frontend-starter/blob/master/stylelint.config.js

I don't think CSS Lint is a viable choice anymore, except as-is.

• https://github.com/CSSLint/csslint/releases — Last release in 2016
• https://github.com/stylelint/stylelint/releases — Ongoing releases to date

Thanks for the insight on the Gulp side of it, but I'd rather keep an incorrect notifier than migrate back out of Stylelint. I'm happy to contribute the use case for a PR to gulp-stylelint, but I'd be wasted on the refactoring job.

Why I chose Stylelint (over CSS Lint)

As I remember it, Stylelint leap-frogged the work of CSS Lint and improved it across the board. So much so that the CSS Lint team decided to merge their work into Stylelint + consolidate the space (back in 2016, but didn't complete): CSSLint/csslint#668

Fast-forward to 2019, Stylelint still seems the better choice:

1. More rules — with more options.
2. Better docs — with examples of approving/negating.
3. SCSS rules — from my past colleague @kristerkari: https://github.com/kristerkari/stylelint-scss
4. Bigger community + more corporate use (FB + GitHub + WordPress).
5. More traction: https://www.npmtrends.com/css-lint-vs-csscomb-vs-csslint-vs-stylelint

Reference: the packages in question

CSS Lint

• Docs: https://github.com/CSSLint/csslint/wiki
• Gulp plugin: https://www.npmjs.com/package/gulp-csslint

Stylelint

• Docs: https://stylelint.io/user-guide/
• Gulp plugin: https://www.npmjs.com/package/gulp-stylelint

[phated]

That makes a lot of sense! I think it's probably worthwile to upgrade gulp-stylelint to the proper patterns. I wonder if the owner would want to contribute it to https://github.com/gulp-community and then maybe we could spend an "office hours" refactoring.