[Parent Issue] Migrate from Styled Components to Emotion

[simonsinclair]

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

• Update README to notify users of move to Emotion Update README to notify users of move to Emotion psammead#3765
• [1/3] Install Emotion whilst being backwards compatible [1/2] Install Emotion whilst being backwards compatible with Styled Components psammead#3867
• [2/3] Refactor "dynamic styles" and attrs() use for Emotion [2/2] Refactor "dynamic styles" and attrs() use for Emotion psammead#3763
• [3/3] To Emotion and beyond To Emotion and beyond psammead#3926

Simorgh

• Emotion SSR - All Emotion SSR - All #8171

---

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

• [1/2] Emotion PoC – SSR Perf. [1/2] Emotion PoC – SSR Perf. psammead#3677
• https://github.com/simonsinclair/psammead
• https://github.com/simonsinclair/psammead-packages

Phase 2

• [2/2] Emotion PoC – SSR Perf. [2/2] Emotion PoC – SSR Perf. #7536
• https://github.com/simonsinclair/simorgh

Results

A single (non-clustered) Simorgh instance renders pages 35% faster with Emotion.