fix: allow global next to & for nesting (#11784)

Fixes #11782

Author: paoloricciuti

.changeset/selfish-panthers-add.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow global next to `&` for nesting

packages/svelte/src/compiler/phases/3-transform/css/index.js

@@ -238,6 +238,13 @@ const visitors = {
 					}
 				}
 
+				// for any :global() at the middle of compound selector
+				for (const selector of relative_selector.selectors) {
+					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
+						remove_global_pseudo_class(selector);
+					}
+				}
+
 				if (relative_selector.selectors.some((s) => s.type === 'NestingSelector')) {
 					continue;
 				}
@@ -250,13 +257,6 @@ const visitors = {
 
 				context.state.specificity.bumped = true;
 
-				// for any :global() at the middle of compound selector
-				for (const selector of relative_selector.selectors) {
-					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-						remove_global_pseudo_class(selector);
-					}
-				}
-
 				let i = relative_selector.selectors.length;
 				while (i--) {
 					const selector = relative_selector.selectors[i];

packages/svelte/tests/css/samples/global-with-nesting/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: []
+});

packages/svelte/tests/css/samples/global-with-nesting/expected.css

@@ -0,0 +1,5 @@
+	div.svelte-xyz {
+		&.class{
+			color: red;
+		}
+	}

packages/svelte/tests/css/samples/global-with-nesting/expected.html

@@ -0,0 +1,6 @@
+<div class="svelte-xyz">
+</div>
+
+<div class="class svelte-xyz">
+	foo
+</div>

packages/svelte/tests/css/samples/global-with-nesting/input.svelte

@@ -0,0 +1,14 @@
+<style>
+	div {
+		&:global(.class){
+			color: red;
+		}
+	}
+</style>
+
+<div>
+</div>
+
+<div class="class">
+	foo
+</div>