Cannot use :global() in scoped style in nesting rules like SCSS
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.