Setup Stylelint v16 for CSS-in-JS

Install Stylelint & generate config#

1
npm init stylelint

または

1
pnpm create stylelint

など、セットアップ用のコマンドが用意されている。

https://stylelint.io/user-guide/get-started

Setup config for CSS-in-JS#

公式ドキュメントを参照しつつ、CSS-in-JS 用に次のような設定を行った。

1
// `.stylelintrc`
2
{
3
  "customSyntax": "postcss-styled-syntax",
4
  "extends": "stylelint-config-recommended",
5
  "rules": {
6
    "media-query-no-invalid": null
7
  }
8
}

postcss-styled-syntax#

Emotion や styled-components の記法をサポートとした customSyntax のパッケージ。

npm: postcss-styled-syntax

これを利用すると、css メソッドや styled メソッド内の CSS がちゃんと評価されるようになる。

inline comment `//` error#

通常 Inline comment はエラーになる。stylelint でサポートすること自体は可能だが、CSS 標準に従った方がいいと思われる。postcss-styled-syntax でも同様に書かれており、意図しない挙動をする可能性がある。

media-query-no-invalid#

メディアクエリ用のルールは、テンプレートリテラルが入っているとエラーを出す。恐らく対応する手段がないので無効化した。

1
<div
2
  css={css`
3
    @media (width < ${theme.breakpoints.md}px) {
4
      display: flex;
5
    }
6
  `}
7
/>

Run script#

走らせるスクリプトを次のように設定した。

1
{
2
  "scripts": {
3
    "lint:css": "stylelint '**/*.{ts,tsx,css}'"
4
  }
5
}

Setup VSCode settings#

VSCode では、CSS-in-JS 用に設定が必要である。次のように Stylelint plugin が tsx や ts ファイルも対象に取るように設定した。

1
{
2
//"stylelint.customSyntax": "postcss-styled-syntax",
3
  "stylelint.validate": ["css", "typescript", "typescriptreact"]
4
}