💡

StylelintでCSS-in-JSをlintする時にハマったこと

に公開
Storybook
PostCSS
Stylelint
tech

ハマったポイント

Next.jsのアプリを作ってる時にStylelintとStorybookを同時に入れたら下のようなエラーが出た。

TypeError: Cannot read properties of undefined (reading 'stringify')
    at Function.stringify (#####/node_modules/postcss-syntax/stringify.js:8:38)
    at MapGenerator.generate (#####/node_modules/stylelint/node_modules/postcss/lib/map-generator.js:323:12)
    at LazyResult.stringify (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.runAsync (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:443:17)
    at LazyResult.async (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (#####/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:206:17)

結論

package.jsonに次の内容を足す。

{
  "resolutions": {
    "stylelint/postcss": "8.4.14"
  }
}

※ resolutionsはyarnでしかサポートされていない機能なので、npmを使っている場合はnpm-force-resolutionsなどを使う必要がある。

解説(?)

イマイチわかってないが、postcss-syntaxとpostcssのバージョン不整合が問題っぽい？

2022年9月19日時点の最新のstylelintはpostcss@^8.4.16に依存しているが、これを8.4.14に変えると動くらしい。stylelintに依存しているpostcssのバージョンをresolutionsを使って強制的に8.4.14に固定している。

なぜStorybookを入れたらエラーが起こったのかは謎。

参考

https://github.com/postcss/postcss/issues/1767

GitHubで編集を提案

Discussion