gulp-stylelint icon indicating copy to clipboard operation
gulp-stylelint copied to clipboard

Improve streams for Gulp 4

Open brendanfalkowski opened this issue 5 years ago • 4 comments

I think there's an opportunity to make gulp-stylelint more Gulp-like by splitting linting and reporting into separate streams.

I recently migrated my "frontend starter" repo from Gulp 3 to 4, and volunteered as the guinea pig for Gulp Office Hours where @phated helped diagnose some issues with error handling and notifications (for better dev experience).

I still have an issue with gulp-stylelint — this manifests as the linter always ending successfully, so the notifier always fires a success (in addition to any warning/error). There's a good discussion going on here, and it's important to me because Stylelint is the best maintained linter for CSS: https://github.com/gravitydepartment/frontend-starter/issues/4

@olegskl — Do you have any ideas for this? Or would you be interested in participating in another Gulp Office Hours session to refactor?

brendanfalkowski avatar Mar 26 '19 00:03 brendanfalkowski

I think I might run in the same issue here. I'm trying to make the reporter fail on warnings, in order to make the CI build fail. But unfortunately my custom reporter isn't able to make the pipe fail.

nirazul avatar Mar 27 '19 09:03 nirazul

@brendanfalkowski The plugin emits a PluginError which causes the stream to fail with non-zero code on errors by default. You can test it on https://github.com/olegskl/gulp-stylelint-test. I don't know how splitting the linting and reporting into separate streams may resolve the issue, but I'm willing to discuss it if does not involve the condescending tone I noticed in the linked issue.

@nirazul Perhaps you can use a different configuration for your CI that elevates severity of warnings?

olegskl avatar Apr 02 '19 20:04 olegskl

@olegskl — I'm not sure exactly how splitting the streams helps, but I'm just passing on the feedback from @phated to find a solution and document getting a nicer local dev experience for others to reference. Consider me just a loving user of these tools, but I don't have the same depth with JS streams as the creators.

Something is handled differently because in my Gulp 3 build gulp-stylelint would not reach the success notification if linter errors were encountered. Example events:

  1. Linter starts checking CSS
  2. Errors were found
  3. Errors are logged to the console
  4. Notification fires (to MacOS) of the error

In Gulp 4, the errors are reported but a success notifier also fires (right after the failing notifier).

  1. Linter starts checking CSS
  2. Errors were found
  3. Errors are logged to the console
  4. Notification fires (to MacOS) of the error
  5. Notification fires (to MacOS) of the success

I'm guessing this happens because the "lintCss" task is finishing, and that's what it's supposed to do when the linter runs and passes:

  1. Linter starts checking CSS
  2. All good
  3. Notification fires (to MacOS) of the success

This could very well be my Gulpfile's patterns or my error formatter. Both of them changed between Gulp 3 and 4, but my new build is using fewer packages and more native Gulp/Node functions.

I was hoping it was a simple config change, but the options I tried didn't help: https://github.com/gravitydepartment/frontend-starter/issues/4#issuecomment-475828151

brendanfalkowski avatar Apr 04 '19 19:04 brendanfalkowski

@olegskl I would prefer to keep one single configuration as I do with gulp-eslint. I think the only thing that needs to change is to take into consideration the --max-warnings flag of stylelint.

nirazul avatar Apr 05 '19 08:04 nirazul