msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: use hybrid scoping strategy for consistent specificity increase (#10443)

Browse Source 
* end the specificity wars

* tweaks

* document breaking change

* blurgh

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/10434/head
Rich Harris 2 years ago committed by GitHub
parent 5dd9951cb6
commit 999fca97cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
51 changed files with 314 additions and 322 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/long-lobsters-mate.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: use hybrid scoping strategy for consistent specificity increase

48
packages/svelte/src/compiler/phases/2-analyze/css/Selector.js
Unescape View File

@ -70,14 +70,9 @@ export default class Selector {
/** /**
* @param {import('magic-string').default} code * @param {import('magic-string').default} code
* @param {string} attr * @param {string} modifier
* @param {number} max_amount_class_specificity_increased
*/ */
transform(code, attr, max_amount_class_specificity_increased) { transform(code, modifier) {
const amount_class_specificity_to_increase =
max_amount_class_specificity_increased -
this.blocks.filter((block) => block.should_encapsulate).length;
/** @param {import('#compiler').Css.SimpleSelector} selector */ /** @param {import('#compiler').Css.SimpleSelector} selector */
function remove_global_pseudo_class(selector) { function remove_global_pseudo_class(selector) {
code code
@ -87,43 +82,50 @@ export default class Selector {
/** /**
* @param {Block} block * @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) { for (const selector of block.selectors) {
if (selector.type === 'PseudoClassSelector' && selector.name === 'global') { if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
remove_global_pseudo_class(selector); remove_global_pseudo_class(selector);
} }
} }
let i = block.selectors.length; let i = block.selectors.length;
while (i--) { while (i--) {
const selector = block.selectors[i]; const selector = block.selectors[i];
if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') { if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') {
if (selector.name !== 'root' && selector.name !== 'host') { if (selector.name !== 'root' && selector.name !== 'host') {
if (i === 0) code.prependRight(selector.start, attr); if (i === 0) code.prependRight(selector.start, modifier);
} }
continue; continue;
} }
if (selector.type === 'TypeSelector' && selector.name === '*') { if (selector.type === 'TypeSelector' && selector.name === '*') {
code.update(selector.start, selector.end, attr); code.update(selector.start, selector.end, modifier);
} else { } else {
code.appendLeft(selector.end, attr); code.appendLeft(selector.end, modifier);
} }
break; break;
} }
} }
this.blocks.forEach((block, index) => {
let first = true;
for (const block of this.blocks) {
if (block.global) { if (block.global) {
remove_global_pseudo_class(block.selectors[0]); remove_global_pseudo_class(block.selectors[0]);
} }
if (block.should_encapsulate)
encapsulate_block( if (block.should_encapsulate) {
block, // for the first occurrence, we use a classname selector, so that every
index === this.blocks.length - 1 // encapsulated selector gets a +0-1-0 specificity bump. thereafter,
? attr.repeat(amount_class_specificity_to_increase + 1) // we use a `:where` selector, which does not affect specificity
: attr encapsulate_block(block, first ? modifier : `:where(${modifier})`);
); first = false;
}); }
}
} }
/** @param {import('../../types.js').ComponentAnalysis} analysis */ /** @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;
}
} }
/** /**

34
packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
Unescape View File

@ -97,17 +97,14 @@ class Rule {
* @param {import('magic-string').default} code * @param {import('magic-string').default} code
* @param {string} id * @param {string} id
* @param {Map<string, string>} keyframes * @param {Map<string, string>} 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)) { if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) {
return; return;
} }
const attr = `.${id}`; const modifier = `.${id}`;
this.selectors.forEach((selector) => this.selectors.forEach((selector) => selector.transform(code, modifier));
selector.transform(code, attr, max_amount_class_specificity_increased)
);
this.declarations.forEach((declaration) => declaration.transform(code, keyframes)); 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 {MagicString} code
* @param {boolean} dev * @param {boolean} dev
@ -287,9 +277,8 @@ class Atrule {
* @param {import('magic-string').default} code * @param {import('magic-string').default} code
* @param {string} id * @param {string} id
* @param {Map<string, string>} keyframes * @param {Map<string, string>} 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)) { if (is_keyframes_node(this.node)) {
let start = this.node.start + this.node.name.length + 1; let start = this.node.start + this.node.name.length + 1;
while (code.original[start] === ' ') start += 1; while (code.original[start] === ' ') start += 1;
@ -309,7 +298,7 @@ class Atrule {
} }
} }
this.children.forEach((child) => { 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 {MagicString} code
* @param {boolean} dev * @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) { 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); code.remove(0, this.ast.content.start);

4
packages/svelte/tests/css/samples/child-combinator/expected.css
Unescape View File

@ -1,7 +1,7 @@
main.svelte-xyz button.svelte-xyz.svelte-xyz { main.svelte-xyz button:where(.svelte-xyz) {
background-color: red; 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; background-color: blue;
} }

2
packages/svelte/tests/css/samples/combinator-child/expected.css
Unescape View File

@ -1,3 +1,3 @@
.test.svelte-xyz > div.svelte-xyz { .test.svelte-xyz > div:where(.svelte-xyz) {
color: #0af; color: #0af;
} }

2
packages/svelte/tests/css/samples/descendant-selector-non-top-level-outer/expected.css
Unescape View File

@ -1,3 +1,3 @@
p.svelte-xyz span.svelte-xyz { p.svelte-xyz span:where(.svelte-xyz) {
color: red; color: red;
} }

12
packages/svelte/tests/css/samples/dynamic-element-tag/expected.css
Unescape View File

@ -1,18 +1,18 @@
div.svelte-xyz.svelte-xyz.svelte-xyz { div.svelte-xyz {
color: red; color: red;
} }
h2.svelte-xyz > p.svelte-xyz.svelte-xyz { h2.svelte-xyz > p:where(.svelte-xyz) {
color: red; color: red;
} }
h2.svelte-xyz span.svelte-xyz.svelte-xyz { h2.svelte-xyz span:where(.svelte-xyz) {
color: red; color: red;
} }
h2.svelte-xyz > span.svelte-xyz > b.svelte-xyz { h2.svelte-xyz > span:where(.svelte-xyz) > b:where(.svelte-xyz) {
color: red; color: red;
} }
h2.svelte-xyz span b.svelte-xyz.svelte-xyz { h2.svelte-xyz span b:where(.svelte-xyz) {
color: red; color: red;
} }
h2.svelte-xyz b.svelte-xyz.svelte-xyz { h2.svelte-xyz b:where(.svelte-xyz) {
color: red; color: red;
} }

24
packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css
Unescape View File

@ -1,13 +1,13 @@
.a.svelte-xyz ~ .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .h.svelte-xyz.svelte-xyz.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; } .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .e.svelte-xyz ~ .f.svelte-xyz ~ .h.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.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz ~ .d:where(.svelte-xyz) ~ .h:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }

14
packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css
Unescape View File

@ -1,10 +1,10 @@
.a.svelte-xyz ~ .b.svelte-xyz { color: green; } .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .d.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .e.svelte-xyz { color: green; } .b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .e.svelte-xyz { color: green; } .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .e.svelte-xyz { color: green; } .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .e.svelte-xyz { color: green; } .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b ~ .c { color: green; }*/ /* (unused) .b ~ .c { color: green; }*/

12
packages/svelte/tests/css/samples/general-siblings-combinator-each-2/expected.css
Unescape View File

@ -1,22 +1,22 @@
/* boundary of each */ /* boundary of each */
.a.svelte-xyz ~ .b.svelte-xyz { .a.svelte-xyz ~ .b:where(.svelte-xyz) {
color: green; color: green;
} }
.c.svelte-xyz ~ .d.svelte-xyz { .c.svelte-xyz ~ .d:where(.svelte-xyz) {
color: green; color: green;
} }
/* if array is empty */ /* if array is empty */
.a.svelte-xyz ~ .d.svelte-xyz { .a.svelte-xyz ~ .d:where(.svelte-xyz) {
color: green; color: green;
} }
/* if array has multiple items */ /* if array has multiple items */
.c.svelte-xyz ~ .b.svelte-xyz { .c.svelte-xyz ~ .b:where(.svelte-xyz) {
color: green; color: green;
} }
/* normal sibling */ /* normal sibling */
.b.svelte-xyz ~ .c.svelte-xyz { .b.svelte-xyz ~ .c:where(.svelte-xyz) {
color: green; color: green;
} }
.a.svelte-xyz ~ .c.svelte-xyz { .a.svelte-xyz ~ .c:where(.svelte-xyz) {
color: green; color: green;
} }

54
packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css
Unescape View File

@ -1,30 +1,30 @@
.a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.e.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.i.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .h.svelte-xyz ~ .j.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .h:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .i.svelte-xyz ~ .j.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .i:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; }
.m.svelte-xyz ~ .m.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .m.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
.m.svelte-xyz ~ .l.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .m.svelte-xyz ~ .l:where(.svelte-xyz) { color: green; }
.l.svelte-xyz ~ .m.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .k.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .k:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.h.svelte-xyz ~ .h.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .h.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
.i.svelte-xyz ~ .i.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
.j.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .j.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .j:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .h.svelte-xyz ~ .i.svelte-xyz ~ .j.svelte-xyz { color: green; } .g.svelte-xyz ~ .h:where(.svelte-xyz) ~ .i:where(.svelte-xyz) ~ .j:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .e ~ .f { color: green; }*/ /* (unused) .e ~ .f { color: green; }*/

10
packages/svelte/tests/css/samples/general-siblings-combinator-each-else/expected.css
Unescape View File

@ -1,8 +1,8 @@
.a.svelte-xyz ~ .b.svelte-xyz { color: green; } .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .d.svelte-xyz { color: green; } .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .d.svelte-xyz { color: green; } .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .d.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b ~ .c { color: green; }*/ /* (unused) .b ~ .c { color: green; }*/

88
packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/expected.css
Unescape View File

@ -1,60 +1,60 @@
/* boundary of each */ /* boundary of each */
.a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
/* nested boundary of each */ /* nested boundary of each */
.j.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
.j.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; }
.j.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; }
.k.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; } .k.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
.k.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; } .k.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; }
.k.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; } .k.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; }
.l.svelte-xyz ~ .m.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz ~ .m:where(.svelte-xyz) { color: green; }
.l.svelte-xyz ~ .n.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz ~ .n:where(.svelte-xyz) { color: green; }
.l.svelte-xyz ~ .o.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz ~ .o:where(.svelte-xyz) { color: green; }
/* parent each */ /* parent each */
.d.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.e.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
/* child each */ /* child each */
.g.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
/* wrap around */ /* wrap around */
.f.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.f.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.f.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.h.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .h.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.i.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
.i.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
/* wrap around self */ /* wrap around self */
.d.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.e.svelte-xyz ~ .e.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.f.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.h.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } .h.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
.i.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
/* wrap around self ~ next */ /* wrap around self ~ next */
.e.svelte-xyz ~ .e.svelte-xyz ~ .f.svelte-xyz { color: green; } .e.svelte-xyz ~ .e:where(.svelte-xyz) ~ .f:where(.svelte-xyz) { color: green; }
.e.svelte-xyz ~ .e.svelte-xyz ~ .d.svelte-xyz { color: green; } .e.svelte-xyz ~ .e:where(.svelte-xyz) ~ .d:where(.svelte-xyz) { color: green; }
.h.svelte-xyz ~ .h.svelte-xyz ~ .i.svelte-xyz { color: green; } .h.svelte-xyz ~ .h:where(.svelte-xyz) ~ .i:where(.svelte-xyz) { color: green; }
.h.svelte-xyz ~ .h.svelte-xyz ~ .g.svelte-xyz { color: green; } .h.svelte-xyz ~ .h:where(.svelte-xyz) ~ .g:where(.svelte-xyz) { color: green; }
/* general siblings */ /* general siblings */
.a.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .h.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .h:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .f.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .f:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.e.svelte-xyz ~ .g.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
.g.svelte-xyz ~ .i.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz ~ .i:where(.svelte-xyz) { color: green; }

