Giters

vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript

Home Page:https://vanilla-extract.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Libraries shipping `vanilla.js` files break the build when app uses a vanilla-extract plugin as well.

ffriedl89 opened this issue · comments

commented

Describe the bug

The build error

ERROR: Cannot import "node_modules/@ffriedl/rollup-ve-lib/dist/Button/Button.css.ts.vanilla.css" into a JavaScript file without an output path configured

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.
When optimizedDeps 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

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.0 - /usr/local/bin/pnpm
  npmPackages:
    @vanilla-extract/vite-plugin: ^3.9.2 => 3.9.2 
    vite: ^5.0.0 => 5.0.0

Used Package Manager

npm

Logs

error during build:
Error: Build failed with 1 error:
node_modules/@ffriedl/rollup-ve-lib/dist/Button/Button.css.js:5:13: ERROR: Cannot import "node_modules/@ffriedl/rollup-ve-lib/dist/Button/Button.css.ts.vanilla.css" into a JavaScript file without an output path configured
    at failureErrorWithLog (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1626:15)
    at eval (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1038:25)
    at runOnEndCallbacks (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1461:45)
    at buildResponseToResult (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1036:7)
    at eval (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:1065:16)
    at responseCallbacks.<computed> (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:687:9)
    at handleIncomingPacket (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:742:9)
    at Socket.readFromStdout (/home/projects/vitejs-vite-215ufr/node_modules/@vanilla-extract/integration/node_modules/esbuild/lib/main.js:663:7)
    at EventEmitter.emit (node:events:42:9202)
    at addChunk (node:internal/streams/readable:105:4109)

Validations

commented

@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.

commented

Thx @askoufis for the quick reply - thats also what I ended up doing.
At least I was not going down the wrong rabbit hole :)