Use vanilla-extract with jest-image-snapshot

Question

I'm trying to setup visual tests using jest-image-snapshot package for components written with vanilla-extract. I do use @vanilla-extract/jest-transform and when I try to console log rendered HTML I have proper class names there. The problem is that on a generated image I have no styling applied because in consoled HTML there is no CSS file connected.

How can I inject actual CSS styles assigned to the classes that are used in HTML that I pass to puppeteer to generate an image?

When I use storybook or just build an app that uses that component using Vite it all works as expected so the problem is only during testing.

Test example:

describe('Visual regression testing Input component', () => {
    beforeAll(startBrowser)
    afterAll(teardownBrowser)

    it('should render basic Input', async () => {
        const html = renderToStaticMarkup(
            <ThemeProvider theme={light}>
                <Input label size="md" id="email" name="email" variant="normal" placeholder="Email" />
            </ThemeProvider>
        )

        console.log(html)
        const screenshot = await renderBrowserPage(html, 'portrait')
        expect(screenshot).toMatchImageSnapshot()
    })
})

Html output from the console.og above:

<div class="light_light__1v46l7h0">
   <div class="sprinkles_marginTop_2__1l7tutv46 sprinkles_gap_2__1l7tutv25 styles_column__fkzvz42">
      <div class="styles_fullWidth__fkzvz43 styles_spaceBetween__fkzvz41 Input_container__ftn4z10 Input_container_variant_normal__ftn4z11 Input_container_state_normal__ftn4z17 Input_container_size_md__ftn4z16">
         <div class="styles_fullWidth__fkzvz43"><label for="email" class="Input_labelInside__ftn4z1i Input_labelInside_size_md__ftn4z1m Input_labelInside_state_hidden__ftn4z1k">Email</label><input id="email" type="text" name="email" autoComplete="off" placeholder="Email" class="Input_input__ftn4z19 Input_input_variant_normal__ftn4z1a Input_input_size_md__ftn4z1h Input_input_isLabeled_false__ftn4z1f" value=""/></div>
      </div>
   </div>
</div>

UPD

I came up with a solution to setup a separate rollup build that emits styles and saves them to a tests folder, then I remove all the typings, JS files, d.ts file etc. and keep only css files to import in test cases. Then I've created a separate script in package.json that runs this build first and then visual tests.