From 529db97928fd9c3a3c2baa12f7f78fe7b2950d0b Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 9 Jul 2024 18:54:19 +0200
Subject: [PATCH] fix: handle nested `:global(...)` selectors (#12365)

fixes #10540
---
 .changeset/mean-numbers-cry.md                |  5 +++
 .../phases/2-analyze/css/css-prune.js         |  2 +-
 .../samples/global-nested-block/_config.js    | 34 ++++++++++++++++++
 .../samples/global-nested-block/expected.css  | 32 +++++++++++++++++
 .../samples/global-nested-block/input.svelte  | 35 +++++++++++++++++++
 5 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/mean-numbers-cry.md
 create mode 100644 packages/svelte/tests/css/samples/global-nested-block/_config.js
 create mode 100644 packages/svelte/tests/css/samples/global-nested-block/expected.css
 create mode 100644 packages/svelte/tests/css/samples/global-nested-block/input.svelte

diff --git a/.changeset/mean-numbers-cry.md b/.changeset/mean-numbers-cry.md
new file mode 100644
index 0000000000..6c97b3f2c3
--- /dev/null
+++ b/.changeset/mean-numbers-cry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle nested `:global(...)` selectors
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 6dca7a099c..893f543a5f 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
@@ -71,7 +71,7 @@ const visitors = {
 		const selectors = truncate(node);
 		const inner = selectors[selectors.length - 1];
 
-		if (node.metadata.rule?.metadata.parent_rule) {
+		if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) {
 			const has_explicit_nesting_selector = selectors.some((selector) =>
 				selector.selectors.some((s) => s.type === 'NestingSelector')
 			);
diff --git a/packages/svelte/tests/css/samples/global-nested-block/_config.js b/packages/svelte/tests/css/samples/global-nested-block/_config.js
new file mode 100644
index 0000000000..46679b8a28
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-nested-block/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused :global"',
+			start: {
+				line: 25,
+				column: 2,
+				character: 229
+			},
+			end: {
+				line: 25,
+				column: 17,
+				character: 244
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused :global(.z)"',
+			start: {
+				line: 31,
+				column: 2,
+				character: 283
+			},
+			end: {
+				line: 31,
+				column: 21,
+				character: 302
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/global-nested-block/expected.css b/packages/svelte/tests/css/samples/global-nested-block/expected.css
new file mode 100644
index 0000000000..22d855b4c6
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-nested-block/expected.css
@@ -0,0 +1,32 @@
+
+	div.svelte-xyz {
+		/* :global {*/
+			.x {
+				color: green;
+			}
+		/*}*/
+
+		.x {
+			color: green;
+		}
+
+		p:where(.svelte-xyz) {
+			.y {
+				color: green;
+			}
+		}
+
+		p:where(.svelte-xyz) .y {
+			color: green;
+		}
+
+		/* (unused) .unused :global {
+			.z {
+				color: red;
+			}
+		}*/
+
+		/* (unused) .unused :global(.z) {
+			color: red;
+		}*/
+	}
diff --git a/packages/svelte/tests/css/samples/global-nested-block/input.svelte b/packages/svelte/tests/css/samples/global-nested-block/input.svelte
new file mode 100644
index 0000000000..52062e158b
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-nested-block/input.svelte
@@ -0,0 +1,35 @@
+<div><p>{@html whatever}</p></div>
+
+<style>
+	div {
+		:global {
+			.x {
+				color: green;
+			}
+		}
+
+		:global(.x) {
+			color: green;
+		}
+
+		p :global {
+			.y {
+				color: green;
+			}
+		}
+
+		p :global(.y) {
+			color: green;
+		}
+
+		.unused :global {
+			.z {
+				color: red;
+			}
+		}
+
+		.unused :global(.z) {
+			color: red;
+		}
+	}
+</style>