How to use Vanilla Extract as part of a react component UI library

[Clatrobe00]

Hello,

We are currently building a UI library for use in our react/ts applications and are experimenting with using Vanilla Extract.

We find that the components work well with our test environment, however when we publish the library (built with tsc) we find that we get this error:

• You may have created styles outside of a '.css.ts' context
• You may have incorrect configuration

We believe this is due to our tsc build compiling vanilla css.ts files down to css.js file types instead of css.ts.

Are there any recommended solutions for utilizing Vanilla Extract in libraries such as this?

[epavletic]

So, you export the result of running tsc on the library code?
What kind of environment do you use/consume the component library in (next, vite, webpack etc.)? Since tsc compiles the source to javascript, you’ll still need some sort of integration on the consumer side to handle the vanilla-extract specific stuff from your library properly. If you don’t already have something like that in place I’d have a look in the docs under Integration.

If you want ship the library code in a more ”plug-and-play” manner I think it’s possible to use Rollup for this, but I have not tried this myself. I believe for example that it comes with a few tradeoffs that it might be good to consider before diving in.

We’ve used the ”compile and ship component lib with tsc, and consume with @vanilla-extract/webpack-plugin integration in end application” for over a year now, so happy to help if I can. 🙏

[Clatrobe00]

Adding the @vanilla-extract/webpack-plugin to our consumer application resolved the issue. Thanks for the helpful response!