Sign In Sign Up
Maximilian Torggler

Does anyone have experience with zero-runtime CSS in JS libraries?

The time has come to make the switch from CSS modules to a CSS-in-JS solution (Next.js).

So I've already used styled-components and emotion in a quite a few projects, but I noticed this trend of zero-runtime CSS in JS libraries, and I'd like to know if anyone has experience with such libraries in production. I've looked into:

Linaria seems to be the winner for me here.

0 Likes 4 Comments
Sergio Mattei

@joshmanders probably has a lot of experience in this area!

0 Likes
Josh Manders Staff

You can do zero runtime based CSS with Styled Components / Emotion. You just need to have your webpack or whatever bundler you're using to extract CSS out at build time.

For example, a rule that uses webpack-extract-css-plugin that runs when NODE_ENV=production.

Outside of that, I have gone all in on Tailwind CSS over a year ago, so I don't even think about CSS anymore, lol.

0 Likes
Maximilian Torggler Author

Styled Components doesn't seem to support Static CSS extraction, but there are both down- and upsides to that approach, according to Max Stoiber (https://github.com/styled-components/styled-components/issues/2377). It seems to be the same for Emotion. I'm also using Tailwind, but for some rather complex needs it doesn't suffice, so I need to combine it with another CSS solution. I am really a fan of good ol' CSS with CSS modules, but there seems to be a problem with how Next.js applies the styles of CSS modules on a route change, which in turn causes problems with framer-motion route transitions 🤷‍♂️ And Vercel's styled-jsx doesn't play well with framer-motion.

0 Likes
st3v3n

I've had difficulty with FOUC in my frontend using CSS-in-JS, even while using Gatsby for pre-rendering. It's pretty annoying :/.

0 Likes
Maximilian Torggler Author

Same for me with Gatsby, React SSGs seems to have a FOUC-iness problem in production

0 Likes
Maximilian Torggler Author

Update: I found a workaround for my CSS modules problem https://github.com/vercel/next.js/issues/17464.

Nonetheless it would be interesting to hear more opinions on zero-runtime CSS in JS libraries.

0 Likes

Please sign in to leave a comment.