GitHub hat seine CSS-in-JS-Laufzeit mit Flags, Shims – und KI-Agenten für den Rest – abgeschafft

Bis 2023 explodierte die Zahl der Komponenten auf einigen GitHub-Seiten, und die bestehende CSS-in-JS-Lösung zahlte dafür: Erste Seitenaufrufe verlangsamten sich, weil Stile auf dem Client initialisiert wurden, serverseitiges Rendering verschlechterte sich, als die Stilsammlung auf den Server verlagert wurde, und Stilaktualisierungen gerieten außer Kontrolle. Das Primer-Team beschloss, das Problem an der Wurzel zu beheben, mit einer harten Vorgabe: Während der Migration durfte nichts an GitHub kaputtgehen.

Die Antwort waren CSS Modules: native CSS-Dateien, die neben jeder Komponente liegen, ganz ohne Client- oder Server-Laufzeit. Da das Format grundlegend anders war, migrierte das Team Komponente für Komponente: ein übersetztes Stylesheet hinzufügen, die Komponente hinter ein Flag stellen, das zwischen alten und neuen Stilen umschaltet, mit Visual-Regression-Snapshots verifizieren, dass die Pixel identisch waren, dann das Flag für das Team, für die Mitarbeitenden und schließlich für alle ausrollen. Bis Dezember 2024 war jede Primer-Komponente migriert, wobei Seiten 55 % schneller serverseitig gerendert und Komponenten 25 % schneller initialisiert wurden.

Die schwierigere Hälfte war GitHubs eigener Codebestand, in dem die sx-Prop jahrelang der Styling-Standard gewesen war – Tausende Instanzen blockierten den Wechsel zu dem laufzeitfreien @primer/react. Das Team baute @primer/styled-react, ein transitives Wrapper-Paket, das es Code, der sx verwendet, ermöglicht, dieselben Komponenten darüber zu importieren, während alle anderen den schnellen Pfad importieren.

Die Konvertierung lief dann Paket für Paket: Bei einem Höchststand von etwa 7.760 zu migrierenden sx-Props im April 2025 erledigten ein VS-Code-Plugin und ein internes Codemod den Großteil der Arbeit, und 8 Ingenieure verschoben 6.419 Props in sechs Monaten mit SSR-Gewinnen von 1 % bis 22 % pro Seite. Im April 2026 brachten zwei Ingenieure mit Copilot-Coding-Agenten die verbleibenden 895 in drei Wochen auf null; bis Juni 2026 lief GitHub zu 100 % auf CSS Modules, wobei sx, styled-components und styled-system alle verschwunden waren.

Migration hinter Feature-Flags mit Visual-Regression-Snapshots; ein transitives Wrapper-Paket hält bestehende sx-Nutzer funktionsfähig, während neue Importe die Geschwindigkeit erhalten.

Die Laufzeitkosten von CSS-in-JS skalierten mit der Seitenkomplexität, daher musste die Lösung die Laufzeit selbst entfernen, statt sie zu optimieren.

Feature-Flags plus Visual-Regression-Snapshots machten jeden Migrationsschritt umkehrbar und pixelidentisch, was es einem Designsystem-Team ermöglichte, Komponenten zu ändern, von denen andere Teams abhingen.

Der @primer/styled-react-Wrapper entkoppelte die beiden Migrationen: Das Innere der Komponenten konnte modernisiert werden, während Tausende sx-Aufrufstellen bis zu ihrer Reihe unberührt blieben.

Codemods, ein spezielles VS-Code-Plugin und schließlich Copilot-Coding-Agenten verwandelten eine mühsame Arbeit mit 7.760 Props in überwiegend automatisierte Arbeit, die von zwei Personen abgeschlossen wurde.

Designsysteme sind das günstigste Vehikel für plattformweite Veränderungen: Man repariert die Komponenten, und das Produkt folgt – mit Flags und Snapshot-Tests bricht selbst eine mehrjährige Migration nie die Produktion.

GitHub läuft seit Juni 2026 vollständig auf CSS Modules. Die für die Migration geschaffenen Schutzmaßnahmen – Flags, Snapshots, gestaffelte Rollouts – trugen vier Jahre architektonischer Veränderung ohne Produktionsausfälle, und dasselbe Vorgehen stützt nun künftige Arbeiten an der Primer-Plattform.