Vue version

3.4.19

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-ts-scss-63q1ja?file=src%2FApp.vue

Steps to reproduce

Write a DOM structure like

<div class="foo">
    I am in red!
    <div class="bar">
        I am in blue!
    </div>
</div>

Without :global()

<style scoped lang="scss">
.foo {
    color: red;

    .bar {
        color: blue;
    }
}
</style>

Result:

The first line is in red and the second line is in blue, it is right.

If with :global()

<style scoped lang="scss">
:global(.foo) {
    color: red;

    .bar {
        color: blue;
    }
}
</style>

What is expected?

Expect to render same as above.

.foo {
    color: red;
}

.foo .bar {
    color: blue;
}

What is actually happening?

Result:

Both two line is in blue.

This is because it was render to

.foo {
    color: red;
}

.foo {
    color: blue;
}

instead of

.foo {
    color: red;
}

.foo .bar {
    color: blue;
}

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 1.61 GB / 11.80 GB
  Binaries:
    Node: 20.6.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.5 - D:\Program Files\nodejs\npm.CMD
    pnpm: 7.26.3 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.112)
    Internet Explorer: 11.0.22621.1

Any additional comments?

I know the correct syntax is

:global(.foo) {
    color: red;
}

:global(.foo .bar) {
    color: blue;
}

:global(.foo .bar .baz) {
    // something others
}

However if you use with SCSS/Less/... to writing nesting rules, this will be very troublesome.