fix: allow `&` to appear at the top when inside a `:global(...)` (#13215)

It's a valid CSS rule, which means "select the scope root": https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector#using_outside_nested_rule

packages/svelte/messages/compile-errors/style.md

@@ -40,7 +40,7 @@
 
 ## css_nesting_selector_invalid_placement
 
-> Nesting selectors can only be used inside a rule
+> Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
 
 ## css_selector_invalid
 

packages/svelte/src/compiler/errors.js

@@ -536,12 +536,12 @@ export function css_global_invalid_selector_list(node) {
 }
 
 /**
- * Nesting selectors can only be used inside a rule
+ * Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_nesting_selector_invalid_placement(node) {
-	e(node, "css_nesting_selector_invalid_placement", "Nesting selectors can only be used inside a rule");
+	e(node, "css_nesting_selector_invalid_placement", "Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`");
 }
 
 /**

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

@@ -222,7 +222,18 @@ const css_visitors = {
 		const parent_rule = rule.metadata.parent_rule;
 
 		if (!parent_rule) {
-			e.css_nesting_selector_invalid_placement(node);
+			// https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector#using_outside_nested_rule
+			const children = rule.prelude.children;
+			const selectors = children[0].children[0].selectors;
+			if (
+				children.length > 1 ||
+				selectors.length > 1 ||
+				selectors[0].type !== 'PseudoClassSelector' ||
+				selectors[0].name !== 'global' ||
+				selectors[0].args?.children[0]?.children[0].selectors[0] !== node
+			) {
+				e.css_nesting_selector_invalid_placement(node);
+			}
 		} else if (
 			// :global { &.foo { ... } } is invalid
 			parent_rule.metadata.is_global_block &&

packages/svelte/tests/compiler-errors/samples/css-nesting-selector-root/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_nesting_selector_invalid_placement',
+		message:
+			'Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`',
+		position: [151, 152]
+	}
+});

packages/svelte/tests/compiler-errors/samples/css-nesting-selector-root/main.svelte

@@ -0,0 +1,16 @@
+<style>
+	/* valid */
+	:global(&) {
+		color: blue;
+	}
+	:global(& div) {
+		color: blue;
+	}
+	:global(&) div {
+		color: blue;
+	}
+	/* error */
+	:global(div &) {
+		color: blue;
+	}
+</style>