diff --git a/.changeset/dull-coins-vanish.md b/.changeset/dull-coins-vanish.md new file mode 100644 index 0000000000..2b62f07bb1 --- /dev/null +++ b/.changeset/dull-coins-vanish.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: bump specificity on all members of a selector list diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js index ebb65a768c..102cf8d7cc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -191,6 +191,8 @@ const visitors = { next({ ...state, specificity }); }, ComplexSelector(node, context) { + const before_bumped = context.state.specificity.bumped; + /** @param {import('#compiler').Css.SimpleSelector} selector */ function remove_global_pseudo_class(selector) { context.state.code @@ -261,6 +263,8 @@ const visitors = { } context.next(); + + context.state.specificity.bumped = before_bumped; }, PseudoClassSelector(node, context) { if (node.name === 'is' || node.name === 'where') { diff --git a/packages/svelte/tests/css/samples/selector-list/expected.css b/packages/svelte/tests/css/samples/selector-list/expected.css new file mode 100644 index 0000000000..71ea967b64 --- /dev/null +++ b/packages/svelte/tests/css/samples/selector-list/expected.css @@ -0,0 +1,6 @@ + div.svelte-xyz { + color: red; + } + div.svelte-xyz span:where(.svelte-xyz), div.svelte-xyz div:where(.svelte-xyz) { + color: blue; + } diff --git a/packages/svelte/tests/css/samples/selector-list/expected.html b/packages/svelte/tests/css/samples/selector-list/expected.html new file mode 100644 index 0000000000..6c9d25ffc4 --- /dev/null +++ b/packages/svelte/tests/css/samples/selector-list/expected.html @@ -0,0 +1 @@ +