fix: handle sibling combinators within `:has` (#14213)

We didn't collect sibling elements of a given element to then check the `:has` selectors. This adds the logic for that. Fixes #14072

.changeset/four-jobs-care.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle sibling combinators within `:has`

packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

@@ -412,6 +412,8 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 		const child_elements = [];
 		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
 		const descendant_elements = [];
+		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
+		let sibling_elements; // do them lazy because it's rarely used and expensive to calculate
 
 		walk(
 			/** @type {Compiler.SvelteNode} */ (element.fragment),
@@ -457,7 +459,11 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				}
 
 				const descendants =
-					left_most_combinator.name === '>' ? child_elements : descendant_elements;
+					left_most_combinator.name === '+' || left_most_combinator.name === '~'
+						? (sibling_elements ??= get_following_sibling_elements(element))
+						: left_most_combinator.name === '>'
+							? child_elements
+							: descendant_elements;
 
 				let selector_matched = false;
 
@@ -675,6 +681,51 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 	return true;
 }
 
+/** @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element */
+function get_following_sibling_elements(element) {
+	/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.Root | null} */
+	let parent = get_element_parent(element);
+
+	if (!parent) {
+		parent = element;
+		while (parent?.type !== 'Root') {
+			parent = /** @type {any} */ (parent).parent;
+		}
+	}
+
+	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
+	const sibling_elements = [];
+	let found_parent = false;
+
+	for (const el of parent.fragment.nodes) {
+		if (found_parent) {
+			walk(
+				el,
+				{},
+				{
+					RegularElement(node) {
+						sibling_elements.push(node);
+					},
+					SvelteElement(node) {
+						sibling_elements.push(node);
+					}
+				}
+			);
+		} else {
+			/** @type {any} */
+			let child = element;
+			while (child !== el && child !== parent) {
+				child = child.parent;
+			}
+			if (child === el) {
+				found_parent = true;
+			}
+		}
+	}
+
+	return sibling_elements;
+}
+
 /**
  * @param {any} operator
  * @param {any} expected_value

packages/svelte/tests/css/samples/has/_config.js

@@ -127,6 +127,20 @@ export default test({
 				column: 11,
 				character: 1134
 			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "x:has(~ y)"',
+			start: {
+				line: 121,
+				column: 1,
+				character: 1326
+			},
+			end: {
+				line: 121,
+				column: 11,
+				character: 1336
+			}
 		}
 	]
 });

packages/svelte/tests/css/samples/has/expected.css

@@ -101,3 +101,13 @@
 	x.svelte-xyz:has(y:where(.svelte-xyz)) + c:where(.svelte-xyz) {
 		color: green;
 	}
+
+	x.svelte-xyz:has(+ c:where(.svelte-xyz)) {
+		color: green;
+	}
+	x.svelte-xyz:has(~ c:where(.svelte-xyz)) {
+		color: green;
+	}
+	/* (unused) x:has(~ y) {
+		color: red;
+	}*/

packages/svelte/tests/css/samples/has/input.svelte

@@ -111,4 +111,14 @@
 	x:has(y) + c {
 		color: green;
 	}
+
+	x:has(+ c) {
+		color: green;
+	}
+	x:has(~ c) {
+		color: green;
+	}
+	x:has(~ y) {
+		color: red;
+	}
 </style>