Cannot consume exported theme vars from a library that is built with rollup-plugin #991
Comments
|
I can confirm that this problem also occurs on the esbuild plugin. The built files get prepended with a bunch of imports referencing non-existent vanilla css files. |
|
I came across this same issue today, with very similar usage to OP. Tracking the error led me to this post. When esbuild is passed a 'css.ts' file that is importing 'vars' from the library, it automatically tries to use it's css loader to write a matching CSS file, but since it's only writing the JS file to memory and there's no outdir set, it causes the error to be thrown. Originally thought there were further changes needed to address, but turned out once I updated the vite and plugin versions, the esbuild options allowed the necessary config to be set. vanillaExtractPlugin({ esbuildOptions: { loader: { '.css': 'empty' } } }) |
graup
added
rollup
|
I also faced this issue. We used ladle with
You may need to modify this to your needs, depending on context but I will give my example where
I ended up with this: // step 1
config.module.rules = config.module.rules.filter((rule) => !rule?.test?.test('test.css'));
// step 2
config.module.rules.push({
test: /\.vanilla.css$/i,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: require.resolve('css-loader'),
options: { url: false },
},
],
});
// step 3
// target pre-built files e.g. `component.vanilla-13hs15.css` instead of `component.vanilla.css`
config.module.rules.push({
test: /\.vanilla-.*.css$/i,
include: path.resolve(__dirname, '../../ui-lib'),
use: [
MiniCssExtractPlugin.loader,
{
loader: require.resolve('css-loader'),
options: { url: false },
},
],
}); |
Describe the bug
Exported
varsfrom a UI library that is build with@vanilla-extract/rollup-plugincannot be consumed in consumer application without the application build breaking.This affects vite, next, and webpack (and likely other app bundlers/plugins as well).
We are trying to pre-build our UI library with the rollup plugin, but this is not possible if we want to continue to consume the exported vars as well. I think some sort of double compilation is necessary, i.e. the vanilla-extract vite and webpack plugins should be able to consume libraries that are also build with some vanilla-extract plugin.
The workaround in #774 works for the vite app, but I'm not sure that ignoring those nested imports is actually the best solution. Also, the same cannot be used for webpack/next examples.
Reproduction
graup/vanilla-extract-rollup-example#3
System Info
See the repro, the versions don't matter, happens on latest versions as well as older ones.Used Package Manager
yarn
Logs
Validations
The text was updated successfully, but these errors were encountered: