WIP - feat(compat): Check CSS and JS for browser compatibility

[nicolaisueper]

Summary

This PR will add the possibility to check the SCSS and JS sources for browser compatibility using eslint-plugin-compat and stylelint-no-unsupported-browser-features. The sources don't get checked for compat separately but inside the lint-tasks.

I also added a lintAll task, which just runs lint and lintStyles in parallel.

Usage

You may define your supported browser versions inside the browserslist file located at the project root. It defaults to "ie >= 11, > 0.5%, last 2 versions"

To run the checks either run:

• gulp lint or
• gulp lint -P or
• gulp lintAll or
• gulp lintAll -P

Behavior

The table below shows which plugin breaks the build on dev/prod.

plugin	breaks dev	breaks prod
eslint-plugin-compat	false	true
stylelint-no-unsupported-browser-features	false	false

Open issues

• [ ] Discuss this solution
• [ ] Discuss open questions

Open questions

• [ ] Should it break the build? Having a JS compatibility errors is more serious than a CSS error.
• [ ] Should we handle JS and CSS errors differently?
• [ ] Should it break the prod build only?
• [ ] Are polyfills covered? E.g. if I import 'core-js/es6/promise' anywhere, will the check throw an error when using promises?

[mischah]

Thanks ❤️

Hope to find the time to review that within the next couple of days.

FYI: I’ve just moved the open questions from the original issue #198 to this PR to make it easier to review this.

[nicolaisueper]

Are polyfills covered? E.g. if I import 'core-js/es6/promise' anywhere, will the check throw an error when using promises?

Answer: Yis. Ref: https://github.com/amilajack/eslint-plugin-compat/wiki/Adding-polyfills

I'm going to double check this now.

[dertuerke]

Please make eslint optional via config.

[mischah]

Hej @dertuerke,

this is not the place to request that. Feel free to open an issue. But I doubt that you will convince us to make that optional. Because it’s easy to disable in the gulpfile If one really wants to disable it. Must say that I really think you shouldn’t disable it.

[mischah]

Closing this as it doesn’t work out 😞

Reasons

1. The CSS linting plugin adds a lot of noise in form of warnings
2. The more important the ESLint plugin simply doesn’t work as expected. @nicolaisueper and me did just a handful of tests. ES6 methods like Object.assign() and String.prototype.padEnd() didn’t cause errors. Same for arrow functions. Plus, when something causes an error, the error remains when using a proper polyfill.