2
packages/svelte/tests/css/samples/general-siblings-combinator-each/expected.css
Unescape View File

@ -1,3 +1,3 @@
div.svelte-xyz ~ span.svelte-xyz { div.svelte-xyz ~ span:where(.svelte-xyz) {
color: green; color: green;
} }

2
packages/svelte/tests/css/samples/general-siblings-combinator-former-element-in-slot/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz ~ p.svelte-xyz { h1.svelte-xyz ~ p:where(.svelte-xyz) {
color: red; color: red;
} }

16
packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css
Unescape View File

@ -1,12 +1,12 @@
.a.svelte-xyz ~ .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz.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; } .a.svelte-xyz ~ .c:where(.svelte-xyz) ~ .c:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .c.svelte-xyz ~ .d.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz ~ .c:where(.svelte-xyz) ~ .d:where(.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) ~ .d:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b ~ .c { color: green; }*/ /* (unused) .b ~ .c { color: green; }*/

10
packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css
Unescape View File

@ -1,8 +1,8 @@
.a.svelte-xyz ~ .b.svelte-xyz { color: green; } .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .d.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .d.svelte-xyz { color: green; } .b.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .d.svelte-xyz { color: green; } .c.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b ~ .c { color: green; }*/ /* (unused) .b ~ .c { color: green; }*/

