Trabalho · XP Inc.
Chameleon: CSS-in-JS para web components
Um motor de temas para Stencil e web components, cerca de 8x mais rápido que o styled-components nos nossos benchmarks internos de tema em runtime.
- Papel
- Software Architect e Design Ops Tech Lead
- Período
- 2020 – 2022
- Stack
- Stencil · Web components · Shadow DOM · Constructable Stylesheets
Por quê
Web components guardam seus estilos dentro do Shadow DOM, o que é ótimo para isolamento e difícil para temas. As bibliotecas de CSS-in-JS populares foram feitas para React e para o DOM comum. Precisávamos de temas que funcionassem dentro de shadow roots, em runtime, sem pagar por isso a cada render.
Como funciona
- Um theme provider publica mudanças de tema por pub/sub para todos os componentes inscritos.
- Os estilos são gerados como Shadow CSS e aplicados dentro do Shadow DOM de cada componente.
- Os estilos gerados ficam em cache numa hash table indexada por componente e atributos, para a mesma combinação nunca ser calculada duas vezes.
- Constructable Stylesheets permitem que muitos shadow roots compartilhem uma folha de estilo, com fallback para navegadores sem suporte.
Quão rápido
Cerca de 8x mais rápido que o styled-components nos nossos benchmarks internos de tema em runtime. O objetivo de design por trás disso: nunca recalcular um estilo que já está no cache e compartilhar folhas de estilo em vez de injetar cópias.