Recently we released our CSS in JS library – Linaria, which does build time evaluation and extraction of CSS to static files. We’ve been asked the same question over and over again, “How is it different from emotion”.
Linaria has a lot in common with Emotion and Styled Components regarding the API. However, the way Linaria works is completely different.
In short, CSS in JS libraries such as Emotion and Styled Components parse and apply your styles when your page loads in the browser, Linaria extracts the styles to CSS files when you build your project (e.g. with webpack), and the CSS files are loaded normally.
This approach has several advantages:
- Improved runtime performance because no extra work such as parsing the CSS needs to be done at runtime
- Since Linaria works at build time, you don’t need to have SSR setup to improve the time to first paint or for your page to work without JS
Hope this clears it up. Also, check out “Why use Linaria” which lists more differences from other CSS-in-JS libraries.
If you still have questions, please comment below.