yamakenji blog

stylelint v14でのcss in jsの対応

2023/01/03

2023/01/03

こんにちは、@yamakenjiです。
この前、フロントエンドの環境構築時にlinterを導入しようとした時に、CSS-in-JS(styled-component)関連で調査をしたのでそのまとめ。 @2023年1月3日時点での情報。現在活発に議論と開発が進んでいるため、情報が古くなると思います。

これまででは

これまではどうやって導入していたのかというところで、まずはstyled-componentの公式doc をみてみたいと思います。

docには、stylelint-processor-styled-componentsをインストールする記載がありますがこのライブラリはすでに archiveされており、deprecated扱いになっています。
docから無くすissueが2020年に立ち上がっていますが未だopenの ままのようです。

styled-componentのようなCSS-in-JSで動かすには今までは以下のようなことをおこなってきました。

npm install -D stylelint stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js
// stylelint.config.js
module.exports = {
  extends: 'stylelint-config-standard',
  overrides: [
    {
      files: ['**/*.{js,jsx,ts,tsx}'],
      customSyntax: '@stylelint/postcss-css-in-js'
    }
  ]
}

ただし、@stylelint/postcss-css-in-jsが近い将来deprecatedになることがわかっています。
Deprecate package #225
また、stylelint v14系からvanilla CSS以外は構文解析するために別途インストールする必要があります。
syntax option and automatic inferral of syntax

@stylelint/postcss-css-in-js以外の対応

@stylelint/postcss-css-in-jsがdeprecatedになるため、新しいsyntaxを開発する必要があると議論がされています。
customSyntax for Stylelint v14+ #3897
ベースにpostcss-litをしたらどうかやstyled-component用に新しく開発が進んでいるようです。postcss-styled-components

試しにpostcss-styled-componentsを使ってみると正常にエラー検知してくれるものとしてくれないものがあったので、もう少し様子見をしたいなと思います。