How Is Linaria Different From Emotion and Styled Components?

Introduction

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.

Emotion and Styled Components

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.

Emotion used to have a static extraction mode, which was limited in the sense that it doesn’t support interpolations in the CSS string and can’t use many of Emotion’s features. Linaria will evaluate the interpolations such as JavaScript variables and functions in the CSS string at build time.

This approach has several advantages:

• Improved load time because CSS and JavaScript can be loaded in parallel, unlike runtime CSS in JS libraries where the CSS is in the same bundle as JS
• Improved runtime performance because no extra work such as parsing the CSS needs to be done at runtime
• No style duplication between SSR’d CSS and the JavaScript bundle.
• Since Linaria works at build time, you don’t need to have SSR set up to improve the time to first paint or for your page to work without JS

Why use Linaria?

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, give me a shout.