otaviomad
commented
1 year ago 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.
Open mihkeleidast opened 1 year ago
otaviomad
commented
1 year ago 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.
greenskybluephish
commented
1 year ago 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' } } })https://github.com/mihkeleidast/vanilla-extract-rollup-example/pull/1
przemyslaw-wlodek
commented
8 months ago I also faced this issue. We used ladle with vite for one of the packages in monorepo and the fix provided by @greenskybluephish worked fine. Now I'm migrating this package to Storybook with webpack and there are no clear answers.
packages/ui-lib -> UI components styled with vanilla-extract, built with rollup
apps/my-app -> Application having packages/ui-lib as a dependency
You may need to modify this to your needs, depending on context but I will give my example where apps/my-app has its own Storybook playground.
css files (or make sure they exclude vanilla-extract css: example)packages/ui-lib)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 https://github.com/vanilla-extract-css/vanilla-extract/discussions/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
https://github.com/graup/vanilla-extract-rollup-example/pull/3
System Info
Used Package Manager
yarn
Logs
Validations