diff --git a/.changeset/long-lobsters-mate.md b/.changeset/long-lobsters-mate.md new file mode 100644 index 000000000000..aa813a88f306 --- /dev/null +++ b/.changeset/long-lobsters-mate.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: use hybrid scoping strategy for consistent specificity increase diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js b/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js index 3e510349403f..2d9368332cbe 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js @@ -70,14 +70,9 @@ export default class Selector { /** * @param {import('magic-string').default} code - * @param {string} attr - * @param {number} max_amount_class_specificity_increased + * @param {string} modifier */ - transform(code, attr, max_amount_class_specificity_increased) { - const amount_class_specificity_to_increase = - max_amount_class_specificity_increased - - this.blocks.filter((block) => block.should_encapsulate).length; - + transform(code, modifier) { /** @param {import('#compiler').Css.SimpleSelector} selector */ function remove_global_pseudo_class(selector) { code @@ -87,43 +82,50 @@ export default class Selector { /** * @param {Block} block - * @param {string} attr + * @param {string} modifier */ - function encapsulate_block(block, attr) { + function encapsulate_block(block, modifier) { for (const selector of block.selectors) { if (selector.type === 'PseudoClassSelector' && selector.name === 'global') { remove_global_pseudo_class(selector); } } + let i = block.selectors.length; while (i--) { const selector = block.selectors[i]; + if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') { if (selector.name !== 'root' && selector.name !== 'host') { - if (i === 0) code.prependRight(selector.start, attr); + if (i === 0) code.prependRight(selector.start, modifier); } continue; } + if (selector.type === 'TypeSelector' && selector.name === '*') { - code.update(selector.start, selector.end, attr); + code.update(selector.start, selector.end, modifier); } else { - code.appendLeft(selector.end, attr); + code.appendLeft(selector.end, modifier); } + break; } } - this.blocks.forEach((block, index) => { + + let first = true; + for (const block of this.blocks) { if (block.global) { remove_global_pseudo_class(block.selectors[0]); } - if (block.should_encapsulate) - encapsulate_block( - block, - index === this.blocks.length - 1 - ? attr.repeat(amount_class_specificity_to_increase + 1) - : attr - ); - }); + + if (block.should_encapsulate) { + // for the first occurrence, we use a classname selector, so that every + // encapsulated selector gets a +0-1-0 specificity bump. thereafter, + // we use a `:where` selector, which does not affect specificity + encapsulate_block(block, first ? modifier : `:where(${modifier})`); + first = false; + } + } } /** @param {import('../../types.js').ComponentAnalysis} analysis */ @@ -200,10 +202,6 @@ export default class Selector { } } } - - get_amount_class_specificity_increased() { - return this.blocks.filter((block) => block.should_encapsulate).length; - } } /** diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js index 09440172e426..7522de5ad039 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js @@ -97,17 +97,14 @@ class Rule { * @param {import('magic-string').default} code * @param {string} id * @param {Map} keyframes - * @param {number} max_amount_class_specificity_increased */ - transform(code, id, keyframes, max_amount_class_specificity_increased) { + transform(code, id, keyframes) { if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) { return; } - const attr = `.${id}`; - this.selectors.forEach((selector) => - selector.transform(code, attr, max_amount_class_specificity_increased) - ); + const modifier = `.${id}`; + this.selectors.forEach((selector) => selector.transform(code, modifier)); this.declarations.forEach((declaration) => declaration.transform(code, keyframes)); } @@ -125,13 +122,6 @@ class Rule { }); } - /** @returns number */ - get_max_amount_class_specificity_increased() { - return Math.max( - ...this.selectors.map((selector) => selector.get_amount_class_specificity_increased()) - ); - } - /** * @param {MagicString} code * @param {boolean} dev @@ -287,9 +277,8 @@ class Atrule { * @param {import('magic-string').default} code * @param {string} id * @param {Map} keyframes - * @param {number} max_amount_class_specificity_increased */ - transform(code, id, keyframes, max_amount_class_specificity_increased) { + transform(code, id, keyframes) { if (is_keyframes_node(this.node)) { let start = this.node.start + this.node.name.length + 1; while (code.original[start] === ' ') start += 1; @@ -309,7 +298,7 @@ class Atrule { } } this.children.forEach((child) => { - child.transform(code, id, keyframes, max_amount_class_specificity_increased); + child.transform(code, id, keyframes); }); } @@ -328,13 +317,6 @@ class Atrule { }); } - /** @returns {number} */ - get_max_amount_class_specificity_increased() { - return Math.max( - ...this.children.map((rule) => rule.get_max_amount_class_specificity_increased()) - ); - } - /** * @param {MagicString} code * @param {boolean} dev @@ -517,12 +499,8 @@ export default class Stylesheet { } }); - const max = Math.max( - ...this.children.map((rule) => rule.get_max_amount_class_specificity_increased()) - ); - for (const child of this.children) { - child.transform(code, this.id, this.keyframes, max); + child.transform(code, this.id, this.keyframes); } code.remove(0, this.ast.content.start); diff --git a/packages/svelte/tests/css/samples/child-combinator/expected.css b/packages/svelte/tests/css/samples/child-combinator/expected.css index 162b27582505..3143c231be9f 100644 --- a/packages/svelte/tests/css/samples/child-combinator/expected.css +++ b/packages/svelte/tests/css/samples/child-combinator/expected.css @@ -1,7 +1,7 @@ - main.svelte-xyz button.svelte-xyz.svelte-xyz { + main.svelte-xyz button:where(.svelte-xyz) { background-color: red; } - main.svelte-xyz div.svelte-xyz > button.svelte-xyz { + main.svelte-xyz div:where(.svelte-xyz) > button:where(.svelte-xyz) { background-color: blue; } diff --git a/packages/svelte/tests/css/samples/combinator-child/expected.css b/packages/svelte/tests/css/samples/combinator-child/expected.css index 1973e4c265c7..a473c7eca1fb 100644 --- a/packages/svelte/tests/css/samples/combinator-child/expected.css +++ b/packages/svelte/tests/css/samples/combinator-child/expected.css @@ -1,3 +1,3 @@ - .test.svelte-xyz > div.svelte-xyz { + .test.svelte-xyz > div:where(.svelte-xyz) { color: #0af; } diff --git a/packages/svelte/tests/css/samples/descendant-selector-non-top-level-outer/expected.css b/packages/svelte/tests/css/samples/descendant-selector-non-top-level-outer/expected.css index 1920ff993c05..47b8050970d7 100644 --- a/packages/svelte/tests/css/samples/descendant-selector-non-top-level-outer/expected.css +++ b/packages/svelte/tests/css/samples/descendant-selector-non-top-level-outer/expected.css @@ -1,3 +1,3 @@ - p.svelte-xyz span.svelte-xyz { + p.svelte-xyz span:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css b/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css index ddce5e38672d..87d8325df18a 100644 --- a/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css +++ b/packages/svelte/tests/css/samples/dynamic-element-tag/expected.css @@ -1,18 +1,18 @@ - div.svelte-xyz.svelte-xyz.svelte-xyz { + div.svelte-xyz { color: red; } - h2.svelte-xyz > p.svelte-xyz.svelte-xyz { + h2.svelte-xyz > p:where(.svelte-xyz) { color: red; } - h2.svelte-xyz span.svelte-xyz.svelte-xyz { + h2.svelte-xyz span:where(.svelte-xyz) { color: red; } - h2.svelte-xyz > span.svelte-xyz > b.svelte-xyz { + h2.svelte-xyz > span:where(.svelte-xyz) > b:where(.svelte-xyz) { color: red; } - h2.svelte-xyz span b.svelte-xyz.svelte-xyz { + h2.svelte-xyz span b:where(.svelte-xyz) { color: red; } - h2.svelte-xyz b.svelte-xyz.svelte-xyz { + h2.svelte-xyz b:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css index a97b5717e6e5..59c11c60e8ed 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css @@ -1,13 +1,13 @@ - .a.svelte-xyz ~ .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } - .b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz ~ .e.svelte-xyz ~ .f.svelte-xyz ~ .h.svelte-xyz { color: green; } - .b.svelte-xyz ~ .d.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } + .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .e:where(.svelte-xyz) ~ .f:where(.svelte-xyz) ~ .h:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .d:where(.svelte-xyz) ~ .h:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css index f848c300979f..e73e8c22e885 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css @@ -1,10 +1,10 @@ - .a.svelte-xyz ~ .b.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz { color: green; } - .a.svelte-xyz ~ .d.svelte-xyz { color: green; } - .b.svelte-xyz ~ .e.svelte-xyz { color: green; } - .c.svelte-xyz ~ .e.svelte-xyz { color: green; } - .d.svelte-xyz ~ .e.svelte-xyz { color: green; } - .a.svelte-xyz ~ .e.svelte-xyz { color: green; } + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b ~ .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-each-2/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-each-2/expected.css index f75ad23bd5b3..1c4ced3691ed 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-each-2/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-each-2/expected.css @@ -1,22 +1,22 @@ /* boundary of each */ - .a.svelte-xyz ~ .b.svelte-xyz { + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } - .c.svelte-xyz ~ .d.svelte-xyz { + .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } /* if array is empty */ - .a.svelte-xyz ~ .d.svelte-xyz { + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } /* if array has multiple items */ - .c.svelte-xyz ~ .b.svelte-xyz { + .c.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } /* normal sibling */ - .b.svelte-xyz ~ .c.svelte-xyz { + .b.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz { + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css index 25ae4651f4aa..dcb631ba3fe7 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css @@ -1,30 +1,30 @@ - .a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .h.svelte-xyz ~ .j.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .i.svelte-xyz ~ .j.svelte-xyz.svelte-xyz { color: green; } - .m.svelte-xyz ~ .m.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .m.svelte-xyz ~ .l.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz ~ .m.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .k.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .h.svelte-xyz ~ .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz ~ .i.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .j.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .h.svelte-xyz ~ .i.svelte-xyz ~ .j.svelte-xyz { color: green; } + .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .e.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .i.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .h:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .i:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; } + .m.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; } + .m.svelte-xyz ~ .l:where(.svelte-xyz) { color: green; } + .l.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .k:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .h.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } + .i.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; } + .j.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .h:where(.svelte-xyz) ~ .i:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .e ~ .f { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-each-else/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-each-else/expected.css index ccf9833c5472..ecd41f5f9f17 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-each-else/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-each-else/expected.css @@ -1,8 +1,8 @@ - .a.svelte-xyz ~ .b.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz { color: green; } - .b.svelte-xyz ~ .d.svelte-xyz { color: green; } - .c.svelte-xyz ~ .d.svelte-xyz { color: green; } - .a.svelte-xyz ~ .d.svelte-xyz { color: green; } + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b ~ .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/expected.css index 0a8e0dfb370e..879a33f70a23 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/expected.css @@ -1,60 +1,60 @@ /* boundary of each */ - .a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } /* nested boundary of each */ - .j.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; } - .j.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; } - .j.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; } - .k.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; } - .k.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; } - .k.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; } + .j.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; } + .j.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; } + .j.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; } + .k.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; } + .k.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; } + .k.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; } + .l.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; } + .l.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; } + .l.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; } /* parent each */ - .d.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } + .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .e.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } /* child each */ - .g.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } + .g.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } /* wrap around */ - .f.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } - .f.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } - .f.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } + .f.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .f.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .f.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } - .h.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } + .h.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .i.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } + .i.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } /* wrap around self */ - .d.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } - .f.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } - .h.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } + .d.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .e.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .f.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .h.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } + .i.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; } /* wrap around self ~ next */ - .e.svelte-xyz ~ .e.svelte-xyz ~ .f.svelte-xyz { color: green; } - .e.svelte-xyz ~ .e.svelte-xyz ~ .d.svelte-xyz { color: green; } - .h.svelte-xyz ~ .h.svelte-xyz ~ .i.svelte-xyz { color: green; } - .h.svelte-xyz ~ .h.svelte-xyz ~ .g.svelte-xyz { color: green; } + .e.svelte-xyz ~ .e:where(.svelte-xyz) ~ .f:where(.svelte-xyz) { color: green; } + .e.svelte-xyz ~ .e:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; } + .h.svelte-xyz ~ .h:where(.svelte-xyz) ~ .i:where(.svelte-xyz) { color: green; } + .h.svelte-xyz ~ .h:where(.svelte-xyz) ~ .g:where(.svelte-xyz) { color: green; } /* general siblings */ - .a.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .e.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } + .g.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-each/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-each/expected.css index 8612e52fde06..8e231ac746cf 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-each/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-each/expected.css @@ -1,3 +1,3 @@ - div.svelte-xyz ~ span.svelte-xyz { + div.svelte-xyz ~ span:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-former-element-in-slot/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-former-element-in-slot/expected.css index c4249e057090..5b9d08f8c3b2 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-former-element-in-slot/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-former-element-in-slot/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz ~ p.svelte-xyz { + h1.svelte-xyz ~ p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css index ef1aa33d9169..09ffab7b97bf 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css @@ -1,12 +1,12 @@ - .a.svelte-xyz ~ .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz ~ .c.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz ~ .c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz ~ .c.svelte-xyz ~ .d.svelte-xyz { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) ~ .c:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .c:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) ~ .c:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b ~ .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css index 804dfffbd13a..91dc1c26f20b 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css @@ -1,8 +1,8 @@ - .a.svelte-xyz ~ .b.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz { color: green; } - .a.svelte-xyz ~ .d.svelte-xyz { color: green; } - .b.svelte-xyz ~ .d.svelte-xyz { color: green; } - .c.svelte-xyz ~ .d.svelte-xyz { color: green; } + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b ~ .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-if/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-if/expected.css index 0cc40ca62b52..11c01b72d265 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-if/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-if/expected.css @@ -1,10 +1,10 @@ - .a.svelte-xyz ~ .b.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz { color: green; } - .a.svelte-xyz ~ .d.svelte-xyz { color: green; } - .b.svelte-xyz ~ .e.svelte-xyz { color: green; } - .c.svelte-xyz ~ .e.svelte-xyz { color: green; } - .d.svelte-xyz ~ .e.svelte-xyz { color: green; } - .a.svelte-xyz ~ .e.svelte-xyz { color: green; } + .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b ~ .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots-flattened/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots-flattened/expected.css index c4249e057090..5b9d08f8c3b2 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots-flattened/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots-flattened/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz ~ p.svelte-xyz { + h1.svelte-xyz ~ p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots/expected.css index c4249e057090..5b9d08f8c3b2 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz ~ p.svelte-xyz { + h1.svelte-xyz ~ p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-selects-slot-fallback/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-selects-slot-fallback/expected.css index c4249e057090..5b9d08f8c3b2 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-selects-slot-fallback/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-selects-slot-fallback/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz ~ p.svelte-xyz { + h1.svelte-xyz ~ p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css index f4c4354ca7c2..06590583e8e9 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css @@ -1,5 +1,5 @@ - .d.svelte-xyz ~ .e.svelte-xyz { color: green; } - .a.svelte-xyz ~ .g.svelte-xyz { color: green; } + .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a ~ .b { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slots-between/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-slots-between/expected.css index 7e613ad4ff54..0b174b0dd6c4 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-slots-between/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slots-between/expected.css @@ -1,11 +1,11 @@ - h1.svelte-xyz ~ span.svelte-xyz { + h1.svelte-xyz ~ span:where(.svelte-xyz) { color: green; } - h1.svelte-xyz ~ p.svelte-xyz { + h1.svelte-xyz ~ p:where(.svelte-xyz) { color: red; } - span.svelte-xyz ~ p.svelte-xyz { + span.svelte-xyz ~ p:where(.svelte-xyz) { color: blue; } diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css index 50feb567a248..530213faac1c 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css @@ -1,4 +1,4 @@ - .match.svelte-xyz > .svelte-xyz ~ .svelte-xyz { + .match.svelte-xyz > :where(.svelte-xyz) ~ :where(.svelte-xyz) { margin-left: 4px; } /* (unused) .not-match > * ~ * { diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css index 4adfd46fefcb..ff9874b9e45e 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator/expected.css @@ -1,11 +1,11 @@ - div.svelte-xyz ~ article.svelte-xyz.svelte-xyz { color: green; } - span.svelte-xyz ~ b.svelte-xyz.svelte-xyz { color: green; } - div.svelte-xyz span.svelte-xyz ~ b.svelte-xyz { color: green; } - .a.svelte-xyz ~ article.svelte-xyz.svelte-xyz { color: green; } - div.svelte-xyz ~ .b.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz { color: green; } - article.svelte-xyz ~ details.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz ~ details.svelte-xyz.svelte-xyz { color: green; } + div.svelte-xyz ~ article:where(.svelte-xyz) { color: green; } + span.svelte-xyz ~ b:where(.svelte-xyz) { color: green; } + div.svelte-xyz span:where(.svelte-xyz) ~ b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ article:where(.svelte-xyz) { color: green; } + div.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; } + article.svelte-xyz ~ details:where(.svelte-xyz) { color: green; } + .a.svelte-xyz ~ details:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) article ~ div { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/omit-scoping-attribute-global-descendants/expected.css b/packages/svelte/tests/css/samples/omit-scoping-attribute-global-descendants/expected.css index 5dd13d5a7900..2cc0e1ef2784 100644 --- a/packages/svelte/tests/css/samples/omit-scoping-attribute-global-descendants/expected.css +++ b/packages/svelte/tests/css/samples/omit-scoping-attribute-global-descendants/expected.css @@ -1,3 +1,3 @@ - html body .root.svelte-xyz p.svelte-xyz { + html body .root.svelte-xyz p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/omit-scoping-attribute-multiple-descendants/expected.css b/packages/svelte/tests/css/samples/omit-scoping-attribute-multiple-descendants/expected.css index 830dcfcfdb0a..e25eb319dda1 100644 --- a/packages/svelte/tests/css/samples/omit-scoping-attribute-multiple-descendants/expected.css +++ b/packages/svelte/tests/css/samples/omit-scoping-attribute-multiple-descendants/expected.css @@ -1,3 +1,3 @@ - .root.svelte-xyz p.svelte-xyz { + .root.svelte-xyz p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css b/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css index d83a385fd903..772529431050 100644 --- a/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css +++ b/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css @@ -1,3 +1,3 @@ - div.svelte-xyz section p.svelte-xyz { + div.svelte-xyz section p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace/expected.css b/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace/expected.css index f3662533b0fe..642a91dbb991 100644 --- a/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace/expected.css +++ b/packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace/expected.css @@ -1,3 +1,3 @@ - div.svelte-xyz p.svelte-xyz { + div.svelte-xyz p:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/preserve-specificity/expected.css b/packages/svelte/tests/css/samples/preserve-specificity/expected.css index e7c5af1e86b2..897ce85faaa9 100644 --- a/packages/svelte/tests/css/samples/preserve-specificity/expected.css +++ b/packages/svelte/tests/css/samples/preserve-specificity/expected.css @@ -1,8 +1,8 @@ - a.svelte-xyz b c span.svelte-xyz { + a.svelte-xyz b c span:where(.svelte-xyz) { color: red; font-size: 2em; font-family: 'Comic Sans MS'; } - .foo.svelte-xyz.svelte-xyz { + .foo.svelte-xyz { color: green; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.css index b24bd2974a16..ecb81eb4ecb4 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.css @@ -1,13 +1,13 @@ - .a.svelte-xyz + .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .g:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .h:where(.svelte-xyz) { color: green; } - .b.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz + .e.svelte-xyz + .f.svelte-xyz + .h.svelte-xyz { color: green; } - .b.svelte-xyz + .d.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } + .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .e:where(.svelte-xyz) + .f:where(.svelte-xyz) + .h:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .d:where(.svelte-xyz) + .h:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .g:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css index c8e2a2ce744c..8e68694ba73f 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css @@ -1,9 +1,9 @@ - .a.svelte-xyz + .b.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz { color: green; } - .a.svelte-xyz + .d.svelte-xyz { color: green; } - .b.svelte-xyz + .e.svelte-xyz { color: green; } - .c.svelte-xyz + .e.svelte-xyz { color: green; } - .d.svelte-xyz + .e.svelte-xyz { color: green; } + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a + .e { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-2/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-each-2/expected.css index cce5fe0373de..2a3f769002de 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-each-2/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-each-2/expected.css @@ -1,20 +1,20 @@ /* boundary of each */ - .a.svelte-xyz + .b.svelte-xyz { + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } - .c.svelte-xyz + .d.svelte-xyz { + .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; } /* if array is empty */ - .a.svelte-xyz + .d.svelte-xyz { + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } /* if array has multiple items */ - .c.svelte-xyz + .b.svelte-xyz { + .c.svelte-xyz + .b:where(.svelte-xyz) { color: green; } /* normal sibling */ - .b.svelte-xyz + .c.svelte-xyz { + .b.svelte-xyz + .c:where(.svelte-xyz) { color: green; } /* not match */ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css index 748eb9a87b99..55c0e9591301 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css @@ -1,18 +1,18 @@ - .a.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz + .c.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .d.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz + .j.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz + .h.svelte-xyz + .j.svelte-xyz { color: green; } - .g.svelte-xyz + .i.svelte-xyz + .j.svelte-xyz { color: green; } - .m.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } - .m.svelte-xyz + .l.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .d.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .e.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .i.svelte-xyz + .j:where(.svelte-xyz) { color: green; } + .g.svelte-xyz + .h:where(.svelte-xyz) + .j:where(.svelte-xyz) { color: green; } + .g.svelte-xyz + .i:where(.svelte-xyz) + .j:where(.svelte-xyz) { color: green; } + .m.svelte-xyz + .m:where(.svelte-xyz) { color: green; } + .m.svelte-xyz + .l:where(.svelte-xyz) { color: green; } + .l.svelte-xyz + .m:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a + .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-else/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-each-else/expected.css index ecdbb9e392d9..b955492dd5a1 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-each-else/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-each-else/expected.css @@ -1,7 +1,7 @@ - .a.svelte-xyz + .b.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz { color: green; } - .b.svelte-xyz + .d.svelte-xyz { color: green; } - .c.svelte-xyz + .d.svelte-xyz { color: green; } + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a + .d { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each-nested/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-each-nested/expected.css index 868c04a9e283..d9c2071436f7 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-each-nested/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-each-nested/expected.css @@ -1,53 +1,53 @@ /* boundary of each */ - .a.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .g:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .g:where(.svelte-xyz) { color: green; } /* nested boundary of each */ - .j.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } - .j.svelte-xyz + .n.svelte-xyz.svelte-xyz { color: green; } - .j.svelte-xyz + .o.svelte-xyz.svelte-xyz { color: green; } - .k.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } - .k.svelte-xyz + .n.svelte-xyz.svelte-xyz { color: green; } - .k.svelte-xyz + .o.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz + .n.svelte-xyz.svelte-xyz { color: green; } - .l.svelte-xyz + .o.svelte-xyz.svelte-xyz { color: green; } + .j.svelte-xyz + .m:where(.svelte-xyz) { color: green; } + .j.svelte-xyz + .n:where(.svelte-xyz) { color: green; } + .j.svelte-xyz + .o:where(.svelte-xyz) { color: green; } + .k.svelte-xyz + .m:where(.svelte-xyz) { color: green; } + .k.svelte-xyz + .n:where(.svelte-xyz) { color: green; } + .k.svelte-xyz + .o:where(.svelte-xyz) { color: green; } + .l.svelte-xyz + .m:where(.svelte-xyz) { color: green; } + .l.svelte-xyz + .n:where(.svelte-xyz) { color: green; } + .l.svelte-xyz + .o:where(.svelte-xyz) { color: green; } /* parent each */ - .d.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } + .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .e.svelte-xyz + .f:where(.svelte-xyz) { color: green; } /* child each */ - .g.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } + .g.svelte-xyz + .h:where(.svelte-xyz) { color: green; } /* wrap around */ - .f.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } - .f.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .f.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } + .f.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .f.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .f.svelte-xyz + .f:where(.svelte-xyz) { color: green; } - .h.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } + .h.svelte-xyz + .g:where(.svelte-xyz) { color: green; } + .i.svelte-xyz + .h:where(.svelte-xyz) { color: green; } + .i.svelte-xyz + .g:where(.svelte-xyz) { color: green; } /* wrap around self */ - .d.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } - .e.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } - .f.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } - .g.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } - .h.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } - .i.svelte-xyz + .i.svelte-xyz.svelte-xyz { color: green; } + .d.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .e.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .f.svelte-xyz + .f:where(.svelte-xyz) { color: green; } + .g.svelte-xyz + .g:where(.svelte-xyz) { color: green; } + .h.svelte-xyz + .h:where(.svelte-xyz) { color: green; } + .i.svelte-xyz + .i:where(.svelte-xyz) { color: green; } /* wrap around self + next */ - .e.svelte-xyz + .e.svelte-xyz + .f.svelte-xyz { color: green; } - .e.svelte-xyz + .e.svelte-xyz + .d.svelte-xyz { color: green; } - .h.svelte-xyz + .h.svelte-xyz + .i.svelte-xyz { color: green; } - .h.svelte-xyz + .h.svelte-xyz + .g.svelte-xyz { color: green; } + .e.svelte-xyz + .e:where(.svelte-xyz) + .f:where(.svelte-xyz) { color: green; } + .e.svelte-xyz + .e:where(.svelte-xyz) + .d:where(.svelte-xyz) { color: green; } + .h.svelte-xyz + .h:where(.svelte-xyz) + .i:where(.svelte-xyz) { color: green; } + .h.svelte-xyz + .h:where(.svelte-xyz) + .g:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a + .h { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-each/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-each/expected.css index 7898530b2dde..2fa5490d73fb 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-each/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-each/expected.css @@ -1,3 +1,3 @@ - div.svelte-xyz + span.svelte-xyz { + div.svelte-xyz + span:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-former-element-in-slot/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-former-element-in-slot/expected.css index db10a550a9d7..4416ca972afa 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-former-element-in-slot/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-former-element-in-slot/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz + span.svelte-xyz { + h1.svelte-xyz + span:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css index 80be620c8484..b0f00d0df7f6 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css @@ -1,12 +1,12 @@ - .a.svelte-xyz + .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .b.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; } - .a.svelte-xyz + .c.svelte-xyz + .c.svelte-xyz.svelte-xyz { color: green; } - .c.svelte-xyz + .c.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz + .c.svelte-xyz + .d.svelte-xyz { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) + .c:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .c:where(.svelte-xyz) + .d:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) + .c:where(.svelte-xyz) + .d:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b + .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive/expected.css index 9d747d7c8cf3..b2218542be44 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive/expected.css @@ -1,8 +1,8 @@ - .a.svelte-xyz + .b.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz { color: green; } - .a.svelte-xyz + .d.svelte-xyz { color: green; } - .b.svelte-xyz + .d.svelte-xyz { color: green; } - .c.svelte-xyz + .d.svelte-xyz { color: green; } + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .b + .c { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-if/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-if/expected.css index 9ea439879f09..ae9a1da88e63 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-if/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-if/expected.css @@ -1,9 +1,9 @@ - .a.svelte-xyz + .b.svelte-xyz { color: green; } - .a.svelte-xyz + .c.svelte-xyz { color: green; } - .a.svelte-xyz + .d.svelte-xyz { color: green; } - .b.svelte-xyz + .e.svelte-xyz { color: green; } - .c.svelte-xyz + .e.svelte-xyz { color: green; } - .d.svelte-xyz + .e.svelte-xyz { color: green; } + .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; } + .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; } + .b.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; } + .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a + .e { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-nested-slots-flattened/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-nested-slots-flattened/expected.css index db10a550a9d7..4416ca972afa 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-nested-slots-flattened/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-nested-slots-flattened/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz + span.svelte-xyz { + h1.svelte-xyz + span:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-nested-slots/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-nested-slots/expected.css index db10a550a9d7..4416ca972afa 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-nested-slots/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-nested-slots/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz + span.svelte-xyz { + h1.svelte-xyz + span:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-selects-slot-fallback/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-selects-slot-fallback/expected.css index db10a550a9d7..4416ca972afa 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-selects-slot-fallback/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-selects-slot-fallback/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz + span.svelte-xyz { + h1.svelte-xyz + span:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css index fe9354478780..f4c2572bdcef 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css @@ -1,4 +1,4 @@ - .d.svelte-xyz + .e.svelte-xyz { color: green; } + .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; } /* no match */ /* (unused) .a + .b { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slots-between/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-slots-between/expected.css index db10a550a9d7..4416ca972afa 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-slots-between/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-slots-between/expected.css @@ -1,3 +1,3 @@ - h1.svelte-xyz + span.svelte-xyz { + h1.svelte-xyz + span:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css index b16f083d63f0..4986c4f715c2 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-star/expected.css @@ -1,4 +1,4 @@ - .match.svelte-xyz > .svelte-xyz + .svelte-xyz { + .match.svelte-xyz > :where(.svelte-xyz) + :where(.svelte-xyz) { margin-left: 4px; } /* (unused) .not-match > * + * { diff --git a/packages/svelte/tests/css/samples/siblings-combinator-with-spread/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-with-spread/expected.css index d4680032e39d..d8afc77e74f3 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator-with-spread/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator-with-spread/expected.css @@ -1,2 +1,2 @@ - input.svelte-xyz:focus + div.svelte-xyz { color: red; } - input.svelte-xyz:focus ~ div.svelte-xyz { color: red; } + input.svelte-xyz:focus + div:where(.svelte-xyz) { color: red; } + input.svelte-xyz:focus ~ div:where(.svelte-xyz) { color: red; } diff --git a/packages/svelte/tests/css/samples/siblings-combinator/expected.css b/packages/svelte/tests/css/samples/siblings-combinator/expected.css index a4a0d169c33b..97a7a4689793 100644 --- a/packages/svelte/tests/css/samples/siblings-combinator/expected.css +++ b/packages/svelte/tests/css/samples/siblings-combinator/expected.css @@ -1,4 +1,4 @@ - div.svelte-xyz + article.svelte-xyz.svelte-xyz { + div.svelte-xyz + article:where(.svelte-xyz) { color: green; } /* (unused) article + div { @@ -13,15 +13,15 @@ /* (unused) span + div { color: green; }*/ - span.svelte-xyz + b.svelte-xyz.svelte-xyz { + span.svelte-xyz + b:where(.svelte-xyz) { color: green; } - div.svelte-xyz span.svelte-xyz + b.svelte-xyz { + div.svelte-xyz span:where(.svelte-xyz) + b:where(.svelte-xyz) { color: green; } - .a.svelte-xyz + article.svelte-xyz.svelte-xyz { + .a.svelte-xyz + article:where(.svelte-xyz) { color: green; } - div.svelte-xyz + .b.svelte-xyz.svelte-xyz { + div.svelte-xyz + .b:where(.svelte-xyz) { color: green; } diff --git a/packages/svelte/tests/css/samples/unused-selector-child-combinator/expected.css b/packages/svelte/tests/css/samples/unused-selector-child-combinator/expected.css index bf423aee380d..ad93ca631a24 100644 --- a/packages/svelte/tests/css/samples/unused-selector-child-combinator/expected.css +++ b/packages/svelte/tests/css/samples/unused-selector-child-combinator/expected.css @@ -10,6 +10,6 @@ font-size: 48px; }*/ - div.svelte-xyz > .svelte-xyz { + div.svelte-xyz > :where(.svelte-xyz) { color: orange; } diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md index d01ae1900a36..b783041266ed 100644 --- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md +++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md @@ -82,6 +82,17 @@ Previously, a compound selector starting with a global modifier which has univer Previously Svelte would always insert the CSS hash last. This is no longer guaranteed in Svelte 5. This is only breaking if you [have very weird css selectors](https://stackoverflow.com/questions/15670631/does-the-order-of-classes-listed-on-an-item-affect-the-css). +### Scoped CSS uses :where(...) + +To avoid issues caused by unpredictable specificity changes, scoped CSS selectors now use `:where(.svelte-xyz123)` selector modifiers alongside `.svelte-xyz123` (where `xyz123` is, as previously, a hash of the `