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 からいじれるようになった