14
packages/svelte/tests/css/samples/general-siblings-combinator-if/expected.css
Unescape View File

@ -1,10 +1,10 @@
.a.svelte-xyz ~ .b.svelte-xyz { color: green; } .a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .d.svelte-xyz { color: green; } .a.svelte-xyz ~ .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz ~ .e.svelte-xyz { color: green; } .b.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz ~ .e.svelte-xyz { color: green; } .c.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.d.svelte-xyz ~ .e.svelte-xyz { color: green; } .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .e.svelte-xyz { color: green; } .a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b ~ .c { color: green; }*/ /* (unused) .b ~ .c { color: green; }*/

2
packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots-flattened/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz ~ p.svelte-xyz { h1.svelte-xyz ~ p:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/general-siblings-combinator-nested-slots/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz ~ p.svelte-xyz { h1.svelte-xyz ~ p:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/general-siblings-combinator-selects-slot-fallback/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz ~ p.svelte-xyz { h1.svelte-xyz ~ p:where(.svelte-xyz) {
color: red; color: red;
} }

4
packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
Unescape View File

@ -1,5 +1,5 @@
.d.svelte-xyz ~ .e.svelte-xyz { color: green; } .d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .g.svelte-xyz { color: green; } .a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a ~ .b { color: green; }*/ /* (unused) .a ~ .b { color: green; }*/

6
packages/svelte/tests/css/samples/general-siblings-combinator-slots-between/expected.css
Unescape View File

@ -1,11 +1,11 @@
h1.svelte-xyz ~ span.svelte-xyz { h1.svelte-xyz ~ span:where(.svelte-xyz) {
color: green; color: green;
} }
h1.svelte-xyz ~ p.svelte-xyz { h1.svelte-xyz ~ p:where(.svelte-xyz) {
color: red; color: red;
} }
span.svelte-xyz ~ p.svelte-xyz { span.svelte-xyz ~ p:where(.svelte-xyz) {
color: blue; color: blue;
} }

2
packages/svelte/tests/css/samples/general-siblings-combinator-star/expected.css
Unescape View File

@ -1,4 +1,4 @@
.match.svelte-xyz > .svelte-xyz ~ .svelte-xyz { .match.svelte-xyz > :where(.svelte-xyz) ~ :where(.svelte-xyz) {
margin-left: 4px; margin-left: 4px;
} }
/* (unused) .not-match > * ~ * { /* (unused) .not-match > * ~ * {

16
packages/svelte/tests/css/samples/general-siblings-combinator/expected.css
Unescape View File

@ -1,11 +1,11 @@
div.svelte-xyz ~ article.svelte-xyz.svelte-xyz { color: green; } div.svelte-xyz ~ article:where(.svelte-xyz) { color: green; }
span.svelte-xyz ~ b.svelte-xyz.svelte-xyz { color: green; } span.svelte-xyz ~ b:where(.svelte-xyz) { color: green; }
div.svelte-xyz span.svelte-xyz ~ b.svelte-xyz { color: green; } div.svelte-xyz span:where(.svelte-xyz) ~ b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ article.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ article:where(.svelte-xyz) { color: green; }
div.svelte-xyz ~ .b.svelte-xyz.svelte-xyz { color: green; } div.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ .c.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ .c:where(.svelte-xyz) { color: green; }
article.svelte-xyz ~ details.svelte-xyz.svelte-xyz { color: green; } article.svelte-xyz ~ details:where(.svelte-xyz) { color: green; }
.a.svelte-xyz ~ details.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz ~ details:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) article ~ div { color: green; }*/ /* (unused) article ~ div { color: green; }*/

2
packages/svelte/tests/css/samples/omit-scoping-attribute-global-descendants/expected.css
Unescape View File

@ -1,3 +1,3 @@
html body .root.svelte-xyz p.svelte-xyz { html body .root.svelte-xyz p:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/omit-scoping-attribute-multiple-descendants/expected.css
Unescape View File

@ -1,3 +1,3 @@
.root.svelte-xyz p.svelte-xyz { .root.svelte-xyz p:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css
Unescape View File

@ -1,3 +1,3 @@
div.svelte-xyz section p.svelte-xyz { div.svelte-xyz section p:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/omit-scoping-attribute-whitespace/expected.css
Unescape View File

@ -1,3 +1,3 @@
div.svelte-xyz p.svelte-xyz { div.svelte-xyz p:where(.svelte-xyz) {
color: red; color: red;
} }

4
packages/svelte/tests/css/samples/preserve-specificity/expected.css
Unescape View File

@ -1,8 +1,8 @@
a.svelte-xyz b c span.svelte-xyz { a.svelte-xyz b c span:where(.svelte-xyz) {
color: red; color: red;
font-size: 2em; font-size: 2em;
font-family: 'Comic Sans MS'; font-family: 'Comic Sans MS';
} }
.foo.svelte-xyz.svelte-xyz { .foo.svelte-xyz {
color: green; color: green;
} }

24
packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.css
Unescape View File

@ -1,13 +1,13 @@
.a.svelte-xyz + .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .e.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .f.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .h.svelte-xyz.svelte-xyz.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; } .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .e.svelte-xyz + .f.svelte-xyz + .h.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.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz + .d:where(.svelte-xyz) + .h:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .g.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .g:where(.svelte-xyz) { color: green; }

12
packages/svelte/tests/css/samples/siblings-combinator-await/expected.css
Unescape View File

@ -1,9 +1,9 @@
.a.svelte-xyz + .b.svelte-xyz { color: green; } .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .c.svelte-xyz { color: green; } .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .d.svelte-xyz { color: green; } .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .e.svelte-xyz { color: green; } .b.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .e.svelte-xyz { color: green; } .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.d.svelte-xyz + .e.svelte-xyz { color: green; } .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a + .e { color: green; }*/ /* (unused) .a + .e { color: green; }*/

10
packages/svelte/tests/css/samples/siblings-combinator-each-2/expected.css
Unescape View File

@ -1,20 +1,20 @@
/* boundary of each */ /* boundary of each */
.a.svelte-xyz + .b.svelte-xyz { .a.svelte-xyz + .b:where(.svelte-xyz) {
color: green; color: green;
} }
.c.svelte-xyz + .d.svelte-xyz { .c.svelte-xyz + .d:where(.svelte-xyz) {
color: green; color: green;
} }
/* if array is empty */ /* if array is empty */
.a.svelte-xyz + .d.svelte-xyz { .a.svelte-xyz + .d:where(.svelte-xyz) {
color: green; color: green;
} }
/* if array has multiple items */ /* if array has multiple items */
.c.svelte-xyz + .b.svelte-xyz { .c.svelte-xyz + .b:where(.svelte-xyz) {
color: green; color: green;
} }
/* normal sibling */ /* normal sibling */
.b.svelte-xyz + .c.svelte-xyz { .b.svelte-xyz + .c:where(.svelte-xyz) {
color: green; color: green;
} }
/* not match */ /* not match */

30
packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/expected.css
Unescape View File

@ -1,18 +1,18 @@
.a.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .c.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.d.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.d.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.e.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.i.svelte-xyz + .j.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz + .j:where(.svelte-xyz) { color: green; }
.g.svelte-xyz + .h.svelte-xyz + .j.svelte-xyz { color: green; } .g.svelte-xyz + .h:where(.svelte-xyz) + .j:where(.svelte-xyz) { color: green; }
.g.svelte-xyz + .i.svelte-xyz + .j.svelte-xyz { color: green; } .g.svelte-xyz + .i:where(.svelte-xyz) + .j:where(.svelte-xyz) { color: green; }
.m.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } .m.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
.m.svelte-xyz + .l.svelte-xyz.svelte-xyz { color: green; } .m.svelte-xyz + .l:where(.svelte-xyz) { color: green; }
.l.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a + .c { color: green; }*/ /* (unused) .a + .c { color: green; }*/

8
packages/svelte/tests/css/samples/siblings-combinator-each-else/expected.css
Unescape View File

@ -1,7 +1,7 @@
.a.svelte-xyz + .b.svelte-xyz { color: green; } .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .c.svelte-xyz { color: green; } .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .d.svelte-xyz { color: green; } .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .d.svelte-xyz { color: green; } .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a + .d { color: green; }*/ /* (unused) .a + .d { color: green; }*/

72
packages/svelte/tests/css/samples/siblings-combinator-each-nested/expected.css
Unescape View File

@ -1,53 +1,53 @@
/* boundary of each */ /* boundary of each */
.a.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
/* nested boundary of each */ /* nested boundary of each */
.j.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
.j.svelte-xyz + .n.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz + .n:where(.svelte-xyz) { color: green; }
.j.svelte-xyz + .o.svelte-xyz.svelte-xyz { color: green; } .j.svelte-xyz + .o:where(.svelte-xyz) { color: green; }
.k.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } .k.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
.k.svelte-xyz + .n.svelte-xyz.svelte-xyz { color: green; } .k.svelte-xyz + .n:where(.svelte-xyz) { color: green; }
.k.svelte-xyz + .o.svelte-xyz.svelte-xyz { color: green; } .k.svelte-xyz + .o:where(.svelte-xyz) { color: green; }
.l.svelte-xyz + .m.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz + .m:where(.svelte-xyz) { color: green; }
.l.svelte-xyz + .n.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz + .n:where(.svelte-xyz) { color: green; }
.l.svelte-xyz + .o.svelte-xyz.svelte-xyz { color: green; } .l.svelte-xyz + .o:where(.svelte-xyz) { color: green; }
/* parent each */ /* parent each */
.d.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.e.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
/* child each */ /* child each */
.g.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz + .h:where(.svelte-xyz) { color: green; }
/* wrap around */ /* wrap around */
.f.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.f.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.f.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.h.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } .h.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
.i.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz + .h:where(.svelte-xyz) { color: green; }
.i.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
/* wrap around self */ /* wrap around self */
.d.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } .d.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.e.svelte-xyz + .e.svelte-xyz.svelte-xyz { color: green; } .e.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.f.svelte-xyz + .f.svelte-xyz.svelte-xyz { color: green; } .f.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
.g.svelte-xyz + .g.svelte-xyz.svelte-xyz { color: green; } .g.svelte-xyz + .g:where(.svelte-xyz) { color: green; }
.h.svelte-xyz + .h.svelte-xyz.svelte-xyz { color: green; } .h.svelte-xyz + .h:where(.svelte-xyz) { color: green; }
.i.svelte-xyz + .i.svelte-xyz.svelte-xyz { color: green; } .i.svelte-xyz + .i:where(.svelte-xyz) { color: green; }
/* wrap around self + next */ /* wrap around self + next */
.e.svelte-xyz + .e.svelte-xyz + .f.svelte-xyz { color: green; } .e.svelte-xyz + .e:where(.svelte-xyz) + .f:where(.svelte-xyz) { color: green; }
.e.svelte-xyz + .e.svelte-xyz + .d.svelte-xyz { color: green; } .e.svelte-xyz + .e:where(.svelte-xyz) + .d:where(.svelte-xyz) { color: green; }
.h.svelte-xyz + .h.svelte-xyz + .i.svelte-xyz { color: green; } .h.svelte-xyz + .h:where(.svelte-xyz) + .i:where(.svelte-xyz) { color: green; }
.h.svelte-xyz + .h.svelte-xyz + .g.svelte-xyz { color: green; } .h.svelte-xyz + .h:where(.svelte-xyz) + .g:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a + .h { color: green; }*/ /* (unused) .a + .h { color: green; }*/

2
packages/svelte/tests/css/samples/siblings-combinator-each/expected.css
Unescape View File

@ -1,3 +1,3 @@
div.svelte-xyz + span.svelte-xyz { div.svelte-xyz + span:where(.svelte-xyz) {
color: green; color: green;
} }

2
packages/svelte/tests/css/samples/siblings-combinator-former-element-in-slot/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz + span.svelte-xyz { h1.svelte-xyz + span:where(.svelte-xyz) {
color: red; color: red;
} }

16
packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css
Unescape View File

@ -1,12 +1,12 @@
.a.svelte-xyz + .b.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .c.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .d.svelte-xyz.svelte-xyz.svelte-xyz { color: green; } .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .d.svelte-xyz.svelte-xyz.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; } .a.svelte-xyz + .c:where(.svelte-xyz) + .c:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .c.svelte-xyz + .d.svelte-xyz.svelte-xyz { color: green; } .c.svelte-xyz + .c:where(.svelte-xyz) + .d:where(.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) + .d:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b + .c { color: green; }*/ /* (unused) .b + .c { color: green; }*/

10
packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive/expected.css
Unescape View File

@ -1,8 +1,8 @@
.a.svelte-xyz + .b.svelte-xyz { color: green; } .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .c.svelte-xyz { color: green; } .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .d.svelte-xyz { color: green; } .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .d.svelte-xyz { color: green; } .b.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .d.svelte-xyz { color: green; } .c.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .b + .c { color: green; }*/ /* (unused) .b + .c { color: green; }*/

12
packages/svelte/tests/css/samples/siblings-combinator-if/expected.css
Unescape View File

@ -1,9 +1,9 @@
.a.svelte-xyz + .b.svelte-xyz { color: green; } .a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .c.svelte-xyz { color: green; } .a.svelte-xyz + .c:where(.svelte-xyz) { color: green; }
.a.svelte-xyz + .d.svelte-xyz { color: green; } .a.svelte-xyz + .d:where(.svelte-xyz) { color: green; }
.b.svelte-xyz + .e.svelte-xyz { color: green; } .b.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.c.svelte-xyz + .e.svelte-xyz { color: green; } .c.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
.d.svelte-xyz + .e.svelte-xyz { color: green; } .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a + .e { color: green; }*/ /* (unused) .a + .e { color: green; }*/

2
packages/svelte/tests/css/samples/siblings-combinator-nested-slots-flattened/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz + span.svelte-xyz { h1.svelte-xyz + span:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/siblings-combinator-nested-slots/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz + span.svelte-xyz { h1.svelte-xyz + span:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/siblings-combinator-selects-slot-fallback/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz + span.svelte-xyz { h1.svelte-xyz + span:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
Unescape View File

@ -1,4 +1,4 @@
.d.svelte-xyz + .e.svelte-xyz { color: green; } .d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
/* no match */ /* no match */
/* (unused) .a + .b { color: green; }*/ /* (unused) .a + .b { color: green; }*/

2
packages/svelte/tests/css/samples/siblings-combinator-slots-between/expected.css
Unescape View File

@ -1,3 +1,3 @@
h1.svelte-xyz + span.svelte-xyz { h1.svelte-xyz + span:where(.svelte-xyz) {
color: red; color: red;
} }

2
packages/svelte/tests/css/samples/siblings-combinator-star/expected.css
Unescape View File

@ -1,4 +1,4 @@
.match.svelte-xyz > .svelte-xyz + .svelte-xyz { .match.svelte-xyz > :where(.svelte-xyz) + :where(.svelte-xyz) {
margin-left: 4px; margin-left: 4px;
} }
/* (unused) .not-match > * + * { /* (unused) .not-match > * + * {

4
packages/svelte/tests/css/samples/siblings-combinator-with-spread/expected.css
Unescape View File

@ -1,2 +1,2 @@
input.svelte-xyz:focus + div.svelte-xyz { color: red; } input.svelte-xyz:focus + div:where(.svelte-xyz) { color: red; }
input.svelte-xyz:focus ~ div.svelte-xyz { color: red; } input.svelte-xyz:focus ~ div:where(.svelte-xyz) { color: red; }

10
packages/svelte/tests/css/samples/siblings-combinator/expected.css
Unescape View File

@ -1,4 +1,4 @@
div.svelte-xyz + article.svelte-xyz.svelte-xyz { div.svelte-xyz + article:where(.svelte-xyz) {
color: green; color: green;
} }
/* (unused) article + div { /* (unused) article + div {
@ -13,15 +13,15 @@
/* (unused) span + div { /* (unused) span + div {
color: green; color: green;
}*/ }*/
span.svelte-xyz + b.svelte-xyz.svelte-xyz { span.svelte-xyz + b:where(.svelte-xyz) {
color: green; color: green;
} }
div.svelte-xyz span.svelte-xyz + b.svelte-xyz { div.svelte-xyz span:where(.svelte-xyz) + b:where(.svelte-xyz) {
color: green; color: green;
} }
.a.svelte-xyz + article.svelte-xyz.svelte-xyz { .a.svelte-xyz + article:where(.svelte-xyz) {
color: green; color: green;
} }
div.svelte-xyz + .b.svelte-xyz.svelte-xyz { div.svelte-xyz + .b:where(.svelte-xyz) {
color: green; color: green;
} }

2
packages/svelte/tests/css/samples/unused-selector-child-combinator/expected.css
Unescape View File

@ -10,6 +10,6 @@
font-size: 48px; font-size: 48px;
}*/ }*/
div.svelte-xyz > .svelte-xyz { div.svelte-xyz > :where(.svelte-xyz) {
color: orange; color: orange;
} }

11
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -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). 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 `<style>` contents). You can read more detail [here](https://github.com/sveltejs/svelte/pull/10443).
In the event that you need to support ancient browsers that don't implement `:where`, you can manually alter the emitted CSS, at the cost of unpredictable specificity changes:
```js
// @errors: 2552
css = css.replace(/:where\((.+?)\)/, '$1');
```
### Renames of various error/warning codes ### Renames of various error/warning codes
Various error and warning codes have been renamed slightly. Various error and warning codes have been renamed slightly.

Write Preview
Loading…
Cancel
Save