K+C Stylelint config

The AR recommended shareable config for stylelint.

It turns on all the possible errors rules within stylelint based on our CSS styleguide.

Use it as is or as a foundation for your own config. It will mainly be used within the AR foundation boilerplates.

Installation

npm install -D @kinandcarta/stylelint-config

Usage

If you've installed ar-stylelint-config locally within your project, just set your stylelint config to:

{
  "extends": "@kinandcarta/stylelint-config"
}

If you've globally installed @kinandcarta/stylelint-config using the -g flag, then you'll need to use the absolute path to @kinandcarta/stylelint-config in your config e.g.

{
  "extends": "/absolute/path/to/@kinandcarta/stylelint-config"
}

You can also simply use the globally installed configuration name instead of the absolute path:

{ "extends": "@kinandcarta/stylelint-config" }

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, turn off the block-no-empty rule, and add the unit-whitelist rule:

{
  "extends": "@kinandcarta/stylelint-config",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends"
      ]
    }],
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Complementary tools

Editor plugins

• Ale: A Vim plugin that supports stylelint.
• Flycheck: An Emacs extension that supports stylelint.
• linter-stylelint: An Atom plugin for stylelint.
• SublimeLinter-stylelint: A Sublime Text plugin for stylelint.
• SublimeLinter-contrib-stylelint_d: A Sublime Text plugin for stylelint that run's on daemon.
• vscode-stylelint: A Visual Studio Code extension for stylelint.

Editors

• WebStorm: Version 2016.3 onwards has built-in support for stylelint.

Find stylelint rules

Find stylelint rules that are not configured in your stylelint config. This is useful to see what else is new and what is deprecated or updated.

Running this in your root folder will show the list.

npx stylelint-find-rules

More info here https://github.com/alexilyaev/stylelint-find-rules

Changelog