En juin 2026, GitHub a achevé la mise en production de son site entièrement avec CSS Modules, mettant fin à sa dépendance au CSS-in-JS, notamment à styled-components, styled-system et aux propriétés sx. L’entreprise affirme que cette transition a réduit le temps de rendu côté serveur de 55 %, tout en diminuant de 25 % le temps nécessaire à l’initialisation des composants sur la page.
Cette initiative répondait à l’augmentation du nombre de composants sur certaines pages de GitHub depuis 2023. L’ancienne solution nécessitait l’initialisation des styles côté client, augmentait le coût de collecte des styles pendant le rendu côté serveur et rendait les mises à jour de la mise en forme plus difficiles à mesure que le nombre de composants sur la page augmentait.
Pourquoi GitHub a-t-elle choisi CSS Modules ?
CSS Modules permet d’écrire les styles dans des fichiers CSS adjacents au code source du composant, tout en rendant les noms de classes locaux par défaut afin de réduire les collisions. Plus important dans ce cas, cette approche élimine la nécessité d’un comportement à l’exécution côté client ou côté serveur : les styles sont regroupés dans des fichiers CSS envoyés avec le HTML de la page.
La migration a commencé avec le système de design Primer. L’équipe a ajouté des fichiers CSS Modules pour chaque composant, relié les composants à des indicateurs de fonctionnalités permettant de basculer entre les deux approches, puis utilisé des tests de régression visuelle pour vérifier la correspondance des résultats. Le déploiement s’est ensuite étendu progressivement de l’équipe Primer aux employés de GitHub, puis à l’ensemble des utilisateurs.
En décembre 2024, tous les composants de Primer avaient migré vers CSS Modules. Mais cela ne suffisait pas, car de grandes parties de la base de code de GitHub utilisaient encore la propriété sx pour personnaliser les composants au moyen d’objets intégrés. Bien que cette méthode offre une bonne intégration avec TypeScript et les tokens de design, sa nature dynamique augmentait le coût d’exécution et rendait la mise à l’échelle plus difficile à mesure que le nombre de composants augmentait.
Gérer la transition à grande échelle
Pour éviter de casser les usages existants, GitHub a créé une bibliothèque intermédiaire appelée @primer/styled-react. Cette bibliothèque a permis de continuer à utiliser sx avec les composants migrés vers CSS Modules, tandis que les routes qui n’avaient pas besoin de sx pouvaient importer directement depuis @primer/react.
La suppression de sx a commencé en avril 2025, alors que cette propriété était utilisée environ 7 760 fois. Avec l’aide d’une extension interne pour VS Code et d’un outil codemod, un groupe de huit ingénieurs a migré 6 419 utilisations en six mois, avec des gains de temps de rendu côté serveur compris entre 1 % et 22 % sur certaines pages. En avril 2026, le nombre est passé de 895 à zéro en trois semaines, avec la participation de deux ingénieurs et l’utilisation d’agents de programmation dans GitHub Copilot.
Les thèmes visuels sont restés un défi supplémentaire : GitHub prend en charge sept thèmes, chacun disposant d’un mode à contraste élevé, et certaines parties de ce système étaient liées à styled-components. L’équipe a donc également migré les utilisations de JavaScript et les outils liés aux thèmes, tout en conservant les variables de couleur définies en CSS.
Que signifie cette expérience pour les développeurs ?
Les chiffres de GitHub montrent que l’élimination de la logique de mise en forme à l’exécution peut produire des gains tangibles lorsque les interfaces utilisateur prennent de l’ampleur. Mais la valeur la plus importante de cette expérience ne réside pas dans le choix de CSS Modules en lui-même, mais dans la méthode d’exécution : compatibilité progressive, indicateurs de fonctionnalités, tests visuels, déploiement graduel et automatisation vérifiable.
En revanche, le processus montre que la migration depuis le CSS-in-JS ne se limite pas à remplacer une syntaxe d’écriture des styles. Elle a nécessité la suppression des propriétés sx, le découplage des thèmes de styled-components et le maintien de la compatibilité des composants pendant une longue période. Les résultats ne prouvent donc pas que chaque projet obtiendra les mêmes gains : ceux-ci sont liés à la taille de GitHub, à l’architecture de ses composants et à sa manière d’utiliser la mise en forme dynamique.