Skip to content

:global(A) B incorrectly compiles to just A #12404

Open
@GrantGryczan

Description

@GrantGryczan

Vue version

@d637bd6

Link to minimal reproduction

https://play.vuejs.org/#eNp9UbtOwzAU/RXLE0glVQVTiCoB6gADRcDoxU0ucVrH17Kv+1DVf+c6VWkH1NHn5XPsvXzyvlgnkKWsCHpvNcFUOSEqM5nOnd0JMl0UBFsS0WCyjTB6DUKLha5XbcDkmpFwSKwDsTFoQSyw2RXVmAOUq8YXqXyMtGNFrNFDw0jZWlxoe5Mtt8JMxD7ffY6+q9FiKIVPwVt4VO6QI4cQdsuRJI5yP11bLCM6HjH4layx952FMPfUoYtKlsfkzGlrcfM2YBQSjE54baBe/YMv4zZjSn4EiBDWoOQfRzq0QEd69vXOr3RB9tgky+or5CdEtCl3PMqeeTPXvtANbV97j4E6137H2ZbAxdOoXDQrD4NeSf7JlyvTz3Xvi4fBxy8qD7+exq0m

Steps to reproduce

In the minimal reproduction, open the Playground's compiled CSS tab.

What is expected?

body h1[data-v-7ba5bd90] {
  background-color: purple;
}

What is actually happening?

body {
  background-color: purple;
}

System Info

No response

Any additional comments?

You can just remove :global( and ) to get the desired effect here, but this is just a minimal reproduction to demonstrate the issue. If this pattern shouldn't be allowed (e.g. because it's useless due to the way scoped CSS is implemented), then this should produce an error instead of this confusingly incorrect output. This wasted a lot of my time.

Note that module doesn't seem to have this issue, only scoped. :deep also seems to work fine.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: sfc

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions