Sassyブログ

埼玉県在住のシステムエンジニアです。多ジャンルなブログですが、基本的にはIT関連の内容を中心に他のちょいちょい他ジャンルの記事も発信していきます。

stylelint v13 → v14へマイグレーションしました

f:id:y_saiki:20211109125749p:plain

先々週から開発タスクをやりながらstylelint v14へのマイグレーションを少しづつ行なっていました。

SCSSを使っている方なら手順書にサンプルが記載されているのですんなり移行できるのではないかなと思いますが、 私の場合ですとCSS-in-JSで開発をしており、CSS-in-JSをstylelint使ってlintをできるようにするのに手順書に具体的なアプローチ方法がなかったので苦戦しつつもやり遂げたので以降に関するポイントをご紹介していけたらと思います。

公式サイトのマイグレーション移行手順はこちらです。

stylelint.io

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をインストールしてみます。

github.com

$ 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-jsgithubのドキュメントをようくみてみたらpostcss-syntaxをインストールしてみました。

$ yarn add -D postcss-syntax

再度stylelintを実行してみると、postcss-jsxが必要ということだったのでインストールします。

$ yarn add -D postcss-jsx

これで再度実行してみたところCssSyntaxErrorが消えました!

あとは削除されたルールや追加されたルールがあるので、CssSyntaxError以外のエラー箇所の対応をしていけば対応完了です。

ここまで行き着くのに少し時間かかりましたが、今後CSS-in-JSで開発をしておりstylelintをv14~にあげようという方の助けになれれば幸いです。