posted: 2019/02/24

productionビルドするとstyled-componentsでChromeのdevtoolから値がいじれない話とその解決

先日発見したのだが、styled-componentsをproductionモードでビルドするとchromeのdevtool上からいじれないらしい。

結論(解決法)

devtoolから編集することを求めている場合はdevelopmentモードでビルドするか、SC_DISABLE_SPEEDYをつけてビルドしよう。

詳細(なぜそうなるのか?)

styled-componentsは下記のような形でビルドモードを切り分けている
makeBrowserTagmakeSpeedyTagを読み解くのはなかなか難しいのだが微妙にCSSのルール挿入の仕方が変わっている。(この詳細まで調べたかったが、残念ながら読み解ききれてない)
そしてchromiumにこれに関連しそうな下記のようなバグが報告されている。
dynamicにinsertされたCSSが編集不可であるというものだ。一方、スレッドの流れを見ていると修正されない可能性もありそうだ。
そして、これはSC_DISABLE_SPEEDYという変数をenvなどで与えることで変更することもできるようなので、productionモードは保ちつつこの挙動を変えたいという場合はこの値をビルド時にわたす手もありそうだ(これは未検証)
当然、パフォーマンスは落ちることが予測されるので、例えばstaging環境用にのみこのビルドをするなどが良いだろう。
Edit on Github