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:
- https://github.com/atlassian-labs/compiled
- https://github.com/4Catalyzer/astroturf
- https://github.com/callstack/linaria
Linaria seems to be the winner for me here.
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.
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.
I've had difficulty with FOUC in my frontend using CSS-in-JS, even while using Gatsby for pre-rendering. It's pretty annoying :/.
Same for me with Gatsby, React SSGs seems to have a FOUC-iness problem in production
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.
Please sign in to leave a comment.