Closed as not planned
Description
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 conditional default import (will cause FOUC). Can also patch @astrojs/react . |
linaria | 🟡 Partially 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 | 🟡 Partially works | <style> tag for SSR needs to be in React component |
typestyle | ✅ Works | - |
vanilla-extract | ✅ Works | - |
solid-styled | 🟡 Partially works | Causes FOUC |
styled-jsx | ❌ Doesn't work | No vite or rollup plugin, requires babel |
compiled | ❌ Doesn't work | No vite or rollup plugin, requires babel |
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/rollup
- it requires babel
- it uses context
- it requires access to the renderer for SSR styles
- it doesn't work with new react 18 apis
*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):
- 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.
- Some time to go through the ones that aren't supported and try to fix any issues that are fixable by Astro.
- 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
- I am willing to submit a pull request for this issue.