styled-componentsでスタイルが反映されない問題について

はじめに

フロントエンドエンジニアの関(@kur0buchi)です。

今回は styled-components で記述したはずのスタイルがうまく反映されていないという事象に数日間悩まされたのですが、最終的にあっけない解決方法だったので同じ悲しみを背負う開発者が少しでも減るよう記事に残します。

TR;DL

外部ライブラリやバージョン範囲指定の都合により複数バージョンの styled-components がインストールされている場合、一部のスタイルが無効化される場合がある。

前提

この記事の内容は React(Next.js) + TypeScript + styled-components の環境での事象です。
また、弊社ではプライベートレジストリに存在する社内コンポーネントライブラリを運用しているのですが、ここは適宜任意の外部ツールに置き換えてください。

事象

Next.js のバージョンを9から12まで上げる作業をしている際に、やっとこビルド完了までこぎ着けたあと、一部スタイルが崩れている箇所がありました。
(Next.js v9 → v12 の記事はすぐ出せそうなまとまったものがないので機会があれば……)

見ると社内ライブラリ上のコンポーネントのスタイルを読み込んで styled-components で上書きしているような箇所でのみ起こっているようで、loader 周りか？ babel ？styled-components の破壊的変更？と調べても解決策が得られず、途方に暮れていた頃でした。

解決

なんと styled-components で記述したスタイルが2つに分けて生成されていました。
これを見れば同じ要素に指定されたスタイルは下側に書かれたスタイルが適用されるのも一目瞭然です。

ここからまた調査を進めると、yarn.lock で依存関係を見るに2つのバージョンの styled-components がインストールされており、そのバージョンは上記の画像と一致することがわかりました。

styled-components@5.2.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.co...
  integrity sha512-9qE8Vgp8C5cpGAIdFaQVA...
  dependencies:
  ...
styled-components@^5.2.0:
  version "5.3.11"
  resolved "https://registry.yarnpkg.co...
  integrity sha512-uuzIIfnVkagcVHv9nE0VP...
  dependencies:
  ...

上側のバージョン固定されている方がアプリケーション上の package.json で指定しているバージョン、下側の Caret Range(^x.x.x) は社内コンポーネントライブラリで使っている際に指定しているバージョンです。
この2つの styled-components がそれぞれ振る舞い、時にブラウザ上であべこべに適用されているようでした。

今回の例では幸い競合先も自分の管轄なので、 styled-components のバージョンを揃えて無事解決と相成りました。

起きてることから検索する際のキーワードをどうするかも難しいからかいくら調べても情報が出てこずだったので、似たような事象が起こっている人がこの記事にたどり着き、解決のきっかけになったら幸いです。
(普通こんなことにはならないよって可能性もある……？)