astro + css-in-js
This monorepo will show examples of various CSS-in-JS libraries in Astro. Currently only shows a basic counter example, would be nice to demonstrate more advanced usage for each library.
Compatibility table
| Library | Status | Notes |
|---|---|---|
| styled-components |
|
Prod build errors with: styled.div is not a function. Can be worked around with client:only or by using vite.legacy.buildSsrCjsExternalHeuristics and vite.ssr.noExternal (will cause FOUC though). |
| emotion |
|
Prod build errors with: styled.div is not a function. Can be worked around with client:only or by using vite.legacy.buildSsrCjsExternalHeuristics and vite.ssr.noExternal (will cause FOUC though). |
| linaria |
|
Prod build errors with: Named export 'styled' not found.. Can be worked around using vite.legacy.buildSsrCjsExternalHeuristics and vite.ssr.noExternal or by downgrading to v3. |
| stitches |
|
<style> tag for SSR needs to be in React component |
| typestyle |
|
- |
| vanilla-extract |
|
- |
| solid-styled |
|
No vite or rollup plugin, also requires Context |
Running locally
Clone the repo and install deps:
npm install
Start the dev server for all examples in parallel using turborepo:
npm run dev
Open localhost:3000, localhost:3001, etc in browser.
Contributing
To add an example of a new library:
- Create a copy of any folder (e.g.
emotion). - Rename the folder and the
namefield in the folder's package.json. - Update the dependencies and run
npm installfrom the root of the monorepo. - Update the code. Try to keep the actual styles more or less the same.
- Update the README.md
31 Feb 7, 2022
7 Dec 1, 2022
3 May 18, 2022
4 May 3, 2022
4 Apr 29, 2022
2 Dec 3, 2022
33 Dec 11, 2022
301 Jan 3, 2023
20.3k Dec 24, 2022
172 Dec 29, 2022