Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

step1: input css

<style scoped>
  :global(.global) .scoped {
    color: #f00;
  }
  
  .scoped :global(.global) {
    display: block;
  }
  
  :global(.global) {
    display: block;
  }
  
  .scoped {
    background-color: #0f0;
  }
</style>

step2: get css

/* incorrect */
.global {
    color: #f00;
}

/* incorrect */
.global {
    display: block;
}

/* incorrect */
.global {
    display: block;
}

.scoped[data-v-f13b4d11] {
    background-color: #0f0;
}

What is expected?

step2: get css（expected）

/* expected */
.global .scoped[data-v-f13b4d11] {
    color: #f00;
}

/* expected */
.scoped[data-v-f13b4d11] .global {
    display: block;
}

.global {
    display: block;
}

.scoped[data-v-f13b4d11] {
    background-color: #0f0;
}

What is actually happening?

It may be a problem with css compilation.

Global is for a whole selector: https://v3.vuejs.org/api/sfc-style.html#style-scoped.

1. You don’t need global on that one
2. You should use a deep selector instead
3. That’s expected and actually the point of the global pseudo selector

@posva

The background is: I have a global style class name global on the html tag, and my component has a local style class name scoped.

the source code

<template>
  <h1 class="scoped">1</h1>
</template>

<style scoped>
  :deep(.global) .scoped {
    color: #f00;
  }
  
  .scoped :deep(.global) {
    display: block;
  }
  
  :global(.global) {
    display: block;
  }
  
  .scoped {
    background-color: #0f0;
  }
</style>

The style after compilation

[data-v-f13b4d11] .global .scoped { ❌
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.global .scoped[data-v-f13b4d11] ✅

    color: #f00;
}
.scoped[data-v-f13b4d11] .global {
    display: block;
}
.global {
    display: block;
}
.scoped[data-v-f13b4d11] {
    background-color: #0f0;
}

playground link

The generated CSS is correct, see https://v3.vuejs.org/api/sfc-style.html#style-scoped. You probably just need .global .scoped with nothing as I said before. Please, use the forum or the Discord chat for further questions.

To anyone looking for an answer to themeing, I wrote this postcss plugin with a :local() psuedo-selector: https://gist.github.com/tommie/c0eefee636033ff48cda50f89e3ccefa