:deep(<inner-selector>) on vue 2 is not working

[paul-thebaud]

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 already posted this issue on ViteJS repository (see vitejs/vite#8959) but they told me to post here.

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.13

Used Package Manager

yarn

[kawamataryo]

Hi.
deep is the Vue3 syntax. For Vue2, use ::v-deep.

The following code worked.

::v-deep .app-child__hello {
    color: red;
}

Please see here.

[paul-thebaud]

I've seen, I've just thought I could use this syntax already with vue2 because it was working on webpack. Closing as the webpack behavior was non standard.