vanilla-extract-css/vanilla-extract

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

Open

#1,242 opened on Nov 20, 2023

View on GitHub
 (3 comments) (1 reaction) (0 assignees)TypeScript (8,658 stars) (231 forks)batch import
good first issuepriority-lowrollup

Description

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

Contributor guide