Skip to content

Commit 304db0d

Browse files
authored
fix: bump specificity on all members of a selector list (#10730)
Previously, only `div span` in `div span, div div { .. }` would've gotten the specificity bump
1 parent b1267b0 commit 304db0d

File tree

5 files changed

+29
-0
lines changed

5 files changed

+29
-0
lines changed

.changeset/dull-coins-vanish.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"svelte": patch
3+
---
4+
5+
fix: bump specificity on all members of a selector list

packages/svelte/src/compiler/phases/3-transform/css/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,8 @@ const visitors = {
191191
next({ ...state, specificity });
192192
},
193193
ComplexSelector(node, context) {
194+
const before_bumped = context.state.specificity.bumped;
195+
194196
/** @param {import('#compiler').Css.SimpleSelector} selector */
195197
function remove_global_pseudo_class(selector) {
196198
context.state.code
@@ -261,6 +263,8 @@ const visitors = {
261263
}
262264

263265
context.next();
266+
267+
context.state.specificity.bumped = before_bumped;
264268
},
265269
PseudoClassSelector(node, context) {
266270
if (node.name === 'is' || node.name === 'where') {
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
div.svelte-xyz {
2+
color: red;
3+
}
4+
div.svelte-xyz span:where(.svelte-xyz), div.svelte-xyz div:where(.svelte-xyz) {
5+
color: blue;
6+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="svelte-xyz"><span class="svelte-xyz">text</span><div class="svelte-xyz">text</div></div>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div>
2+
<span>text</span>
3+
<div>text</div>
4+
</div>
5+
6+
<style>
7+
div {
8+
color: red;
9+
}
10+
div span, div div {
11+
color: blue;
12+
}
13+
</style>

0 commit comments

Comments
 (0)