Stylelint is a great new modern unopinionated CSS linter. It's a must for any project beyond test.html.
After my last post about always adding generic font families I thought it should be a lint-able thing. So I looked into extending Stylelint. You can write new lint rules and tell Stylelint to use them. In my case, I thought requiring generic font families was broad enough that it should probably be a part of Stylelint core.
Running Stylelint in your project
Installing Stylelint is actually not required in order to contribute a new rule, but hey!
As one would expect in this day and age..
$ npm install -g stylelint
Running Stylelint requires a config. Remember, it's unopinionated, you have to express your opinion. I think the best place to start is using the example config which is actually a separate project, stylelint-config-standard
$ cd /your/project/root $ curl https://raw.githubusercontent.com/stylelint/stylelint-config-standard/master/index.js > styelint.config.js
And now, linting...
$ stylelint src/*.css
Oh boy, a new todo!
Running Stylelint on any old CSS
If you're like me, you have a lot of stuff all over the place. Not necessarily nicely setup as a project with a build script and all that. I want to lint a CSS no matter where it may reside.
So a globaly accessible config is in order. (Stylelint CLI itself is already global.) One that doesn't have dependencies.
cd ~/ # same as above, grab the "standard" config $ curl https://raw.githubusercontent.com/stylelint/stylelint-config-standard/master/index.js > styelint.config.js
The "standard" config depends on the "recommended", so I just grab the rules from it and paste them in styelint.config.js. In effect I merely inline the dependency. My styelint.config.js now looks like...
"use strict"
module.exports = {
"rules": {
"at-rule-no-unknown": true,
"block-no-empty": true,
"color-no-invalid-hex": true,
....
Now I can run $ stylelint whatevs.css no matter if whatevs.css is part of any specific setup or just cluttering the Desktop.
