Integrate Stylelint with Prettier and Styled-components

What is Stylelint?

Stylelint is literary a linter for CSS. It checks your CSS based on setting rules and formats them if needed.

Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
It’s mighty as it:
・has over 170 built-in rules for modern CSS syntax and features
・supports plugins so you can create your own rules
・automatically fixes problems where possible
・is well tested with over 15000 unit tests
・supports shareable configs that you can extend or create
・is unopinionated so that you can customize it to your exact needs
・complements pretty printers like Prettier
・has a growing community and is used by Google, GitHub and WordPress

Install and settings

First, Install the necessary packages and create .stylelint.json.

npm install --save-dev stylelint stylelint-config-standard

or 

yarn add -D stylelint stylelint-config-standard

// .stylelint.json

{
  "extends": ["stylelint-config-standard"]
}

Actually, that’s all to start using Stylelint. You can run lint check and format by the following commands. Stylelint can run with no settings, so you can add your favorite rules one by one. But generally, we use config files that already have multiple defined rules. In this example, I set stylelint-config-standard provided from Stylelint official to extends.

Lint check

stylelint "**/*.css"

Format

stylelint "**/*.css" --fix

Work with Prettier

If you are using Prettier, There will be a conflict between Prettier and Stylelint. When you format CSS by either’s rule, then the other complains. To avoid this mess, use the following config file. That is recommended by both officials of Prettier and Stylelint.

stylelint-config-prettier

npm install --save-dev stylelint-config-prettier

or 

yarn add -D stylelint-config-prettier

// .stylelint.json

{
-   "extends": ["stylelint-config-standard"]
+   "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

Now Stylelint formats CSS without violating Prettier settings.

Settings for Styled-components

We need to help Stylelint to read CSS written inside Styled-components. stylelint-processor-styled-components and stylelint-config-styled-components do the thing.

npm install --save-dev stylelint-processor-styled-components stylelint-config-styled-components

or 

yarn add -D stylelint-processor-styled-components stylelint-config-styled-components

// .stylelint.json 

{
-   "extends": ["stylelint-config-standard", "stylelint-config-prettier"],

+   "extends": [
+       "stylelint-config-standard", 
+       "stylelint-config-prettier", 
+       "stylelint-config-styled-components"
+   ],
+   "processors": ["stylelint-processor-styled-components"],
}

CustomSyntaxの設定

One more step. This error happens if you run Stylelint.

When linting something other than CSS, you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js", and use the "customSyntax" option

This is because we write SCSS-like CSS inside Styled-components, so CustomSyntax needs to be set.

npm install --save-dev postcss-scss

or 

yarn add -D postcss-scss

// .stylelint.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-styled-components"
  ],
  "processors": [
    "stylelint-processor-styled-components"
  ],
+  "customSyntax": "postcss-scss"
}

Finally, Stylelint works with Styled-components.

Stylelint doesn’t Format CSS in Styled-components

There is only one disadvantage to using Stylelint with Styled-components.

It is that Stylelint can not format CSS written in Styled-components.

You need to fix all lint errors by yourself.