vp-raw not working properly

gorlanova commented 11 months ago

Describe the bug

I'm writing documentation for a component library.

I was using "vp-raw" on my demo containers and it was working perfectly, but recently I made a clean dependency install (deleted node modules and package-lock.json, then ran npm i)

And now the "vp-raw" seems to not be working anymore, the default vp styles apply in my demo code (I didn't change anything else in the config or whatever, the postcss config file is still there and hasn't been touched)

Is it a conflict with another dependency maybe ? Appreciate any lead / tip you could give me

Thanks for the amazing work !

Reproduction

Use the "vp-raw" class on a container in a vitepress file, and try to apply a background on a button inside of it, it won't work

Expected behavior

It should disable vp styles so my library styles are applied without being overriden

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M2
    Memory: 2.83 GB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: 8.9.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Safari: 17.1.2
  npmPackages:
    vitepress: ^1.0.0-rc.31 => 1.0.0-rc.31

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.

gorlanova commented 11 months ago

Update : I'm using :where() in my library (so it's easy for users to override base styles)

I've tried (in the browser CSS tab)

adding :where() to selectors from the base styles
removing the :where() from my component selectors

Either way seems to fix the issue so it looks like it's a question of priority... Has anything changed with the order the stylesheets are loaded / the selectors used in the base theme ? It was working just fine until I did npm i again

I can't remove :where() from my library because it improves user DX so much

brc-dd commented 10 months ago

Can you share your repo where this is happening? Usage of :where in your library code shouldn't affect that.

gorlanova commented 10 months ago

Hello @brc-dd thank you for your feedback, unfortunately the repo is private (it's company work) but would it be doable if I invite you to have access to it so you can have a look behind the scenes ? I'm not up to date on github etiquette so I don't know if that's something to do, I'm checking with my boss in the mean time to know if he's ok with that

brc-dd commented 10 months ago

would it be doable if I invite you to have access to it so you can have a look behind the scenes

Yeah it'd fine. You can contact me on Discord (available as @brc_dd).

BTW I don't need access to the whole repo. If you can create a trimmed down version (https://stackoverflow.com/help/minimal-reproducible-example) where it shows your problem, then it would be easier as it need not contain your internal code. You can use https://vitepress.new and add only one small component and check if vitepress styles are breaking your component styles.

gorlanova commented 10 months ago

Hi again, thank you for being so reactive !

I managed to create a trimmed down version for you so see the issue, you're right it will be better than giving access to a lot of code since with only a few files we can see what goes wrong.

The repo is here : https://github.com/gorlanova/bug-vitepress

To see the issue : launch the doc, go to the page "/reference/button", at the bottom of the page is the preview section, and we can see that the button is not styled properly.

When changing classes from ":where(.xxx)" to ".xxx" in the inspector, custom styles will be applied properly OR
When disabling vitepress button styles in the inspector, custom styles will be applied properly

Thank you again for your help with this issue !

brc-dd commented 10 months ago

Hi, please change includeFiles to includeFiles: [/vp-doc\.css/, /base\.css/]

gorlanova commented 10 months ago

Oh my, that's it, everything works perfectly ! Thank you so much for your help, I would've never figured this out myself

And happy new year !

vuejs / vitepress