From 2378a61726cfe67f0f80ef9b5379595584e8e5e8 Mon Sep 17 00:00:00 2001
From: 7nik <kifiranet@gmail.com>
Date: Wed, 2 Apr 2025 18:28:26 +0300
Subject: [PATCH] fix: better scope `:global()` with nesting selector `&`

---
 .changeset/stupid-vans-draw.md                |  5 +++++
 .../phases/2-analyze/css/css-prune.js         | 20 +++++++++++++++----
 .../samples/global-with-nesting/expected.css  |  7 ++++++-
 .../samples/global-with-nesting/input.svelte  |  7 ++++++-
 4 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/stupid-vans-draw.md

diff --git a/.changeset/stupid-vans-draw.md b/.changeset/stupid-vans-draw.md
new file mode 100644
index 000000000000..24892f1e8f65
--- /dev/null
+++ b/.changeset/stupid-vans-draw.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better scope `:global()` with nesting selector `&`
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 0646c6341a5f..fbe6ca1cd379 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
@@ -1,6 +1,11 @@
 /** @import * as Compiler from '#compiler' */
 import { walk } from 'zimmerframe';
-import { get_parent_rules, get_possible_values, is_outer_global } from './utils.js';
+import {
+	get_parent_rules,
+	get_possible_values,
+	is_outer_global,
+	is_unscoped_pseudo_class
+} from './utils.js';
 import { regex_ends_with_whitespace, regex_starts_with_whitespace } from '../../patterns.js';
 import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 
@@ -286,20 +291,26 @@ function apply_combinator(relative_selector, rest_selectors, rule, node, directi
  * a global selector
  * @param {Compiler.AST.CSS.RelativeSelector} selector
  * @param {Compiler.AST.CSS.Rule} rule
+ * @returns {boolean}
  */
 function is_global(selector, rule) {
 	if (selector.metadata.is_global || selector.metadata.is_global_like) {
 		return true;
 	}
 
+	let explicitly_global = false;
+
 	for (const s of selector.selectors) {
 		/** @type {Compiler.AST.CSS.SelectorList | null} */
 		let selector_list = null;
+		let can_be_global = false;
 		let owner = rule;
 
 		if (s.type === 'PseudoClassSelector') {
 			if ((s.name === 'is' || s.name === 'where') && s.args) {
 				selector_list = s.args;
+			} else {
+				can_be_global = is_unscoped_pseudo_class(s);
 			}
 		}
 
@@ -308,18 +319,19 @@ function is_global(selector, rule) {
 			selector_list = owner.prelude;
 		}
 
-		const has_global_selectors = selector_list?.children.some((complex_selector) => {
+		const has_global_selectors = !!selector_list?.children.some((complex_selector) => {
 			return complex_selector.children.every((relative_selector) =>
 				is_global(relative_selector, owner)
 			);
 		});
+		explicitly_global ||= has_global_selectors;
 
-		if (!has_global_selectors) {
+		if (!has_global_selectors && !can_be_global) {
 			return false;
 		}
 	}
 
-	return true;
+	return explicitly_global || selector.selectors.length === 0;
 }
 
 const regex_backslash_and_following_character = /\\(.)/g;
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/expected.css b/packages/svelte/tests/css/samples/global-with-nesting/expected.css
index dcb8a0e48195..1863c57d853a 100644
--- a/packages/svelte/tests/css/samples/global-with-nesting/expected.css
+++ b/packages/svelte/tests/css/samples/global-with-nesting/expected.css
@@ -1,5 +1,10 @@
 	div.svelte-xyz {
 		&.class{
-			color: red;
+			color: green;
+		}
+	}
+	* {
+		&:hover .class.svelte-xyz {
+			color: green;
 		}
 	}
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/input.svelte b/packages/svelte/tests/css/samples/global-with-nesting/input.svelte
index 0c73ed7a78a2..2c1d2b5ebdac 100644
--- a/packages/svelte/tests/css/samples/global-with-nesting/input.svelte
+++ b/packages/svelte/tests/css/samples/global-with-nesting/input.svelte
@@ -1,7 +1,12 @@
 <style>
 	div {
 		&:global(.class){
-			color: red;
+			color: green;
+		}
+	}
+	:global(*) {
+		&:hover .class {
+			color: green;
 		}
 	}
 </style>