CSS direct descendant wildcard rule no longer applied to child components

[ajuvonen]

Vue version

3.5.15

Link to minimal reproduction

https://play.vuejs.org/#eNp9Um1LwzAQ/ishIIK4dnPuSx0DlYEKvqB+DEhtb122NglJunWM/XcvyTo7USEf7u65lyd3z5ZeKxWtaqAJHZtMc2WJAVurCRO8UlJb8ri5lWgJEJbMtKzIaRR3Yq74lIlxHKqxDh0LlSpTC+gRMq5SLryFdrdbHOB4j4/jThm6xm5KICaTCnKMuCyydRU5N5i2ScishObKRZzRy7mGzHIpEpLJsq6Ehz7TbFloWYs8IRsoS7kuNEDA1jy384QM+v0T70/IWZhASJU2vT180e+rMKbbrYczpG57enjHBD7chCOOjOk5tUhfzHgRLYwUuGPfndEMd8BL0M/K8TWMJu1cRlPX78HHrK7hvI1nc8iWv8QXpnExRl80GNArYPSA2VQXYAM8fXuCBu0DWMm8LjH7H/AVDG7ScQxpN/hxpN3J82zvvVK4KN7NtLEgTPspR9Rvxuczilpx5//r6990h9Flu1Hc4g+5Oa0eKyznq73A7tw59kcJ6grYkbiw5ccKtKOJvYbRKBqM6O4Lhn0ERA==

Steps to reproduce

The Vue issue helper doesn't seem to create issues, so I have to fill this form manually.

Steps to reproduce:

Create a component with a scoped style block having a CSS rule affecting its direct descendants with a wildcard rule, such as:

> * {
  max-width: 200px;
}

What is expected?

CSS rule is applied to children, as it does in 3.5.14.

What is actually happening?

CSS rule is not applied to children after 3.5.15. If I remove the direct descendant arrow, or replace the wildcard with div, the example works again.

System Info

Any additional comments?

If this is by design, then my own interpretation is flawed, apologies in advance.

[edison1105]

related PR #12918

[jessevanassen]

Due to the PR, the generated CSS changed semantics, which looks like a bug in the implementation to me.

Before the change, your compiled CSS looked like this:

main {
> *[data-v-7ba5bd90] {
    /* */
}
}

After the change, it became

main {
[data-v-7ba5bd90]> [data-v-7ba5bd90] {
    /* */
}
}

So effectively it's main > *[data-v-7ba5bd90] vs main [data-v-7ba5bd90]> [data-v-7ba5bd90]: due to the change it "expects" another element in the middle which doesn't exist, which causes your style to not be applied.

For your case specifically, changing your css into

main {
    & > * {
/*  ^
 *  Notice the '&' here */    
    }
}

will fix it, as that will turn your compiled CSS into

main {
&[data-v-7ba5bd90]> [data-v-7ba5bd90] {
    /* */
}
}

and then [data-v-7ba5bd90] will apply to main instead of a different child element.

See also https://vuejs.org/api/sfc-css-features#deep-selectors, which is related but not the cause of your issue.

[jessevanassen]

Because my other issue was closed as a duplicate of this one, I want to highlight another edge case that's in the closed issue but isn't presented here: the fix changed specificity when using wildcards, which goes against the CSS spec:

Reproduction: https://play.vuejs.org/#eNp9UdFKwzAU/ZUQ32S2yNxLrQWVCfqg4nwMSE3uumxpEpK0Tsb+3ZvUzcFkb+k5555z7u2G3lqb9R3QgpYBWqvqABXThJRtLTWR4obR2lpGE4iwkH31IJ0PBBS0oEOZR+iAnQE3WhzTZR4t8VnmB0n46cO3AuK5sSAQOcM8UpFiHlMu+EIqQTbR4LPmq8aZTouC2M5ZBddMb6PF78j5sa5xAHqQlXkKquiIBgzTc9lkS280rp7GGOWmtVKBe7FBGu0ZLQbDyNVKma+nhAXXwWiH8wXw1T/40q8jxuirAw+uB0b3XKhdA2Ggp7NnWON7T7ZGdArVJ8g38EZ1seMgu8NVsfaBLrV9bK1xQerm3U/XAbTfLRWLRuU26RnF/39/YvW/uuPsKs3hPfGKHz246IkHHGeT7HJCtz9Lf8MM

<style scoped>
#app > :first-child {
  background: purple;
}

#app > * {
  background: green;
}
</style>

In Vue 3.5.14, the first declaration has a higher specificity than the second.
In Vue 3.5.15, the specificity of both declarations becomes the same, which means the first declaration isn't applied any more.

[edison1105]

closed via #13406