Install Stylelint & generate config

npm init stylelint

または

pnpm create stylelint

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

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

Setup config for CSS-in-JS

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

// `.stylelintrc`
{
  "customSyntax": "postcss-styled-syntax",
  "extends": "stylelint-config-recommended",
  "rules": {
    "media-query-no-invalid": null
  }
}

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

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

<div
  css={css`
    @media (width < ${theme.breakpoints.md}px) {
      display: flex;
    }
  `}
/>

Run script

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

// package.json
{
  "scripts": {
    "lint:css": "stylelint '**/*.{ts,tsx,css}'"
  }
}

Setup VSCode settings

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

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