Only load styles of imported components when used in a components library

[AbdallahAbis]

Hey folks,
So we're trying to build a components library that is performant and can get good scores on Lighthouse, so we thought of using a CSS library that generates styles at build time instead of using a CSS-in-JS approach which may increase our TBT, and we agreed on vanilla-extract.
The only issue we see when using this approach is that what if we have 100 components in our library but the site consuming the library only uses 10 components, the styles.css imported to the site will include styles of all the 100 components while we only need the styles for the 10 components we're using.
The question is this, is there a way we can remove those unused styles on the site?
tried purgeCss but it removes all the styles and not just the unused ones, but could be because of a wrong config.

PS: the site is built using Gatsby.js.
PS: We're using Vite as a bundler.

[graup]

We had some discussion about this use case in #620

I personally think the best way to do this will be to compile your library components into separate CSS assets whose imports can be tree-shaken (or at least selectively imported). This cannot be done with Vite because it unconditionally bundles all CSS into one file. That's exactly why I'm working on a rollup plugin.