diff --git a/.changeset/sweet-mails-clean.md b/.changeset/sweet-mails-clean.md new file mode 100644 index 000000000000..f82913abf786 --- /dev/null +++ b/.changeset/sweet-mails-clean.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: encounter svelte:element in blocks as sibling during pruning css diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js index e719895798e1..fc8108e46e8e 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js @@ -933,11 +933,9 @@ function get_possible_element_siblings(node, adjacent_only, seen = new Set()) { /** * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock | Compiler.AST.SlotElement} node * @param {boolean} adjacent_only - * @returns {Map} + * @returns {Map} */ function get_possible_last_child(node, adjacent_only) { - /** @typedef {Map} NodeMap */ - /** @type {Array} */ let fragments = []; @@ -960,7 +958,7 @@ function get_possible_last_child(node, adjacent_only) { break; } - /** @type {NodeMap} */ + /** @type {Map} NodeMap */ const result = new Map(); let exhaustive = node.type !== 'SlotElement'; @@ -1001,9 +999,10 @@ function has_definite_elements(result) { } /** - * @template T - * @param {Map} from - * @param {Map} to + * @template T2 + * @template {T2} T1 + * @param {Map} from + * @param {Map} to * @returns {void} */ function add_to_map(from, to) { @@ -1028,7 +1027,7 @@ function higher_existence(exist1, exist2) { * @param {boolean} adjacent_only */ function loop_child(children, adjacent_only) { - /** @type {Map} */ + /** @type {Map} */ const result = new Map(); let i = children.length; @@ -1041,6 +1040,8 @@ function loop_child(children, adjacent_only) { if (adjacent_only) { break; } + } else if (child.type === 'SvelteElement') { + result.set(child, NODE_PROBABLY_EXISTS); } else if (is_block(child)) { const child_result = get_possible_last_child(child, adjacent_only); add_to_map(child_result, result); diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js index 7c50a76bbbd8..a7d6c3a99d3d 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js @@ -5,15 +5,15 @@ export default test({ { code: 'css_unused_selector', end: { - character: 496, + character: 627, column: 10, - line: 26 + line: 32 }, message: 'Unused CSS selector ".x + .bar"', start: { - character: 487, + character: 618, column: 1, - line: 26 + line: 32 } } ] diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css index 830d3667024b..d3fa8c97d2e1 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css @@ -9,5 +9,8 @@ .x.svelte-xyz ~ .foo:where(.svelte-xyz) span:where(.svelte-xyz) { color: green; } .x.svelte-xyz ~ .bar:where(.svelte-xyz) { color: green; } + .z.svelte-xyz + .z:where(.svelte-xyz) { color: green; } + .z.svelte-xyz ~ .z:where(.svelte-xyz) { color: green; } + /* no match */ /* (unused) .x + .bar { color: green; }*/ diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte index 1c51a2c516a1..655fd861539a 100644 --- a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte +++ b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte @@ -10,6 +10,9 @@

bar

+{#each [1]} + +{/each}