scoped css `:global` generate wrong style

[Innei]

Version

3.2.31

Reproduction link

github.com

Steps to reproduce

vue is support style scope css module modifier :global, and use :global modifier will gerenate not scope style, like this.

<style scoped>
:global(.ee) {
  background: #000;
}
</style>

will gerenate code:

<style type="text/css">.ee {
  background: #000;
}</style>

It's ok.

But, When I use :global with scoped classname, like this:

<style scoped>
.editor :global(.d) {
  @apply !bg-transparent;
}
</style>

Will gerenate:

<style type="text/css">
.d {       //  <--------------------------------
  background: #000;
}</style>

No error or warn, but missing class .editor[data-xxx]

And, the Deep Selectors like this:

<style scoped>
.editor >>> .e {
  background: #000;
}
.editor :deep(.a) {
  background: #000;
}
</style>

Got warning [@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead., but working, will gen:

.editor[data-v-7ba5bd90] .e {
  background: #000;
}
.editor[data-v-7ba5bd90] .a {
  background: #000;
}

Only :global will gerenate wrong code.

What is expected?

The behavior of :global should be the same as the CSS module.

What is actually happening?

Not the same.

---

It looks like vue was designed this way on purpose. But it's a bit against CSS Modules :global. It gets confusing for developers.

core/packages/compiler-sfc/src/stylePluginScoped.ts

Lines 165 to 168 in 1574edd

	if (value === ':global' || value === '::v-global') {
	selectorRoot.insertAfter(selector, n.nodes[0])
	selectorRoot.removeChild(selector)
	return false

[Niputi]

related issues vitejs/vite#6862

[posva]

Duplicate of #5167

As you found, use the :deep() pseudo selector instead: .scoped :deep(.global)