Para 2023 el número de componentes en algunas páginas de GitHub se estaba disparando, y la solución existente de CSS-in-JS lo estaba pagando: las cargas iniciales de página se ralentizaban a medida que los estilos se inicializaban en el cliente, el renderizado del lado del servidor se degradaba a medida que la recolección de estilos se trasladaba al servidor, y las actualizaciones de estilos se salían de control. El equipo de Primer decidió resolver el problema en su origen con una restricción estricta: nada podía romper GitHub durante la migración.
La respuesta fueron los CSS Modules: archivos CSS nativos colocados junto a cada componente, sin runtime alguno en cliente ni en servidor. Dado que el formato era radicalmente distinto, el equipo migró componente por componente: añadir una hoja de estilos traducida, poner el componente detrás de un flag que alternaba los estilos antiguos y nuevos, verificar con instantáneas de regresión visual que los píxeles fueran idénticos, y luego desplegar el flag al equipo, al personal y, finalmente, a todos. Para diciembre de 2024 todos los componentes de Primer estaban migrados, con páginas que se renderizaban en el servidor un 55% más rápido y componentes que se inicializaban un 25% más rápido.
La mitad más difícil era el propio código base de GitHub, donde la prop sx había sido el estándar de estilos durante años — miles de instancias bloqueaban el cambio a @primer/react sin runtime. El equipo creó @primer/styled-react, un paquete envoltorio transitivo que permite al código que usa sx importar los mismos componentes a través de él, mientras que todos los demás importan la vía rápida.
La conversión se ejecutó entonces paquete por paquete: en un pico de abril de 2025 de aproximadamente 7.760 props sx por migrar, un plugin de VS Code y un codemod interno hicieron la mayor parte del trabajo, y 8 ingenieros movieron 6.419 props en seis meses con ganancias de SSR de entre el 1% y el 22% por página. En abril de 2026 dos ingenieros con agentes de codificación de Copilot llevaron las 895 restantes a cero en tres semanas; para junio de 2026 GitHub funcionaba al 100% con CSS Modules, con sx, styled-components y styled-system ya eliminados.
Migrar detrás de feature flags con instantáneas de regresión visual; un paquete envoltorio transitivo mantiene funcionando a los consumidores heredados de sx mientras las nuevas importaciones obtienen la velocidad.
El coste en runtime de CSS-in-JS escalaba con la complejidad de la página, así que la solución tenía que eliminar el runtime en sí en lugar de ajustarlo.
Los feature flags junto con las instantáneas de regresión visual hicieron que cada paso de la migración fuera reversible e idéntico píxel a píxel, que es lo que permitió a un equipo de sistema de diseño cambiar componentes de los que dependían otros equipos.
El envoltorio @primer/styled-react desacopló las dos migraciones: los internos de los componentes podían modernizarse mientras miles de puntos de llamada a sx permanecían intactos hasta que les llegara el turno.
Los codemods, un plugin de VS Code dedicado y, finalmente, los agentes de codificación de Copilot convirtieron una tarea pesada de 7.760 props en un trabajo mayormente automatizado terminado por dos personas.
Los sistemas de diseño son el vehículo más barato para el cambio a nivel de plataforma: arregla los componentes y el producto le sigue — con flags y pruebas de instantáneas, incluso una migración de varios años nunca rompe producción.
GitHub funciona enteramente con CSS Modules desde junio de 2026. Las salvaguardas construidas para la migración — flags, instantáneas, despliegues por etapas — sostuvieron cuatro años de cambio arquitectónico sin roturas en producción, y el mismo manual respalda ahora el futuro trabajo de la plataforma Primer.
CONSULTA LAS PRUEBAS
Las fuentes
- Improving site performance by shipping more CSS GitHub Engineering Blog · github.blog ·