In Browser Mode, css varaibles of browser ui confilcts with postcss-variables-prefixer

[rikisamurai]

Describe the bug

In my project, I used CSS variables and added prefixes to all of them using postcss-variables-prefixer. However, when running in Vitest's browser mode, this caused the original CSS variables for Vitest's UI to also get prefixed, leading to some UI display issues.

But if not browser mode, vitest ui works well.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-t5c8dy?file=vite.config.ts

1. npm test
2. open devtool and inspect elements
3. you will see --myprefixun-rotate instead of --un-rotate

But if use vitest ui

1. add headless: true in vitest.workspace.ts
2. npm run test:ui
3. you will see --un-rotate

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    @vitest/browser: ^2.1.1 => 2.1.1 
    @vitest/ui: latest => 2.1.1 
    vite: latest => 5.4.7 
    vitest: latest => 2.1.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.