Supporting CSS-in-JS

[mayank99]

It's not super clear which CSS-in-JS libraries work, so I'm creating this issue as sort of a place to start the conversation and document the current status.

Here's a few popular libraries that I know about (will keep this list updated):

Library	Status	Notes
styled-components	🟡 Partially works	Prod build errors with: styled.div is not a function. Can be worked around with client:only or by using buildSsrCjsExternalHeuristics and ssr.noExternal (will cause FOUC).
emotion	🟡 Partially works	Prod build errors with: styled.div is not a function. Can be worked around with client:only or by using buildSsrCjsExternalHeuristics and ssr.noExternal (will cause FOUC).
linaria	✅ Works	Prod build errors with: Named export 'styled' not found. Can be worked around using buildSsrCjsExternalHeuristics and ssr.noExternal or by downgrading to v3.
stitches	✅ Works	<style> tag for SSR needs to be in React component
typestyle	✅ Works	-
vanilla-extract	✅ Works	-
solid-styled	❌ Doesn't work	No vite or rollup plugin, also requires Context

From what I understand, if a library doesn't work in astro, it's because of one or more of these reasons*:

• no support for vite/esbuild
• it requires babel
• it needs context
• it requires access to the renderer for SSR styles

^{*I could be wrong so would be nice if someone can verify the above points.}

---

Additionally, here's what @FredKSchott would like to see (quote message from discord):

1. A table of which CSS-in-JS libraries are/aren't supported in Astro. If not supported, it would also list the reason. If supported, these could also have tests in the repo so that we don't break them in the future.
2. Some time to go through the ones that aren't supported and try to fix any issues that are fixable by Astro.
3. For any the css-in-JS libraries that still aren't supported after that, a clear error message inside of Astro core when it sees you try to import the package.

GitHub repo with examples:

https://github.com/mayank99/astro-css-in-js-tests

Participation

• [x] I am willing to submit a pull request for this issue.