Distinguish style isolation, router isolation, and both

[xsjcTony]

trafficstars

Describe the bug

It might be intentional, as documented it can be used to prevent router conflicts. But what if I want the link in vp-raw to have SPA behaviour? how can I achieve that? It's giving me headache that I want to both avoid built-in styles but also retain SPA navigation behaviour instead of refreshing the whole page.

Reproduction

https://stackblitz.com/edit/vite-l6ciup?file=docs%2Findex.md

Expected behavior

It won't refresh the whole page

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 5.24 GB / 31.69 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[xsjcTony]

I worked it around by doing this:

postcssIsolateStyles({
  prefix: ':not(:where(.vp-style-raw, .vp-style-raw *, .vp-raw, .vp-raw *))'
}),

and use vp-style-raw class instead. I don't think putting style and router isolation into the same class name is a good idea. Maybe we can provide some other way that can distinguish below 3 scanerios

• Style isolation
• Router isolation
• Both style and router isolation

[brc-dd]

Use some class other than vp-raw for style conflicts:

postcssIsolateStyles({
  prefix: ':not(:where(.foo, .foo *))'
})

[xsjcTony]

Yeah that's what I did. I guess follow up my comment above, please make this as an enhancement ticket if it's reasonable, otherwise you can close it.