From 1f8bf93ffa4546e06398025ebc63ec0bc73b1f4b Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 23 Jul 2024 11:20:24 +0200
Subject: [PATCH] switch to removing descendant combinator

---
 .../05-styles-and-classes.md                  |  2 ++
 .../svelte/messages/compile-errors/style.md   |  4 +--
 packages/svelte/src/compiler/errors.js        |  6 ++--
 .../phases/2-analyze/css/css-analyze.js       | 20 ++++-------
 .../compiler/phases/3-transform/css/index.js  | 30 ++++++++++++----
 packages/svelte/src/compiler/types/css.d.ts   |  2 +-
 .../css-global-block-declaration/_config.js   |  2 +-
 .../css-global-block-declaration/main.svelte  |  4 +++
 .../samples/css-global-modifier/_config.js    |  9 +++++
 .../samples/css-global-modifier/main.svelte   | 14 ++++++++
 .../samples/css-global-placement/_config.js   | 11 ------
 .../samples/css-global-placement/main.svelte  | 27 --------------
 .../tests/css/samples/global-block/_config.js |  8 ++---
 .../css/samples/global-block/expected.css     | 36 +++++++++++++++++--
 .../css/samples/global-block/input.svelte     | 32 ++++++++++++++++-
 .../samples/global-nested-block/expected.css  |  2 +-
 .../03-appendix/02-breaking-changes.md        |  2 +-
 17 files changed, 135 insertions(+), 76 deletions(-)
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-placement/_config.js
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-placement/main.svelte

