Gatsby + Linaria = 💜
Tags: javascript, gatsby, react, cssinjs
Published: 2019-03-13 23:41:27

---
title: Gatsby + Linaria = 💜
published: true
description: My experience writing the styles for my personal Gatsby site using Linaria and why it may be the right choice for your own static site.
tags: javascript,gatsby,react,css-in-js
---

I recently went through the process of re-building [my personal blog/site] (https://glazebrook.dev). My old site contained a couple more pages (“home” and “contact”) but I didn’t really feel like they added much to the experience. They were very content-light and, in the end, added unneeded complexity to the site.

That old site was built in Gatsby and I have had a good experience with all
three versions of Gatsby released to this point so it seemed like the obvious choice.

I also stuck with the same CSS-in-JS library that I was using on my old website, [emotion](https://emotion.sh). Again, it seemed like a fairly straightforward
choice since I didn’t have any issues with it last time and `emotion` is a
library that I have used a multitude of times during my work since then.

Now, you may be wondering where `linaria` fits into this because, at this point, it will seem like all was going well. That’s true, it was going well - I had pretty much finished my site and was looking through my Github when I rediscovered `linaria` after hearing about it on Twitter some weeks ago. My only issue with `emotion` at this time was I was experiencing some small (and not overly noticeable) performance issues when loading new pages on the dark theme. The web page, only for a few frames, would render in the light mode until it had time to parse the styles. Whilst this wasn't a huge deal the perfectionist in me wasn't pleased and had to do something about it.

I had been meaning to try `linaria` in a project and, because the API for styled React components is very similar to that of `emotion`, I decided to give it a shot. Getting `linaria` installed and set up in a Gatsby project is fairly straightforward thanks to `gatsby-plugin-linaria` so I created a new branch and cracked on with the refactor.

> In my case the setup wasn’t quite as straightforward as it could be based on a compatibility issue with `gatsby-plugin-typescript`. The maintainer of `gatsby-plugin-linaria` (as of writing) is trying to find a solution to the problem.

One thing that really appealed to me about `linaria` is the fact that all of the styles are processed at build-time rather than runtime. This makes a lot of sense when you put that build-time style generation alongside Gatsby’s brilliant built-in SSR (server side rendering). Why parse your styles at runtime when you can extract them during build?

## So, how difficult was it to migrate?

I expected the migration to be easy because of the almost identical API but it turned out to be even easier than I expected. In the majority of cases on my new site the migration looked a little bit like this (I'm not joking!):

```javascript
import styled from '@emotion/styled'; // Delete this line
import { styled } from 'linaria/react'; // Add this line
```

I will add a little disclaimer here to say that your mileage may vary but, in my case, the vast majority of components didn’t require any changes going from `emotion` to `linaria`.

> There currently aren’t any codemods available to automate this switch but
there is an [open Github issue](https://github.com/callstack/linaria/issues/112) discussing the possibility of creating some in the future.

## Can’t you achieve build time extraction with Emotion or Styled Components?

This is something you used to be able to do in both `styled-components` and `emotion` but the teams behind both libraries have expressed that they would like to move away from static extraction and stop supporting it in their libraries. In the threads I can find on Github/Reddit the advice from them is “Use Linaria” 😁

After reading discussion and documentation online it seems the teams behind both libraries would like to move away from static extraction. `extractStatic` from `emotion` has been [deprecated with version 10](https://github.com/emotion-js/emotion/blob/master/docs/extract-static.md) and there is [no aim of supporting it](https://github.com/styled-components/styled-components/issues/1018) in `styled components`.

The advice from the teams behind both of these very popular libraries seems to be to just use `linaria` if you want static extraction! 😁

## Conclusion

Overall, I am very pleased that I decided to give `linaria` a shot. The project was really straightforward to get started with and the migration was even more seamless than I expected.

I think if you’re going to create a static site using Gatsby and you like
CSS-in-JS then it could be the perfect solution for you.

If you would like to ask me any questions about anything I’ve spoken about in this article than feel free to DM me or Tweet at me: [@LukeHGlazebrook](https://www.twitter.com/LukeHGlazebrook)

Also if you would like to see `linaria` in action then check out my website @ https://glazebrook.dev