Usage with other bundlers

[Markcial]

Hi, I am excited about having a new CSS in Js library with zero runtime cost.

Does this library can be used with other bundlers or is it only webpack specific?

I would like to be able to run it on a more minimal project with esbuild for example.

Not something that can hold me back to try it, I can still try it with webpack, but I am opening a low priority issue just to let you know

Thanks for your effort, appreciate it

[ssw1ss]

Interested in this as well. I'd like to use vanilla-extract with SvelteKit which uses Vite. As Markcial mentioned above, I'll still try it out regardless but it'd be neat to be able to use this with other bundlers.

[sami616]

Interested in using this with rollup!

[markdalgleish]

Nothing concrete at this point, but we're definitely interested in support for other bundlers.

[markdalgleish]

Check this out — @mattcompiles managed to get vanilla-extract working with esbuild: https://twitter.com/mattcompiles/status/1376748835947511812

[markdalgleish]

We have an open PR adding esbuild support, should hopefully land soon: #14

[markdalgleish]

I'm making good progress on a Rollup integration too: https://twitter.com/markdalgleish/status/1378898886819913731

[markdalgleish]

Just shipped the esbuild plugin: https://github.com/seek-oss/vanilla-extract#esbuild

[zoontek]

Does someone has a successful config with vite + @vanilla-extract/esbuild-plugin?

I tried:

export default defineConfig({
  plugins: [preact(), vanillaExtractPlugin({ projectRoot: path.resolve(__dirname) })],
});

Without success:

Error: New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.

[mattcompiles]

@zoontek Will be looking into vite at some point soon hopefully. However, isn't rollup the primary bundler for vite? I thought esbuild was only used as a babel replacement?

[zoontek]

Ah, maybe! I just tried it without knowing much about it.

[Markcial]

I can confirm that the esbuild plugin works perfectly, just tested it right now. Congratulations 👏

[codepunkt]

Also interested in using this with rollup/vite - might use it in @wilsonjs.

[mattcompiles]

Hopefully have something to show with vite very soon.

[markdalgleish]

Just an update on the Rollup integration work—since it doesn’t have first class CSS bundling support, we're thinking it’s probably not a good target for static extraction. Vite adds CSS bundling, so that's getting our attention instead.

[brianshen1990]

Same question here, using Rollup to build packages, any idea whether it is possible to do it?

[mryechkin]

@brianshen1990 sadly we've given up on the idea of using this library, as it doesn't look like Rollup support is coming

[graup]

I also think a Rollup plugin would be valuable for libraries. The lack of CSS bundling in this case is a feature. At the moment it's very difficult to get VE setup without CSS bundling. (See also #620)

[mryechkin]

FYI - the Rollup plugin is now available 🎉 https://vanilla-extract.style/documentation/setup/#rollup

There's also an example repo available here.

Massive thank you to @graup!

[jonlambert]

Not sure if this is the best place to ask this question so sorry in advance if so!

Do you know if it's possible to build the styles but not import them in the outputted JS index file? Ideally I'd like to be able to ask users to import the styles themselves from a single, bundled css path manually.

[leetcow]

I'm trying to use vanilla extract with bun but the esbuild plugin doesn't work even though bun has partial support for esbuild plugins

would be great to have a way to use it with bun