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.

https://github.com/vuejs/core/blob/1574edd490bd5cc0a213bc9f48ff41a1dc43ab22/packages/compiler-sfc/src/stylePluginScoped.ts#L165-L168

related issues https://github.com/vitejs/vite/issues/6862

Duplicate of https://github.com/vuejs/core/issues/5167

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