diff --git a/documentation/docs/02-template-syntax/05-styles-and-classes.md b/documentation/docs/02-template-syntax/05-styles-and-classes.md
index 4a20be5eba..c2c3b7e799 100644
--- a/documentation/docs/02-template-syntax/05-styles-and-classes.md
+++ b/documentation/docs/02-template-syntax/05-styles-and-classes.md
@@ -94,6 +94,8 @@ To apply all styles after a certain point to a selector globally, use the `:glob
 
 The difference between `:global` and `:global(...)` is that `:global(...)` only makes all styles within its braces global, whereas `:global` makes all styles coming after it global, including those in nested CSS.
 
+If `:global` is preceeded by a descendant combinator, the combinator is removed from the output. That means that `div :global.x` is equivalent to `div.svelte-hash.x`.
+
 ## Nested style tags
 
 There should only be 1 top-level `<style>` tag per component.
diff --git a/packages/svelte/messages/compile-errors/style.md b/packages/svelte/messages/compile-errors/style.md
index 5fd8daec3b..c23b6cac76 100644
--- a/packages/svelte/messages/compile-errors/style.md
+++ b/packages/svelte/messages/compile-errors/style.md
@@ -18,9 +18,9 @@
 
 > A :global {...} block cannot be part of a selector list with more than one item
 
-## css_global_block_invalid_placement
+## css_global_block_invalid_modifier
 
-> :global cannot be at the end of a selector with children starting with a `&` (aka nesting) selector. Either remove those nested child selectors, or append the :global selector to the end of the previous selector (e.g. `div:global` instead of `div :global`)
+> A :global {...} block cannot modify an existing selector
 
 ## css_global_invalid_placement
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 18d175a52f..b4dcad4e4c 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -462,12 +462,12 @@ export function css_global_block_invalid_list(node) {
 }
 
 /**
- * :global cannot be at the end of a selector with children starting with a `&` (aka nesting) selector. Either remove those nested child selectors, or append the :global selector to the end of the previous selector (e.g. `div:global` instead of `div :global`)
+ * A :global {...} block cannot modify an existing selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
-export function css_global_block_invalid_placement(node) {
-	e(node, "css_global_block_invalid_placement", ":global cannot be at the end of a selector with children starting with a `&` (aka nesting) selector. Either remove those nested child selectors, or append the :global selector to the end of the previous selector (e.g. `div:global` instead of `div :global`)");
+export function css_global_block_invalid_modifier(node) {
+	e(node, "css_global_block_invalid_modifier", "A :global {...} block cannot modify an existing selector");
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index c085349805..e8f4e3b1cd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -142,7 +142,12 @@ const validation_visitors = {
 
 			const complex_selector = node.prelude.children[0];
 			const global_selector = complex_selector.children.find((r) => {
-				return r.selectors.some(is_global_block_selector);
+				const idx = r.selectors.findIndex(is_global_block_selector);
+				if (idx === 0) {
+					return true;
+				} else if (idx !== -1) {
+					e.css_global_block_invalid_modifier(r.selectors[idx]);
+				}
 			});
 
 			if (!global_selector) {
@@ -228,22 +233,9 @@ const validation_visitors = {
 	},
 	NestingSelector(node, context) {
 		const rule = /** @type {Css.Rule} */ (context.state.rule);
-
 		if (!rule.metadata.parent_rule) {
 			e.css_nesting_selector_invalid_placement(node);
 		}
-
-		if (rule.metadata.parent_rule.metadata.is_global_block) {
-			const last = rule.metadata.parent_rule.prelude.children[0].children.at(-1);
-			if (
-				last &&
-				is_global(last) &&
-				last.selectors[0].args === null &&
-				last.selectors.length === 1
-			) {
-				e.css_global_block_invalid_placement(last);
-			}
-		}
 	}
 };
 
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 99f56191ec..ef9c61b79f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -216,10 +216,18 @@ const visitors = {
 	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
-		/** @param {Css.PseudoClassSelector} selector */
-		function remove_global_pseudo_class(selector) {
+		/**
+		 * @param {Css.PseudoClassSelector} selector
+		 * @param {Css.Combinator | null} combinator
+		 */
+		function remove_global_pseudo_class(selector, combinator) {
 			if (selector.args === null) {
-				context.state.code.remove(selector.start, selector.start + ':global'.length);
+				let start = selector.start;
+				if (combinator?.name === ' ') {
+					// div :global.x becomes div.x
+					while (/\s/.test(context.state.code.original[start - 1])) start--;
+				}
+				context.state.code.remove(start, selector.start + ':global'.length);
 			} else {
 				context.state.code
 					.remove(selector.start, selector.start + ':global('.length)
@@ -229,9 +237,17 @@ const visitors = {
 
 		for (const relative_selector of node.children) {
 			if (relative_selector.metadata.is_global) {
-				remove_global_pseudo_class(
-					/** @type {Css.PseudoClassSelector} */ (relative_selector.selectors[0])
-				);
+				const global = /** @type {Css.PseudoClassSelector} */ (relative_selector.selectors[0]);
+				remove_global_pseudo_class(global, relative_selector.combinator);
+
+				if (
+					node.metadata.rule?.metadata.parent_rule &&
+					global.args === null &&
+					relative_selector.combinator === null
+				) {
+					// div { :global.x { ... } } becomes div { &.x { ... } }
+					context.state.code.prependRight(global.start, '&');
+				}
 				continue;
 			}
 
@@ -250,7 +266,7 @@ const visitors = {
 				// for any :global() or :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);
+						remove_global_pseudo_class(selector, null);
 					}
 				}
 
diff --git a/packages/svelte/src/compiler/types/css.d.ts b/packages/svelte/src/compiler/types/css.d.ts
index 2771efd493..8e168a2b74 100644
--- a/packages/svelte/src/compiler/types/css.d.ts
+++ b/packages/svelte/src/compiler/types/css.d.ts
@@ -82,7 +82,7 @@ export namespace Css {
 		metadata: {
 			/**
 			 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
-			 * Selectors like `:global(...).x` or `div:global` are not considered global, because they still need scoping.
+			 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
 			 */
 			is_global: boolean;
 			/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js
index 37ac580e0a..13a5e84aca 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'css_global_block_invalid_declaration',
 		message: 'A :global {...} block can only contain rules, not declarations',
-		position: [109, 119]
+		position: [140, 150]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte
index d3374f2aa0..bbbff39d52 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte
@@ -8,6 +8,10 @@
 		color: red;
 	}
 
+	:global.y {
+		color: red;
+	}
+
 	/* not ok */
 	:global {
 		color: red;
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
new file mode 100644
index 0000000000..f65671490d
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_modifier',
+		message: 'A :global {...} block cannot modify an existing selector',
+		position: [100, 107]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte
new file mode 100644
index 0000000000..fa4f9f3517
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte
@@ -0,0 +1,14 @@
+<style>
+	/* ok */
+	div :global.x {
+		color: red;
+	}
+	:global.x {
+		color: red;
+	}
+
+	/* not ok */
+	.x:global {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-placement/_config.js
deleted file mode 100644
index 49ec7367ef..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-placement/_config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'css_global_block_invalid_placement',
-		message:
-			':global cannot be at the end of a selector with children starting with a `&` (aka nesting) selector. ' +
-			'Either remove those nested child selectors, or append the :global selector to the end of the previous selector (e.g. `div:global` instead of `div :global`)',
-		position: [184, 192]
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-placement/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-placement/main.svelte
deleted file mode 100644
index b652519714..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-placement/main.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<style>
-	/* ok */
-	div :global {
-		p {
-			color: green;
-		}
-	}
-	div {
-		:global {
-			p {
-				color: green;
-			}
-		}
-	}
-	div:global {
-		&.x {
-			color: green;
-		}
-	}
-
-	/* not ok */
-	div :global {
-		&.x {
-			color: red;
-		}
-	}
-</style>
diff --git a/packages/svelte/tests/css/samples/global-block/_config.js b/packages/svelte/tests/css/samples/global-block/_config.js
index 2ed8ed5f06..9857247c9b 100644
--- a/packages/svelte/tests/css/samples/global-block/_config.js
+++ b/packages/svelte/tests/css/samples/global-block/_config.js
@@ -7,14 +7,14 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 39,
+				line: 63,
 				column: 1,
-				character: 492
+				character: 871
 			},
 			end: {
-				line: 39,
+				line: 63,
 				column: 16,
-				character: 507
+				character: 886
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index e899aafe6d..3acc1b0212 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -5,7 +5,7 @@
 		}
 	/*}*/
 
-	div.svelte-xyz  {
+	div.svelte-xyz {
 		.y {
 			color: green;
 		}
@@ -20,16 +20,46 @@
 		}
 	}
 
-	div.svelte-xyz  p {
+	div.svelte-xyz p {
 		.y {
 			color: green;
 		}
 	}
 
-	div.svelte-xyz .x {
+	/* `div { :global { &.x { ...} } }` is allowed ... */
+	div.svelte-xyz {
+		/* :global {*/
+			&.x {
+				color: green;
+			}
+		/*}*/
+	}
+
+	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	div.svelte-xyz {
+		&.x {
+			color: green;
+		}
+	}
+
+	/* ...so `div :global.x` must be, too ... */
+	div.svelte-xyz.x {
 		color: green;
 	}
 
+	/* ...and therefore `div { :global.x { ... }` aswell */
+	div.svelte-xyz {
+		&.x {
+			color: green;
+		}
+	}
+
+	div.svelte-xyz {
+		&.x {
+			color: green;
+		}
+	}
+
 	div.svelte-xyz:is(html.dark-mode *) {
 		color: green;
 	}
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index 67f058b6cf..2f2cdfcbd5 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -28,11 +28,41 @@
 		}
 	}
 
+	/* `div { :global { &.x { ...} } }` is allowed ... */
+	div {
+		:global {
+			&.x {
+				color: green;
+			}
+		}
+	}
+
+	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	div :global {
+		&.x {
+			color: green;
+		}
+	}
+
+	/* ...so `div :global.x` must be, too ... */
 	div :global.x {
 		color: green;
 	}
 
-	div:global:is(html.dark-mode *) {
+	/* ...and therefore `div { :global.x { ... }` aswell */
+	div {
+		:global.x {
+			color: green;
+		}
+	}
+
+	div {
+		& :global.x {
+			color: green;
+		}
+	}
+
+	div :global:is(html.dark-mode *) {
 		color: green;
 	}
 
diff --git a/packages/svelte/tests/css/samples/global-nested-block/expected.css b/packages/svelte/tests/css/samples/global-nested-block/expected.css
index fd76204493..22d855b4c6 100644
--- a/packages/svelte/tests/css/samples/global-nested-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-nested-block/expected.css
@@ -10,7 +10,7 @@
 			color: green;
 		}
 
-		p:where(.svelte-xyz)  {
+		p:where(.svelte-xyz) {
 			.y {
 				color: green;
 			}
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 78d352521d..2ee6c4520b 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -208,7 +208,7 @@ Previously, Svelte left `:is(...)` and `:where(...)` selectors untouched - it si
 
 ```diff
 - main {
-+ main:global {
++ main :global {
 	@apply bg-blue-100 dark:bg-blue-900
 }
 ```