Gatsby + Linaria = 💜

I recently went through the process of re-building my personal blog/site. 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. 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!):

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 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 and there is no aim of supporting it 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

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