From ee9d5ef850e9931bc257157f6dc0097f2857d470 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 27 May 2024 10:03:44 +0200
Subject: [PATCH] fix: allow global next to `&` for nesting (#11784)

Fixes #11782
---
 .changeset/selfish-panthers-add.md                 |  5 +++++
 .../src/compiler/phases/3-transform/css/index.js   | 14 +++++++-------
 .../css/samples/global-with-nesting/_config.js     |  5 +++++
 .../css/samples/global-with-nesting/expected.css   |  5 +++++
 .../css/samples/global-with-nesting/expected.html  |  6 ++++++
 .../css/samples/global-with-nesting/input.svelte   | 14 ++++++++++++++
 6 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/selfish-panthers-add.md
 create mode 100644 packages/svelte/tests/css/samples/global-with-nesting/_config.js
 create mode 100644 packages/svelte/tests/css/samples/global-with-nesting/expected.css
 create mode 100644 packages/svelte/tests/css/samples/global-with-nesting/expected.html
 create mode 100644 packages/svelte/tests/css/samples/global-with-nesting/input.svelte

diff --git a/.changeset/selfish-panthers-add.md b/.changeset/selfish-panthers-add.md
new file mode 100644
index 000000000..9e685cca2
--- /dev/null
+++ b/.changeset/selfish-panthers-add.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow global next to `&` for nesting
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index 2fd588b9e..db119bd5d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/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];
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/_config.js b/packages/svelte/tests/css/samples/global-with-nesting/_config.js
new file mode 100644
index 000000000..292c6c49a
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-with-nesting/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: []
+});
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/expected.css b/packages/svelte/tests/css/samples/global-with-nesting/expected.css
new file mode 100644
index 000000000..dcb8a0e48
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-with-nesting/expected.css
@@ -0,0 +1,5 @@
+	div.svelte-xyz {
+		&.class{
+			color: red;
+		}
+	}
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/expected.html b/packages/svelte/tests/css/samples/global-with-nesting/expected.html
new file mode 100644
index 000000000..4dfc59f21
--- /dev/null
+++ b/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>
\ 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
new file mode 100644
index 000000000..0c73ed7a7
--- /dev/null
+++ b/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>
\ No newline at end of file