Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jahredhope/vanilla-extract-playground
A playground for testing Vanilla Extract with Vite SSR + Static Rendering
https://github.com/jahredhope/vanilla-extract-playground
Last synced: 16 days ago
JSON representation
A playground for testing Vanilla Extract with Vite SSR + Static Rendering
- Host: GitHub
- URL: https://github.com/jahredhope/vanilla-extract-playground
- Owner: jahredhope
- Created: 2023-07-05T12:25:34.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-27T11:52:42.000Z (over 1 year ago)
- Last Synced: 2024-10-19T02:00:37.052Z (29 days ago)
- Language: TypeScript
- Homepage:
- Size: 384 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vanilla Extract Composed Styles
A demonstration of a difference between Server and Client classes when not using `emitCssInSsr: true`, using [Vite] and Server Side Rendering (SSR).
When creating a style composed of other styles, (either by passing an array to `style` or calling a Sprinkles function in a css file) Vanilla Extract will create an additional identifier class. If the class is unused, the class will appear in the server render, but will be stripped for the client render, resulting in a mismatch between renders known as a hydration error.
This only occurs when
- `emitCssInSsr` is not `true`
- A style is defined as a composition of other styles. (Or, a Sprinkles function called in a `css.ts` file)
- The resulting value must be exported, and NOT used in another selector
Though Sprinkles has been mentioned here, the demonstration below reveals this occurs without Sprinkles. It's just that your more likely to be in this scenario if you are using atomic styles.
Related changes:
- Style Composition In Selectors - [PR #259](https://github.com/vanilla-extract-css/vanilla-extract/pull/259)
- Support passing arrays of styles to style and styleVariants - [PR #326](https://github.com/vanilla-extract-css/vanilla-extract/pull/326)
## Scenario
This project uses a fairly boilerplate solution created from following:
- [Create Vite](https://vitejs.dev/guide/)
- [Vite SSR Guide](https://vitejs.dev/guide/ssr.html)
- [Vanilla Extract Vite Plugin](https://vanilla-extract.style/documentation/integrations/vite/)
It then renders text on screen different times using CSS generated by calling `style` with two existing styles in a `css.ts` file.
1. When the class has been used in a global style. **Result:** Additional class on Server and Client
2. When the class has NOT been used in a global style. **Result:** Additional class on Server and NOT on Client.
The second scenario results in an hydration error as it renders a different result on the client and server.
```
Warning: Prop `className` did not match. Server: "styles_redText__duph0q3 styles_red__duph0q0 styles_underline__duph0q1" Client: "styles_red__duph0q0 styles_underline__duph0q1"
span
div
main
App
```
## To recreate
Ensure RECREATE_ERROR in `vite.config.ts` is `true`
```bash
pnpm install
pnpm dev
```
Navigate to the resulting URL. Typically [localhost:5173](http://localhost:5173).
Change RECREATE_ERROR to `false` and re-run to see error disappear.
[vite]: https://vitejs.dev
[sprinkles]: https://vanilla-extract.style/documentation/packages/sprinkles