Linear terminó de trasladar sus aplicaciones React de styled-components a StyleX, la biblioteca de estilos atómicos de Meta. El trabajo tomó unos cinco meses y más de mil solicitudes de cambio. La motivación principal fue reducir el coste de generar e insertar reglas CSS durante la ejecución, un problema que se hizo más visible tras la adopción del renderizado concurrente de React 18. El equipo también quería límites más claros entre componentes: con su sistema anterior era sencillo modificar desde fuera los estilos internos de otro componente.
StyleX prepara las clases CSS durante la compilación. Para abordar una migración tan amplia, Linear creó una herramienta de transformación determinista que automatizó buena parte de los cambios, apoyada por reglas de análisis y por CSS Modules en casos que necesitaban selectores globales. El proceso muestra que elegir una API predecible puede facilitar cambios repetitivos en un código grande, aunque exige adaptar prácticas de desarrollo.
Según las mediciones de Linear, las vistas con muchos elementos realizan entre un 20 % y un 35 % menos de trabajo en el hilo principal; la navegación fue aproximadamente un 30 % más rápida en un equipo de gama media. Durante los cambios de página dejaron de inyectarse reglas CSS. La contrapartida es una menor libertad para ciertos estilos dependientes de componentes padres o selectores globales, una restricción que otros desarrolladores han señalado. El resultado responde a las necesidades de Linear y no implica que StyleX sea la mejor opción para cualquier aplicación.
Glosario
- React
- Biblioteca de JavaScript para construir interfaces a partir de componentes reutilizables.
- styled-components
- Biblioteca que define estilos CSS dentro del código de componentes React y genera reglas durante la ejecución.
- StyleX
- Biblioteca de Meta que transforma declaraciones de estilo en clases CSS atómicas durante la compilación.
- CSS Modules
- Forma de escribir archivos CSS cuyos nombres de clase quedan acotados al módulo que los importa.