fix: encounter svelte:element in blocks as sibling during pruning css (…

…#15165) Fixes #14890
sveltejs · Feb 3, 2025 · 5b30fbf · 5b30fbf
1 parent 73fa9d3
commit 5b30fbf
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 12 deletions.
diff --git a/.changeset/sweet-mails-clean.md 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
@@ -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<Compiler.AST.RegularElement, NodeExistsValue>}
+ * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement, NodeExistsValue>}
  */
 function get_possible_last_child(node, adjacent_only) {
-	/** @typedef {Map<Compiler.AST.RegularElement, NodeExistsValue>} NodeMap */
-
 	/** @type {Array<Compiler.AST.Fragment | undefined | null>} */
 	let fragments = [];
 
@@ -960,7 +958,7 @@ function get_possible_last_child(node, adjacent_only) {
 			break;
 	}
 
-	/** @type {NodeMap} */
+	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement, NodeExistsValue>} NodeMap */
 	const result = new Map();
 
 	let exhaustive = node.type !== 'SlotElement';
@@ -1001,9 +999,10 @@ function has_definite_elements(result) {
 }
 
 /**
- * @template T
- * @param {Map<T, NodeExistsValue>} from
- * @param {Map<T, NodeExistsValue>} to
+ * @template T2
+ * @template {T2} T1
+ * @param {Map<T1, NodeExistsValue>} from
+ * @param {Map<T2, NodeExistsValue>} 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<Compiler.AST.RegularElement, NodeExistsValue>} */
+	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement, NodeExistsValue>} */
 	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
@@ -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
@@ -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
@@ -10,6 +10,9 @@
 	</p>
 	<p class="bar">bar</p>
 </div>
+{#each [1]}
+	<svelte:element class="z" this={tag}></svelte:element>
+{/each}
 
 <style>
 	.before + .foo { color: green; }
@@ -22,6 +25,9 @@
 	.x ~ .foo span { color: green; }
 	.x ~ .bar { color: green; }
 
+	.z + .z { color: green; }
+	.z ~ .z { color: green; }
+
 	/* no match */
 	.x + .bar { color: green; }
 </style>