Skip to content

Scoped universal selector removed before combinator #13429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skirtles-code opened this issue Jun 2, 2025 · 1 comment
Open

Scoped universal selector removed before combinator #13429

skirtles-code opened this issue Jun 2, 2025 · 1 comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: sfc

Comments

@skirtles-code
Copy link
Contributor

skirtles-code commented Jun 2, 2025

Vue version

3.5.16 (but it doesn't appear to be version specific)

Link to minimal reproduction

https://play.vuejs.org/#eNqNUl1PwjAU/StNfVMcGMQHnCRqMNEHNcJjEzPbKxS7tmm7OUP4794WwcWQxbfufNx77snW9NrarK6AjmkeoLSqCDBhmpBcyJpwVXh/xaipAjhGE/GH8sCDNBrJO+l8yPtIdutmwI0W/xDOl9K1dLtX3m8FxU8fvhQQz40FgUiWwpJ1tLwZJ8CNycg2xBslBTkaDAaXTG+i85ickOxnXVt/Gow97Mn7admE9mjAhfpdLrKVNxrbS35GuSmtVOCebJzqGR1vJ0euUMp8PiQsuAp6O5wvgX8cwFe+iRijzw48uBoY3XOhcAsIW3o6e4QG33uyNKJSqO4gXwBvq7ZFR9lNpQXGbulS2vvSGhekXsz9tAmg/e6oGDQqN0nPKP5Ctx2n/8YdZufJh31ii681uDgTCxxmo+zsgm6+ATos2AM=

Steps to reproduce

Use a scoped selector that begins with a star followed by a combinator. e.g. * > .section, * + .section or * ~ .section.

What is expected?

The * should be preserved.

What is actually happening?

The * is removed, leading to an invalid CSS selector.

If the selector is nested then the resulting selector is valid, but it won't match the correct elements. In that scenario, & can be used to work around the issue.

Nesting also leads to problems with the descendant combinator (space), e.g.:

.outer {
  * .section {
    background-color: #f00;
  }
}

The * is important here, it ensures that direct children don't match. You can see the difference by removing the scoped in the Playground.

Any additional comments?

I believe this is unrelated to the other issues with * selectors that have been discussed recently, as those only apply to a trailing *, not a leading *.

@edison1105 edison1105 added scope: sfc 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Jun 3, 2025
@edison1105
Copy link
Member

this is also related to #10551

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: sfc
Projects
None yet
Development

No branches or pull requests

2 participants