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がdeprecatedになるため、新しいsyntaxを開発する必要があると議論がされています。
customSyntax for Stylelint v14+ #3897
ベースにpostcss-litをしたらどうかやstyled-component用に新しく開発が進んでいるようです。postcss-styled-components
試しにpostcss-styled-componentsを使ってみると正常にエラー検知してくれるものとしてくれないものがあったので、もう少し様子見をしたいなと思います。