Skip to content

Supporting CSS-in-JS #4432

Closed as not planned
Closed as not planned
@mayank99

Description

@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 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):

  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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P2: nice to haveNot breaking anything but nice to have (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions