先々週から開発タスクをやりながらstylelint v14へのマイグレーションを少しづつ行なっていました。
SCSSを使っている方なら手順書にサンプルが記載されているのですんなり移行できるのではないかなと思いますが、 私の場合ですとCSS-in-JSで開発をしており、CSS-in-JSをstylelint使ってlintをできるようにするのに手順書に具体的なアプローチ方法がなかったので苦戦しつつもやり遂げたので以降に関するポイントをご紹介していけたらと思います。
公式サイトのマイグレーション移行手順はこちらです。
v14では以下の構文が含まれていないそうです。
Stylelint no longer includes the syntaxes that: parse CSS-like languages like SCSS, Sass, Less and SugarSS extract styles from HTML, Markdown and CSS-in-JS object & template literals
なのでstyled-componentsを使っているコードではCssSyntaxErrorがバンバン吐き出されます。
これはv14になって構文を解析するパーサーが除外されて自分のプロジェクトに合ったプラグインを別途インストールする必要になりました。
cssファイルは問題ないのですが、.js,.jsx, .ts, .tsx内に記載されているcssの場合はエラーとなります。
なのでCSSファイル以外の構文を解析してその中に記載されているcssを抽出できるようにしてあげます。
これもマイグレーションドキュメントに記載されています。
If you use Stylelint to lint anything other than CSS files, you will need to install and configure these syntaxes. We recommend extending a shared config that includes the appropriate PostCSS syntax for you.
ここまではどうにかわかったのですが、さてこれを自分のプロジェクトの場合はどうやってやるのだ？となりました。
SCSSはstylelint-config-standard-scssというプラグインをインストールして拡張してあげれば良いみたいですが、さてどうしたものか。
実際にエラーが出る状態でstylelintを実行してみます。
あまりにもコンソールに大量にエラーが出力されたので気づかなかったのですが、以下のメッセージが出力されていました。
When linting something other than CSS, you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js", and use the "customSyntax" option
なので@stylelint/postcss-css-in-jsをインストールしてみます。
$ yarn add -D @stylelint/postcss-css-in-js
postcss-css-in-jsはjs内に記述されているcssリテラルを解析できるようにする構文パーサーです。
これをインストール後にstylelintの設定ファイルに以下を追加してあげます。
customSyntax: '@stylelint/postcss-css-in-js/index.js'
再度stylelintを実行するとどうでしょうか？
状態が変わりませんでした…
ここからだいぶ苦戦したのですが、@stylelint/postcss-css-in-jsのgithubのドキュメントをようくみてみたらpostcss-syntaxをインストールしてみました。
$ yarn add -D postcss-syntax
再度stylelintを実行してみると、postcss-jsxが必要ということだったのでインストールします。
$ yarn add -D postcss-jsx
これで再度実行してみたところCssSyntaxErrorが消えました！
あとは削除されたルールや追加されたルールがあるので、CssSyntaxError以外のエラー箇所の対応をしていけば対応完了です。
ここまで行き着くのに少し時間かかりましたが、今後CSS-in-JSで開発をしておりstylelintをv14~にあげようという方の助けになれれば幸いです。
