How is Linaria different from Emotion and Styled Components

Satyajit Sahoo

blog content

Need help with React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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.

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 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.

Satyajit Sahoo
Satya is in the 2016 Facebook’s TOP 5 external contributors list. You can find him everywhere. Satya is also a React & React Native ninja that will make your apps to stand above the others.
arrow icon
MORE posts from this author

learn more

More posts from this category

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.