Vue 3.5.15 changed CSS semantics when using CSS nesting and the > operator

[jessevanassen]

Vue version

3.5.15

Link to minimal reproduction

https://play.vuejs.org/#eNp9UctOwzAQ/BXLR1RSodJLCZEA9VAOgICjJZQ62zSt47X8CEVV/521Q0oPVX2w1jOj2dn1nj8Yk3UB+IznHlqjSg+F0IzlVdMxqUrn7gVfIQpOsPDCR6JYMLfGoCq2BLZUAfJxRKNgqPLxiR09nf9RwJxEA1USZmTK9r1nwa6GUvhlKbe1xaCra4kK7Sx1uOvpQ8xGVz5OhgUfcU+metXU2cahpjnIiDHBJbamUWBfjW9QO8FnsQWjI3ipFH4/J8zbAKMBl2uQ2zP4xu0iJvibBQe2A8GPnC9tDb6n5x8vsKP6SLZYBUXqC+Q7OFQhZuxljzQ4xT7RpbSL1qD1ja4/3XznQbthqBg0LSXpBafPfLow+n/cSXb7t8wDbfGrAxs9aYGTbJrdTPnhF3n+tDs=

Steps to reproduce

In the reproduction, toggle between 3.5.14 and 3.5.15 to see the different behavior.

What is expected?

The div should have a blue background

What is actually happening?

The div doesn't have a background applied.

System Info

Any additional comments?

When the following CSS is written:

<style scoped>
	.class {
		> * {
			background-color: blue;
		}
  }
</style>

It used to be compiled to the following, in Vue 3.5.14:

.class {
> *[data-v-7ba5bd90] {
			background-color: blue;
}
}

In Vue 3.5.15, it is compiled to this instead:

.class {
[data-v-7ba5bd90]> [data-v-7ba5bd90] {
			background-color: blue;
}
}

In practice, this results in two problems:

• It means this generated CSS expects one or more elements between the .class and div (.class [data-v-7ba5bd90] > [data-v-7ba5bd90] instead of .class > [data-v-7ba5bd90]).
• It causes a regression in specificity. Before, it had a specificity of 0-2-0, due to the parent class and the generated [data-v- attribute. Now, it has a specificity of 0-3-0 due to the additional second attribute.

Workaround

Use & > * instead of > *. This compiles into the following, which is semantically the same to what it was in Vue 3.5.14:

.class {
&[data-v-7ba5bd90] > [data-v-7ba5bd90] {
			background-color: blue;
}
}

The difference in specificity remains though.

[edison1105]

duplicate of #13387

[skirtles-code]

For the specificity issue, see also #13401.

I've created #13405 for further discussion of how to handle trailing * selectors. The conversation is currently spread across various issues and PRs and I think it would be better to gather thoughts in one place.