Open ffriedl89 opened 11 months ago
@ffriedl89 Thanks for raising this issue.
You can refer to this example project on how to fix your issue. In essence, if you both want to output per-module CSS in your library as well as consume that library in an app that uses Vanilla Extract, you need to rename the output .css.js
files to something else.
The crux of the problem is really that we lack docs on how to publish libraries that use VE. We can at least start by improving the rollup docs by adding this example.
Thx @askoufis for the quick reply - thats also what I ended up doing. At least I was not going down the wrong rabbit hole :)
@askoufis tried the solution in the repo https://github.com/graup/vanilla-extract-rollup-example and it works great except when there is a "use client" module directive. Rollup will skip those files. More details here:
Describe the bug
The build error
happens during a build of an app when consuming a library built with the
@vanilla-extract/rollup-plugin
and the app itself using@vanilla-extract/css
and a corresponding plugin e.g.@vanilla-extract/vite-plugin
. The same issue was also observed when building an app using the@vanilla-extract/esbuild-plugin
.The library mentioned in the error can be found here: https://github.com/ffriedl89/rollup-ve-lib.
As far as i managed to figure out - the issue is that the css file filters from the integration package https://github.com/vanilla-extract-css/vanilla-extract/blob/master/packages/integration/src/filters.ts also match the files in the library that were already processed with the rollup plugin and they get processed again.
The issue is not present when there are no
.vanilla.js
files present in the library or when vite has optimizeDeps enabled. WhenoptimizedDeps
is enabled vite prebundles a dependency in the.vite/deps
folder which eliminates the.vanilla.js
files before the apps plugin processes the dependency. Therefore no further pass of vanilla-extract happens and everything works as expected.Expected behavior:
A library built with
@vanilla-extract/rollup-plugin
works inside an app that also uses @vanilla-extract for it's styling.I'd like to be able to use vanilla-extract end to end :)
Thx! Let me know if I can help with anything!
Reproduction
https://stackblitz.com/edit/vitejs-vite-215ufr?file=vite.config.ts,package.json,src%2FApp.tsx,index.html&terminal=build
System Info
Used Package Manager
npm
Logs
Validations