GitHubがCSS-in-JSを全廃、SSRを55%高速化したCSS Modules移行の全貌

• 事実と背景：GitHubがPrimerデザインシステムからCSS-in-JSを排除し、CSS Modulesへの完全移行を完了した。
• 技術的変革：ランタイムコストをゼロにし、SSR時間を55%、コンポーネント初期化時間を25%削減することに成功。
• 現場への影響：動的スタイリングの代償であるパフォーマンス低下に悩む開発者は、CSS ModulesやCSS変数への回帰を検討すべき。

我々フロントエンドエンジニアは、いつから「CSSをJavaScriptで書くこと」を当たり前だと錯覚していたのだろうか。styled-componentsに代表されるCSS-in-JSは、コンポーネント指向開発において、カプセル化と強力な型安全性を同時にもたらす「魔法の杖」のように見えた。しかし、その魔法の代償として支払っていたランタイムコストが、ついに無視できないレベルに達したというのが、今回のGitHubの決断が示す冷酷な現実である。

GitHubのUIを支える「Primer Design System」において、2023年頃からコンポーネントの数が爆発的に増加した。これに伴い、彼らの開発現場では深刻なパフォーマンスのデッドロックが発生していた。具体的には、クライアント側でのスタイル初期化による初期ページロードの遅延、スタイル収集処理のオーバーヘッドによるサーバーサイドレンダリング（SSR）の性能低下、そしてページ内のコンポーネント数増加に伴うスタイル更新処理の破綻である。Shopifyが2026年の調査（Related Global Insight 3）で指摘している通り、サイトスピードの低下はユーザー体験（UX）を著しく損ない、ビジネスのコンバージョンに直結する致命的な欠陥となる。GitHubほどの規模になれば、ミリ秒単位の遅延が数百万人の開発者の生産性を奪うことになるのだ。

そこでPrimerチームが下した決断は、CSS-in-JSという「動的ランタイム」を完全に捨て去り、ネイティブなCSSの力を活かす「CSS Modules」へ回帰することだった。CSS Modulesであれば、ビルド時に静的なCSSファイルへとコンパイルされるため、クライアントおよびサーバーでの実行時コストは完全にゼロになる。クラス名はデフォルトでローカルスコープ化されるため、グローバルな衝突の心配もない。彼らは、かつて「古臭い」と切り捨てられかけた技術に、モダンな設計思想を融合させることで、この難局を乗り越えようとしたのである。

数千ものコンポーネントが複雑に絡み合うGitHubの巨大なコードベースにおいて、スタイリング手法を一挙に置き換えることは、稼働中のエンジンを止めて飛行機を修理するようなものである。Primerチームが採用した戦略は、極めて現実的かつシステマチックな「段階的移行」であった。彼らはまず、既存のCSS-in-JSスタイルをCSS Modulesに変換した新しいファイルを作成し、フィーチャーフラグを用いて新旧のスタイルを本番環境で切り替えられるようにした。さらに、ビジュアルリグレッションテストを徹底的に行い、移行前後で1ピクセルのズレもないことを保証したのである。

この移行において最大の障壁となったのが、インラインで動的なスタイル変更を可能にしていたsxプロップの存在だ。これはTypeScriptとの親和性も高く、デザインシステムとの連携において非常に便利であったが、同時にランタイムコストの主犯格でもあった。GitHubはこのsxプロップを排除するため、一時的なブリッジとして@primer/styled-reactというラッパーライブラリを構築した。これにより、sxプロップに依存しているコンポーネントはラッパーを経由させつつ、依存のないクリーンなコンポーネントから順次、純粋なCSS Modules版の@primer/reactへと移行していくという、二重構造のアーキテクチャを実現した。

この泥臭いリファクタリングの過程で、技術の進化が移行を劇的に加速させた点は見逃せない。2025年4月に約7,760個存在したsxプロップの移行作業は、当初は8人のエンジニアがVS Codeプラグインや独自のコードモッドを駆使し、6ヶ月かけて6,419個を移行するという、人間の手による検証が必要なプロセスだった。しかし、2026年4月に作業を再開した際、彼らの手元には進化を遂げた「GitHub Copilot coding agents」があった。結果として、残された895個のsxプロップは、わずか2人のエンジニアとAIエージェントの協調により、たった3週間で完全にゼロにされたのである。これは、レガシーコードの近代化における「人間とAIの協働」の極めて理想的な成功事例と言えるだろう。

sxプロップの排除を完了したGitHubの前に立ちはだかった最後の砦が、「テーマ機能」のデカップリングであった。GitHubは7つの異なるテーマ（ハイコントラストモードを含む）をサポートしており、これらはすべてstyled-componentsのコンテキストを介して制御されていた。これを剥がすため、彼らはテーマ変数をCSS変数（カスタムプロパティ）として定義する@primer/cssへと移行し、JavaScriptによる動的なテーマ制御への依存を完全に断ち切った。2026年6月、GitHubは100% CSS Modules化を達成し、styled-componentsとその関連ライブラリはコードベースから完全に姿を消した。

このGitHubの「CSS回帰」は、Adobe Sites Optimizer（Related Global Insight 2）が提唱するような、Web標準の最適化によるパフォーマンス向上トレンドとも完全に合致する。我々エンジニアは、新しいフレームワークや抽象化レイヤーが登場するたびに、それを「銀の弾丸」として飛びつきがちだ。しかし、その抽象化がもたらすオーバーヘッドを正しく計測し、必要であれば「Web標準」という原点に立ち返る勇気を持つべきではないだろうか。

ここで我々が直面する未解決の問いがある。あなたのプロジェクトで使われているそのライブラリは、本当にそのランタイムコストに見合う価値を提供しているだろうか？「開発体験（DX）」の名の下に、ユーザー体験（UX）を犠牲にしてはいないだろうか？明日からの実践的な処方箋として、まずは自社プロダクトのLighthouseスコアやSSR時のCPUプロファイルを計測し、動的スタイリングが占める割合を可視化することをお勧めする。そして、CSS変数やCSS Modulesといった「枯れた技術」を再評価し、段階的な移行パスを設計するべきだ。流行を追うだけのエンジニアから脱却し、真に持続可能でパフォーマンスに優れたアーキテクチャを設計する時が来ている。