[Parent Issue] Migrate from Styled Components to Emotion #7772
Labels
cross-team
For visibility for both World Service teams (Engage & Media)
high-priority
Parent Issue
Parent issue for new features/components which links to all relating issues
performance
technical-work
Technical debt, support work and building new technical tools and features
Projects
Milestone
Outline
Following preliminary work (covered in Background 👇), we wish to migrate our CSS-in-JS library from Styled Components to Emotion. This will release us from the Styled Components shaped hole we've been stuck in since we learned we couldn't upgrade to the latest version.
In migrating to Emotion, we will leave behind Styled Components four, the stale issues with companion libraries preventing us from upgrading to Styled Components five, and likely see an exceptional increase in real-world server-side rendering time. Emotion's runtime is also smaller than Styled Components, so we will see a reduction in client-side bundle sizes.
Tasks
Psammead
attrs()
use for Emotion [2/2] Refactor "dynamic styles" andattrs()
use for Emotion psammead#3763Simorgh
Background
This work stemmed from the following root issue: Simorgh performance profiling #6922.
Investigation
The following document is a living investigation, which has informed the direction of this work: Dropbox Paper: Simorgh SSR Performance
Proof-of-Concept
Phase 1
Phase 2
Results
A single (non-clustered) Simorgh instance renders pages 35% faster with Emotion.
The text was updated successfully, but these errors were encountered: