veilletech.fr
26 sept. Feed du jour
#06 CSS Article

GitHub abandonne le CSS-in-JS pour les CSS Modules

Le style le plus rapide est celui qui ne s'exécute pas.

GitHub a retiré styled-components de github.com : depuis juin 2026, tout le style passe par des CSS Modules, sans runtime côté client ni côté serveur. Sur le design system Primer, le rendu serveur a baissé de 55 % et l'initialisation des composants de 25 %. La migration a duré trois ans, composant par composant, derrière des feature flags.

3 min de lectureintermédiairevidéo 1:15
Partager
Sommaire6 sections
  1. Ce qui se passe
  2. Le problème de départ
  3. Primer d'abord : −55 % de rendu serveur
  4. Le reste de GitHub : la prop sx
  5. Ce que ça change
  6. À retenir

Ce qui se passe

GitHub a fini de retirer le CSS-in-JS de github.com. Depuis juin 2026, le site tourne entièrement sur des CSS Modules, et sx, styled-components et styled-system ont disparu du code. Josh Black et Marie Lucca, de l'équipe du design system Primer, retracent trois ans de migration.

Le problème de départ

En 2023, certaines pages comptaient tant de composants que la solution CSS-in-JS en place coûtait à trois endroits :

Les CSS Modules suppriment ce runtime. Le style s'écrit dans un fichier CSS placé à côté du composant, les noms de classe sont locaux par défaut, et tout finit dans des feuilles de style servies avec le HTML. On conserve la colocalisation et l'encapsulation, avec du CSS natif.

Primer d'abord : −55 % de rendu serveur

Chaque composant de Primer a suivi le même circuit :

  1. traduire ses styles dans un fichier CSS Module ;
  2. basculer entre ancien et nouveau style derrière un feature flag ;
  3. vérifier par régression visuelle que les captures restaient identiques ;
  4. ouvrir le flag à l'équipe, puis aux employés de GitHub, puis à tous.

Achevé en décembre 2024, ce passage a réduit de 55 % le temps de rendu serveur d'une page, et de 25 % celui de l'initialisation des composants.

Le reste de GitHub : la prop sx

Le vrai chantier était ailleurs. La prop sx, qui passe un objet de style en ligne à n'importe quel composant, était devenue la norme maison : bon typage TypeScript, accès aux design tokens, mais un coût d'exécution élevé. Pour ne rien bloquer, Primer a publié une couche de transition, @primer/styled-react, qui acceptait encore sx sur les composants migrés.

Le chantier démarre en avril 2025 avec un pic d'environ 7 760 props sx. Un plugin VS Code et un codemod interne automatisent l'essentiel ; une rotation de huit ingénieurs en migre 6 419 en six mois, avec des gains de rendu serveur de 1 à 22 % selon les pages. Entre-temps, styled-components passe en mode maintenance. Repris en avril 2026, le reliquat de 895 props tombe à zéro en trois semaines, avec deux ingénieurs et des agents Copilot.

Dernier obstacle : les sept thèmes du site et leurs variantes à fort contraste passaient encore par les utilitaires JavaScript de styled-components. Les variables de thème existaient déjà en CSS dans @primer/css ; il a tout de même fallu deux mois pour découpler le reste, avant de retirer les dépendances — derrière un flag, là aussi.

Ce que ça change

Pour une équipe React encore sur styled-components, ce retour donne un ordre de grandeur du gain et une méthode transposable : migrer composant par composant, comparer visuellement, ouvrir progressivement, et garder une couche de compatibilité le temps que les appels suivent.

Source : Improving site performance by shipping more CSS, GitHub Blog, 25 septembre 2026.