Hello Stylelint

October 1st, 2017. Tagged: CSS

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

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.

Tell your friends about this post on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov