Skip to content

Commit

Permalink
fix: use hybrid scoping strategy for consistent specificity increase (#…
Browse files Browse the repository at this point in the history 
…10443)

* end the specificity wars

* tweaks

* document breaking change

* blurgh

---------

Co-authored-by: Rich Harris <[email protected]>
  • Loading branch information
@Rich-Harris
Rich-Harris and Rich-Harris authored Feb 9, 2024
1 parent 5dd9951 commit 999fca9
Show file tree
Hide file tree
Showing 51 changed files with 314 additions and 322 deletions.
5 changes: 5 additions & 0 deletions .changeset/long-lobsters-mate.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: use hybrid scoping strategy for consistent specificity increase
48 changes: 23 additions & 25 deletions packages/svelte/src/compiler/phases/2-analyze/css/Selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 */
Expand Down Expand Up @@ -200,10 +202,6 @@ export default class Selector {
}
}
}

get_amount_class_specificity_increased() {
return this.blocks.filter((block) => block.should_encapsulate).length;
}
}

/**
Expand Down
34 changes: 6 additions & 28 deletions packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,17 +97,14 @@ class Rule {
* @param {import('magic-string').default} code
* @param {string} id
* @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)) {
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));
}

Expand All @@ -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
Expand Down Expand Up @@ -287,9 +277,8 @@ class Atrule {
* @param {import('magic-string').default} code
* @param {string} id
* @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)) {
let start = this.node.start + this.node.name.length + 1;
while (code.original[start] === ' ') start += 1;
Expand All @@ -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);
});
}

Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions packages/svelte/tests/css/samples/child-combinator/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion packages/svelte/tests/css/samples/combinator-child/expected.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.test.svelte-xyz > div.svelte-xyz {
.test.svelte-xyz > div:where(.svelte-xyz) {
color: #0af;
}
2 changes: 1 addition & 1 deletion packages/svelte/tests/css/samples/descendant-selector-non-top-level-outer/expected.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
p.svelte-xyz span.svelte-xyz {
p.svelte-xyz span:where(.svelte-xyz) {
color: red;
}
12 changes: 6 additions & 6 deletions packages/svelte/tests/css/samples/dynamic-element-tag/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
24 changes: 12 additions & 12 deletions ...es/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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; }
14 changes: 7 additions & 7 deletions packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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; }*/
Expand Down
12 changes: 6 additions & 6 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-2/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
54 changes: 27 additions & 27 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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; }*/
10 changes: 5 additions & 5 deletions packages/svelte/tests/css/samples/general-siblings-combinator-each-else/expected.css
View file
Original file line number Diff line number Diff line change
@@ -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; }*/
Loading

0 comments on commit 999fca9

Please sign in to comment.