【React/styled-component】stylelint v13からv14へスムーズに移行しよう
プロジェクトでstylelintをv13からv14へ移行した際に行ったことを備忘録として書きます
移行前の主要な構成
スタイリングでstyled-componentとscssファイルが混在している構成
node@v16.17.0
yarn@1.22.19
React@16.14.0
styled-components@5.2.0
stylelint@13.7.2
sass(dart-sass)@1.32.12
typescript@4.9
VSCode: vscode-stylelint@v0.87.6
アップデートの背景
ある日特に考えずにVSCodeの拡張機能のvscode-stylelintのバージョンを上げたが急にstylelintが動かなくなってしまった
公式のvscode-stylelintをのぞいたところ、stylelintもv14以上にしないといけなかったのでアップデートすることに
やったこと
stylelintの公式ドキュメントに移行ガイドがあったのでそれを参考にやってきます
stylelint
まずstylelintのverup
yarn add stylelint@14 -D
v14からcss以外のものをlintする場合、構文のインストールが必要になりましたのでドキュメント通りにやります
scss用に
yarn add postcss-scss -D
styled-component用に
yarn add postcss-syntax @stylelint/postcss-css-in-js -D
.stylelintrc
構文インストールも完了したので設定に追加していきます
overridesに追記していけばOK
overrides:
- files:
- "**/*.{css,scss}"
customSyntax: "postcss-scss"
- files:
- "**/*.{ts,tsx}"
customSyntax: "@stylelint/postcss-css-in-js"
vscodeのsettings.json
アプリケーションでlintしたいファイル種別を追記していく
styled-componentsを入れてるので"typescriptreact", "typescript"も入ってます
"stylelint.validate": ["typescriptreact", "typescript", "scss"],
これで移行手順は完了です！
想定通りならvscodeを立ち上げ直せばエディタ上での静的解析も行え、yarn stylelintでlintが走るはずです
が、自分はうまく行かなかったのでこっからはデバックです
lint実行してみるとしてみるがエラーがでてうまく動きません
stylelint TypeError: Cannot read properties of undefined (reading 'stringify')
解決方法
ググってみると↓に辿り着き、全てを解説してくれました
訳）
postcss-scssはpostcssをピア依存として期待し、あなたはそれを自分でインストールしておらず、他の依存関係のほとんどはpostcss@7を使っているので、そのバージョンはnode_modulesのルートに置かれますが、我々のpostcss-scssはpostcss@8を必要としています。
以下は、考えられる修正方法です：
postcss@8をプロジェクト依存としてインストールし、postcss-scssがトップレベルのpostcssとしてそれを選択できるようにする。
postcss@7を使用している他のすべての関連パッケージを、postcss@8が期待されるバージョンにアップデートする。
てのことなので
yarn add postcss@8 -D
ちゃんと動きました！
まとめ
おそらく詰まるとしたらcustomSyntaxの箇所かなと思います
nodeもv12~でないと動かないので注意ですね
これ見てスムーズに導入できたら幸いです
最終的な更新があったpackge.json
"stylelint": "^14.11.0",
"@stylelint/postcss-css-in-js": "^0.38.0",
"postcss": "8",
"postcss-scss": "^4.0.6",
"postcss-syntax": "^0.36.2",
Discussion