styled-components で production ビルド時でも devtool から CSSいじれるようにする

2526 ワード
styled-components styled-components テキストリンク

2020/06/25 追記
Chrome 85でこちら解消される模様です。
https://developers.google.com/web/updates/2020/06/devtools

ステージング環境で production ビルドしつつ、CSSはこまかい修正確認する時にいじれるといいなあ、ということがあったので対応した際のメモ。

中身としては、こちらの記事の SC_DISABLE_SPEEDY を補強する感じになる。
https://terrier.dev/blog/2019/20190224165710-production-styled-components-chrome-devtool/

まず事象として Production ビルドした時に devtool から要素のスタイルを見るとこんな感じになっていじれない。

これは styled-components がプロダクションビルド時に CSSOM API なるものからCSSを追加しており、その際にいじれなくなるchromiumのバグ(仕様？)らしい。
https://stackoverflow.com/questions/51544215/styled-component-styles-are-disabled-in-chrome-devtools
https://bugs.chromium.org/p/chromium/issues/detail?id=387952

この最適化を止めるためには SC_DISABLE_SPEEDY というフラグをグローバル変数として定義してあげれば良い。

まず今回の方法を試すためには styled-components のバージョン 4.1.0 以上が必要になる。リリースノートを見る限りこのバージョンから追加されたっぽいからだ。
https://www.styled-components.com/releases#v4.1.0

次に指定の仕方だが、entryファイルに直接書いておいてもいいらしいが、私は webpack の DefinePlugin を使った。pluginsの中に次のように指定した。

new webpack.DefinePlugin({
  SC_DISABLE_SPEEDY: isStaging
}),

これで devtool からいじれるようになった