You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Our component library is built using @vanilla-extract/css, where we transpile style.ts files into style.js for both CommonJS (cjs) and ECMAScript Module (esm) environments. Consumer applications integrate @vanilla-extract/plugins (webpack/rollup, etc.) for style extraction on their end. The issue arises during server-side rendering (SSR) when the server uses the cjs file and the client uses the esm style file.
We are encountering inconsistencies in classnames between client-side and server-side builds while using vanilla-extract/css in our component library. Upon deployment, which supports both cjs and esm builds, we have noticed differences in generated classnames when used in client and server environments. This suggests that the file scoping defined by setFileScope is not consistently applied across different build outputs. Despite setting setFileScope in our build files, there are instances where scoping unexpectedly resets between client and server builds.
Testing:
We have developed a sample project that replicates the setup of the component library and consumer application. This project demonstrates scenarios where classnames differ between client and server.
Upon investigation, we found that the @vanilla-extract/integration package replaces the fileScope set on the transpiled styles file from the component library. Removing this the string replacement line for setFileScope results in consistent classnames between client and server as expected.
Results
Default
Modifiying @vanilla-extract/integration
Steps to run the sample application
git clone https://github.com/ApurvBazari/vanilla-extract-sample.git
cd vanilla-extract-sample/component-library
npm i
npm run build
cd ../consumer-app
npm i
npm run all
Goto localhost:3000 to visit the application
Prop `className` did not match. Server: "styles_divider_base__3ieluy0" Client: "styles_divider_base__n47q7r0"
at hr
at Divider (webpack://sample-consumer-app/../component-library/packages/divider/dist/esm/my-component-library-divider.js?:21:28)
at div
at ThemeWrapper (webpack://sample-consumer-app/../component-library/packages/theme/dist/esm/my-component-library-theme.js?:23:25)
at Page
Validations
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
I have a similar issue using the vite plugin, only happens in dev mode. No SSR involved, but I traced the problem down to the same line
Any help would be appreciated.
Describe the bug
Issue:
Our component library is built using @vanilla-extract/css, where we transpile style.ts files into style.js for both CommonJS (cjs) and ECMAScript Module (esm) environments. Consumer applications integrate @vanilla-extract/plugins (webpack/rollup, etc.) for style extraction on their end. The issue arises during server-side rendering (SSR) when the server uses the cjs file and the client uses the esm style file.
We are encountering inconsistencies in classnames between client-side and server-side builds while using vanilla-extract/css in our component library. Upon deployment, which supports both cjs and esm builds, we have noticed differences in generated classnames when used in client and server environments. This suggests that the file scoping defined by setFileScope is not consistently applied across different build outputs. Despite setting setFileScope in our build files, there are instances where scoping unexpectedly resets between client and server builds.
Testing:
We have developed a sample project that replicates the setup of the component library and consumer application. This project demonstrates scenarios where classnames differ between client and server.
Upon investigation, we found that the @vanilla-extract/integration package replaces the fileScope set on the transpiled styles file from the component library. Removing this the string replacement line for setFileScope results in consistent classnames between client and server as expected.
Results
Steps to run the sample application
Reproduction
https://github.com/ApurvBazari/vanilla-extract-sample/tree/main
System Info
Used Package Manager
npm
Logs
Validations
The text was updated successfully, but these errors were encountered: