fix: do not prune selectors like :global(.foo):has(.scoped) (#15140)

Fixes #14910

The issue occurs only when :has() targets at a component's root element and because include_self is false.
I came to the conclusion that this is the same case as :root:has(.scoped).

Author: 7nik

.changeset/famous-bulldogs-tan.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: do not prune selectors like `:global(.foo):has(.scoped)`

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

@@ -339,13 +339,18 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 		let sibling_elements; // do them lazy because it's rarely used and expensive to calculate
 
 		// If this is a :has inside a global selector, we gotta include the element itself, too,
-		// because the global selector might be for an element that's outside the component (e.g. :root).
+		// because the global selector might be for an element that's outside the component,
+		// e.g. :root:has(.scoped), :global(.foo):has(.scoped), or :root { &:has(.scoped) {} }
 		const rules = get_parent_rules(rule);
 		const include_self =
 			rules.some((r) => r.prelude.children.some((c) => c.children.some((s) => is_global(s, r)))) ||
 			rules[rules.length - 1].prelude.children.some((c) =>
 				c.children.some((r) =>
-					r.selectors.some((s) => s.type === 'PseudoClassSelector' && s.name === 'root')
+					r.selectors.some(
+						(s) =>
+							s.type === 'PseudoClassSelector' &&
+							(s.name === 'root' || (s.name === 'global' && s.args))
+					)
 				)
 			);
 		if (include_self) {

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

@@ -197,6 +197,20 @@ export default test({
 				column: 16,
 				character: 1614
 			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":global(.foo):has(.unused)"',
+			start: {
+				line: 155,
+				column: 1,
+				character: 1684
+			},
+			end: {
+				line: 155,
+				column: 27,
+				character: 1710
+			}
 		}
 	]
 });

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

@@ -136,3 +136,10 @@
 			color: red;
 		}*/
 	}
+
+	.foo:has(x.svelte-xyz) {
+		color: green;
+	}
+	/* (unused) :global(.foo):has(.unused) {
+		color: red;
+	}*/

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

@@ -148,4 +148,11 @@
 			color: red;
 		}
 	}
+
+	:global(.foo):has(x) {
+		color: green;
+	}
+	:global(.foo):has(.unused) {
+		color: red;
+	}
 </style>