302文字
2分
編集

Setup Stylelint v16 for CSS-in-JS

#Stylelint

#Install Stylelint & generate config

bash
npm init stylelint

または

bash
pnpm create stylelint

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

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

#Setup config for CSS-in-JS

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

json
// `.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

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

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

#Run script

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

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

#Setup VSCode settings

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

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