Closed
Description
Describe the bug
Hello,
When using the :deep selector inside a Vue 2 single file component's scoped style, such as:
<style scoped>
:deep(.app-child__hello) {
color: red;
}
</style>
It will generate the given style:
[data-v-7ba5bd90]:deep(.app-child__hello) {
color: red;
}
Instead of the following:
[data-v-7ba5bd90] .app-child__hello {
color: red;
}
Using Webpack this example code is working fine. Using CSS or SCSS for the style of the Vue component won't change anything.
I don't know if this related to Vue, Vite or Vite Vue2 plugin so I'm creating an issue here as a starter.
Reproduction
https://github.com/paul-thebaud/vue-deep-bug
System Info
System:
OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
Memory: 2.05 GB / 15.01 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v16.14.0/bin/yarn
npm: 8.5.4 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
Chrome: 103.0.5060.53
Firefox: 102.0
npmPackages:
vite: ^2.9.13 => 2.9.13Used Package Manager
yarn
Logs
No response
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.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- 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.