[Bug]: Vitest CLI unable to resolve CSS/JS filepaths when they are programmatically generated in `main.js`

[basher]

Describe the bug

I have multiple CSS/JS themes in my real Storybook/HTML repo, which I manage in .storybook/main.js via .env variables, enabling me to determine if Storybook is running in local DEV mode or PRODUCTION.

This works when running Storybook UI. CSS/JS loads correctly, irrespective of environment.

However, I noticed that Vitest does not load the CSS/JS for Storybook, so the a11y tests are running purely on "naked" HTML components - I tested this by setting headless: false in vitest.config.js.

NOTE: I have a temporary workaround for now, which does not use .env files, or main.js... but I have setup a simplified repro Storybook to demonstrate the actual problem - see below.

Reproduction link

https://github.com/basher/storybook-html-vitest-a11y

Reproduction steps

1. Uncomment the previewHead() function in main.js.
2. Comment out the inline <script> in preview-head.html.
3. npm run storybook - the CSS loads OK in the UI.
4. Set headless: false in vitest.config.js.
5. npm run test-storybook - the CSS does NOT load. The rendered <button> is unstyled.

System

│  Storybook Environment Info:
│

│  System:
│  OS: Windows 10 10.0.19045
│  CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
│  Binaries:
│  Node: 22.19.0 - C:\Program Files\nodejs\node.EXE
│  Yarn: 1.22.22 - C:\Users\kev\AppData\Roaming\npm\yarn.CMD
│  npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD <----- active
│  Browsers:
│  Chrome: 147.0.7727.117
│  Edge: Chromium (140.0.3485.94)
│  Firefox: 150.0.1 - C:\Program Files (x86)\Mozilla Firefox\firefox.exe
│  npmPackages:
│  @storybook/addon-a11y: ^10.3.5 => 10.3.5
│  @storybook/addon-docs: ^10.3.5 => 10.3.5
│  @storybook/addon-vitest: ^10.3.5 => 10.3.5
│  @storybook/html-vite: ^10.3.5 => 10.3.5
│  storybook: ^10.3.5 => 10.3.5

Additional context

No response

[dosubot]

Thanks for the detailed repro and steps, @basher.

Looking at the Vitest addon internals, the previewHead() config from main.js is processed — it's injected via Vite's transformIndexHtml hook [1]. So in principle it should work. However, @storybook/html-vite is not in the officially supported frameworks list for @storybook/addon-vitest [2]. The supported frameworks are react-vite, vue3-vite, preact-vite, nextjs-vite, and sveltekit [3]. This means there may be untested integration gaps causing the previewHead() content not to apply during Vitest runs.

A couple of workarounds you could try:

• Import CSS directly in .storybook/preview.js — e.g. import '../path/to/styles.css';. This goes through Vite's module pipeline, which the Vitest addon handles reliably.
• Use a decorator in preview.js to programmatically inject <link>/<script> tags into the DOM at render time, bypassing previewHead entirely.
• Your current static preview-head.html approach works too, but it has the same limitation as the programmatic previewHead() — both rely on the HTML transformation hook being called.

Could you try the preview.js CSS import approach and see if Vitest picks it up? That would help narrow down whether it's a previewHead pipeline issue or something else specific to the HTML framework.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[basher]

Hi @dosu

I can't use the import method in preview.js because I use Parcel bundler (outside of Storybook) to manage all my static UI assets (e.g. CSS/JS) so they are bundled separately for consumption by traditional server-side web applications (like .Net/PHP)... and I need to manage the filepaths for DEV and PRODUCTION modes.

I also have multiple themes running, which I manage through Parcel and some custom Node scripts.

I'm happy to wait for Storybook/HTML to be fully supported with Vitest... I just wanted to raise the issue in case anyone else has the same problem.

[dosubot]

That makes sense — with Parcel managing your assets externally, the preview.js import path wouldn't fit your setup.

Thanks for filing this with the detailed repro. It's a valid gap in the @storybook/html-vite + Vitest integration, and having it tracked here will help the maintainers prioritize support.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.