Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Distinguish style isolation, router isolation, and both #4112

Open
4 tasks done
xsjcTony opened this issue Aug 8, 2024 · 3 comments
Open
4 tasks done

Distinguish style isolation, router isolation, and both #4112

xsjcTony opened this issue Aug 8, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@xsjcTony
Copy link
Contributor

xsjcTony commented Aug 8, 2024

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

@xsjcTony xsjcTony added the bug: pending triage Maybe a bug, waiting for confirmation label Aug 8, 2024
@xsjcTony
Copy link
Contributor Author

xsjcTony commented Aug 8, 2024

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
Copy link
Member

brc-dd commented Aug 8, 2024

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

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

@brc-dd brc-dd removed the bug: pending triage Maybe a bug, waiting for confirmation label Aug 8, 2024
@xsjcTony
Copy link
Contributor Author

xsjcTony commented Aug 8, 2024

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.

@brc-dd brc-dd added the enhancement New feature or request label Aug 8, 2024
@xsjcTony xsjcTony changed the title Link in vp-raw does not have SPA behaviour, the whole page is refreshed Distinguish style isolation, router isolation, and both Aug 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants