Impossible to style inside shadow DOM with vite?

[illumincrotty]

I'm building a web component for a library of web components and I am using vite as the bundler and using vanilla extract for styling. I have run into numerous issues with that combination but to sum it up:

• Vite injects styles into the header so you can't style inside the shadow dom (there's a workaround for css, scss, less, etc but they don't work for vanilla-extract)
• using Vite's library mode for production so there's no Vite provided style injection (although it wouldn't even be helpful even if it did because of the previous complication)
• Need 2 distinct places for styling to happen because the @font-face declaration must be made in the light dom for the font to work inside shadow dom

The workaround for styling inside the shadow dom with Vite is to import the css (or scss, less, etc) in the source file. The default import of that file is a stringified version of it's content (after whatever processing). You can then put that string inside a style element and append that style element to the shadow dom. the vanilla extract *.css.ts files don't have their stringified post-processing versions as their default export so that doesn't work.

The unminified bundle Vite produces does have those those files stringified as variables named *_css_ts_vanilla (it's not clear to me whether this is done by Vite or vanilla-extract) but A) when you try to use that variable in source code, it changes the name of the output by adding $1 (also the variable doesn't exist in the source which makes it ) and B) the variables are unreferenced so they're stripped out during minification.

I tried importing the css file from build (obviously a bad plan but I had to try) and it does work sort of! the styling all looks correct but the previous css file output is appended to that build so if you build 5 times you have a css file that is 5 times longer than it needs to be and that whole file is in the javascript as a string. Not Ideal.

Is there a solution to a problem like this that is already known? is there a way to get the stringified css from vanilla extract?