@contactlab/stylelint-config

Contactlab Stylelint extensible and sharable configuration.

Inspired by @giotramu/stylelint-config package.

It supports CSS or PostCSS syntax and CSS-in-JS solutions, like Styled Components, Emotion.js or Linaria.

Warning! This package needs Stylelint v15 (or higher) which has deprecated some rules, removed Nodejs v12 support and made Prettier integration smoother.

Usage

Install the configuration as a npm package:

npm i -D @contactlab/stylelint-config

# --- OR ---

yarn add -D @contactlab/stylelint-config

and then add it as extension in your Stylelint configuration file:

{
  "extends": ["@contactlab/stylelint-config"]
}

In order to have support for CSS-in-JS tools, use the styled config as extension:

{
  "extends": ["@contactlab/stylelint-config/styled"]
}

CSS properties order

Stylelint Config sorts the CSS property declarations by grouping them in the following order:

1. Positioning
2. Box Model
3. Typography
4. Visual
5. Animation
6. Misc

Extend the configuration

You can extend the configuration or overrides some rules. More details about the loading mechanism are available in the Stylelint documentation.

{
  "extends": "@contactlab/stylelint-config",
  "rules": {
    "selector-id-pattern": null,
    "selector-class-pattern": null
  }
}

Integrating Stylelint with IDEs/editors

Visual Studio Code

1. install the Stylelint plugin;

2. add the following code to your .vscode/settings.json:

   {
     "css.validate": false,
     "scss.validate": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.stylelint": true
     },
     "stylelint.validate": ["css"] // Add the type of file you want to validate (e.g. ["css", "scss", "typescript", "typescriptreact"])
   }

3. highlight the CSS-in-JS syntax with the Styled Components plugin (optional)

References

• postcss-styled-syntax
• stylelint-declaration-block-no-ignored-properties
• stylelint-order