GitHub a supprimé son runtime CSS-in-JS à coups de flags, de shims — et d'agents IA pour la finition

En 2023, le nombre de composants sur certaines pages GitHub explosait, et la solution CSS-in-JS existante en subissait le coût : les chargements initiaux de page ralentissaient à mesure que les styles s'initialisaient côté client, le rendu côté serveur se dégradait à mesure que la collecte des styles basculait côté serveur, et les mises à jour de styles devenaient incontrôlables. L'équipe Primer a décidé de régler le problème à la source avec une contrainte stricte : rien ne devait casser GitHub pendant la migration.

La réponse fut les CSS Modules : des fichiers CSS natifs colocalisés avec chaque composant, sans aucun runtime côté client ni côté serveur. Le format étant radicalement différent, l'équipe a migré composant par composant : ajouter une feuille de styles traduite, placer le composant derrière un flag basculant entre anciens et nouveaux styles, vérifier par des captures de régression visuelle que les pixels étaient identiques, puis déployer le flag auprès de l'équipe, puis du personnel, et enfin de tout le monde. En décembre 2024, tous les composants Primer étaient migrés, avec des pages rendues côté serveur 55 % plus vite et des composants s'initialisant 25 % plus vite.

La moitié la plus difficile était le propre codebase de GitHub, où la prop sx avait été la norme de stylisation pendant des années — des milliers d'occurrences bloquant le passage à @primer/react sans runtime. L'équipe a construit @primer/styled-react, un paquet enveloppe transitif qui permet au code utilisant sx d'importer les mêmes composants à travers lui, tandis que tout le reste importe le chemin rapide.

La conversion s'est ensuite déroulée paquet par paquet : à un pic d'environ 7 760 props sx à migrer en avril 2025, un plugin VS Code et un codemod interne ont fait l'essentiel du travail, et 8 ingénieurs ont déplacé 6 419 props en six mois, avec des gains de SSR de 1 % à 22 % par page. En avril 2026, deux ingénieurs assistés d'agents de codage Copilot ont ramené les 895 restantes à zéro en trois semaines ; en juin 2026, GitHub tournait à 100 % sur CSS Modules, sx, styled-components et styled-system ayant tous disparu.

Migrer derrière des feature flags avec des captures de régression visuelle ; un paquet enveloppe transitif maintient le fonctionnement des consommateurs legacy de sx tandis que les nouveaux imports bénéficient de la vitesse.

Le coût d'exécution du CSS-in-JS augmentait avec la complexité des pages, si bien que la correction devait supprimer le runtime lui-même plutôt que de l'optimiser.

Les feature flags et les captures de régression visuelle rendaient chaque étape de migration réversible et identique au pixel près, ce qui a permis à une équipe de système de design de modifier des composants dont d'autres équipes dépendaient.

Le paquet enveloppe @primer/styled-react a découplé les deux migrations : l'intérieur des composants pouvait se moderniser tandis que des milliers d'appels à sx restaient intacts jusqu'à leur tour.

Les codemods, un plugin VS Code dédié et enfin les agents de codage Copilot ont transformé un pensum de 7 760 props en un travail largement automatisé, achevé par deux personnes.

Les systèmes de design sont le véhicule le moins coûteux pour un changement à l'échelle de la plateforme : corrigez les composants et le produit suit — avec des flags et des tests par captures, même une migration de plusieurs années ne casse jamais la production.

GitHub tourne entièrement sur CSS Modules depuis juin 2026. Les garde-fous mis en place pour la migration — flags, captures, déploiements progressifs — ont porté quatre ans de changement d'architecture sans aucune rupture de production, et le même mode opératoire soutient désormais les futurs travaux de la plateforme Primer.