From 13d86e901913ba0b953b547be3f06b2c796e57d6 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 25 Jul 2024 19:04:07 +0200
Subject: [PATCH] feat: allow `:global` in more places (alternative) (#12560)

* `div { :global { &.x { ... } } }` is equivalent to `div:global.x { ... }`, so the latter should be allowed, too

* finalize

* replace obsolete breaking change (which turned out to be a wrong change and was since reverted), add new breaking change note

* changeset

* regenerate types

* Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* always remove descendant selector before global

* error on lone `:global` with nested `&`, revert "remove spaces" rule

* regenerate types

* documentation

* oops

* switch to removing descendant combinator

* fix

* revert combinator validation relaxation

* error on first global being modified

* tweak docs

* tweak error messages

* Update documentation/docs/02-template-syntax/05-styles-and-classes.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* clarify

* tweak messages

* update tests

* tweak docs

* tweak `:global(...)` docs

* tweak docs

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/tricky-balloons-care.md            |   5 +
 .../05-styles-and-classes.md                  |  47 +++++---
 .../svelte/messages/compile-errors/style.md   |  20 ++--
 packages/svelte/src/compiler/errors.js        |  38 +++---
 .../phases/2-analyze/css/css-analyze.js       | 109 ++++++++++++------
 .../phases/2-analyze/css/css-prune.js         |  11 +-
 .../compiler/phases/3-transform/css/index.js  |  42 +++++--
 packages/svelte/src/compiler/types/css.d.ts   |  31 ++++-
 .../css-global-block-combinator-2/_config.js  |   9 ++
 .../css-global-block-combinator-2/main.svelte |  11 ++
 .../css-global-block-combinator/_config.js    |   4 +-
 .../css-global-block-combinator/main.svelte   |   8 +-
 .../css-global-block-declaration/_config.js   |   4 +-
 .../css-global-block-declaration/main.svelte  |  10 ++
 .../_config.js                                |  10 --
 .../main.svelte                               |   8 --
 .../css-global-block-modifier/main.svelte     |   3 -
 .../css-global-block-multiple/_config.js      |   2 +-
 .../css-global-modifier-start-1/_config.js    |   9 ++
 .../css-global-modifier-start-1/main.svelte   |  11 ++
 .../css-global-modifier-start-2/_config.js    |   9 ++
 .../css-global-modifier-start-2/main.svelte   |  22 ++++
 .../_config.js                                |   4 +-
 .../samples/css-global-modifier/main.svelte   |  11 ++
 .../tests/css/samples/global-block/_config.js |   8 +-
 .../css/samples/global-block/expected.css     |  54 +++++++++
 .../css/samples/global-block/input.svelte     |  53 +++++++++
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../css-invalid-global-placement/errors.json  |   2 +-
 .../css-invalid-global-selector-2/errors.json |   2 +-
 .../css-invalid-global-selector-3/errors.json |   2 +-
 .../css-invalid-global-selector-4/errors.json |   2 +-
 .../css-invalid-global-selector-5/errors.json |   2 +-
 .../css-invalid-global-selector-6/errors.json |   2 +-
 .../errors.json                               |   2 +-
 .../css-invalid-global-selector/errors.json   |   2 +-
 .../errors.json                               |   2 +-
 packages/svelte/types/index.d.ts              |  31 ++++-
 .../03-appendix/02-breaking-changes.md        |  13 ++-
 43 files changed, 483 insertions(+), 142 deletions(-)
 create mode 100644 .changeset/tricky-balloons-care.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte
 rename packages/svelte/tests/compiler-errors/samples/{css-global-block-modifier => css-global-modifier}/_config.js (56%)
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte

diff --git a/.changeset/tricky-balloons-care.md b/.changeset/tricky-balloons-care.md
new file mode 100644
index 0000000000..936f3ecddf
--- /dev/null
+++ b/.changeset/tricky-balloons-care.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow `:global` in more places
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 48cdeabce5..4a1497f2e6 100644
--- a/documentation/docs/02-template-syntax/05-styles-and-classes.md
+++ b/documentation/docs/02-template-syntax/05-styles-and-classes.md
@@ -25,31 +25,28 @@ This works by adding a class to affected elements, which is based on a hash of t
 </style>
 ```
 
-## :global
+## :global(...)
 
-To apply styles to a selector globally, use the `:global(...)` modifier.
+To apply styles to a single selector globally, use the `:global(...)` modifier:
 
 ```svelte
 <style>
 	:global(body) {
-		/* this will apply to <body> */
+		/* applies to <body> */
 		margin: 0;
 	}
 
 	div :global(strong) {
-		/* this will apply to all <strong> elements, in any
-			 component, that are inside <div> elements belonging
-			 to this component */
+		/* applies to all <strong> elements, in any component,
+		   that are inside <div> elements belonging
+		   to this component */
 		color: goldenrod;
 	}
 
-	p:global(.red) {
-		/* this will apply to all <p> elements belonging to this
-			 component with a class of red, even if class="red" does
-			 not initially appear in the markup, and is instead
-			 added at runtime. This is useful when the class
-			 of the element is dynamically applied, for instance
-			 when updating the element's classList property directly. */
+	p:global(.big.red) {
+		/* applies to all <p> elements belonging to this component
+		   with `class="big red"`, even if it is applied
+		   programmatically (for example by a library) */
 	}
 </style>
 ```
@@ -66,6 +63,30 @@ The `-global-` part will be removed when compiled, and the keyframe will then be
 </style>
 ```
 
+## :global
+
+To apply styles to a group of selectors globally, create a `:global {...}` block:
+
+```svelte
+<style>
+	:global {
+		/* applies to every <div> in your application */
+		div { ... }
+
+		/* applies to every <p> in your application */
+		p { ... }
+	}
+
+	.a :global {
+		/* applies to every `.b .c .d` element, in any component,
+		   that is inside an `.a` element in this component */
+		.b .c .d {...}
+	}
+</style>
+```
+
+> The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.
+
 ## 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 49a0d5a08d..b6ba7aa3ff 100644
--- a/packages/svelte/messages/compile-errors/style.md
+++ b/packages/svelte/messages/compile-errors/style.md
@@ -8,35 +8,35 @@
 
 ## css_global_block_invalid_combinator
 
-> A :global {...} block cannot follow a %name% combinator
+> A `:global` selector cannot follow a `%name%` combinator
 
 ## css_global_block_invalid_declaration
 
-> A :global {...} block can only contain rules, not declarations
+> A top-level `:global {...}` block can only contain rules, not declarations
 
 ## css_global_block_invalid_list
 
-> A :global {...} block cannot be part of a selector list with more than one item
+> A `:global` selector cannot be part of a selector list with more than one item
 
 ## css_global_block_invalid_modifier
 
-> A :global {...} block cannot modify an existing selector
+> A `:global` selector cannot modify an existing selector
 
-## css_global_block_invalid_placement
+## css_global_block_invalid_modifier_start
 
-> A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)
+> A `:global` selector can only be modified if it is a descendant of other selectors
 
 ## css_global_invalid_placement
 
-> :global(...) can be at the start or end of a selector sequence, but not in the middle
+> `:global(...)` can be at the start or end of a selector sequence, but not in the middle
 
 ## css_global_invalid_selector
 
-> :global(...) must contain exactly one selector
+> `:global(...)` must contain exactly one selector
 
 ## css_global_invalid_selector_list
 
-> :global(...) must not contain type or universal selectors when used in a compound selector
+> `:global(...)` must not contain type or universal selectors when used in a compound selector
 
 ## css_nesting_selector_invalid_placement
 
@@ -48,4 +48,4 @@
 
 ## css_type_selector_invalid_placement
 
-> :global(...) must not be followed with a type selector
+> `:global(...)` must not be followed by a type selector
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 040356df25..023b573e86 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -434,76 +434,76 @@ export function css_expected_identifier(node) {
 }
 
 /**
- * A :global {...} block cannot follow a %name% combinator
+ * A `:global` selector cannot follow a `%name%` combinator
  * @param {null | number | NodeLike} node
  * @param {string} name
  * @returns {never}
  */
 export function css_global_block_invalid_combinator(node, name) {
-	e(node, "css_global_block_invalid_combinator", `A :global {...} block cannot follow a ${name} combinator`);
+	e(node, "css_global_block_invalid_combinator", `A \`:global\` selector cannot follow a \`${name}\` combinator`);
 }
 
 /**
- * A :global {...} block can only contain rules, not declarations
+ * A top-level `:global {...}` block can only contain rules, not declarations
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_declaration(node) {
-	e(node, "css_global_block_invalid_declaration", "A :global {...} block can only contain rules, not declarations");
+	e(node, "css_global_block_invalid_declaration", "A top-level `:global {...}` block can only contain rules, not declarations");
 }
 
 /**
- * A :global {...} block cannot be part of a selector list with more than one item
+ * A `:global` selector cannot be part of a selector list with more than one item
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_list(node) {
-	e(node, "css_global_block_invalid_list", "A :global {...} block cannot be part of a selector list with more than one item");
+	e(node, "css_global_block_invalid_list", "A `:global` selector cannot be part of a selector list with more than one item");
 }
 
 /**
- * A :global {...} block cannot modify an existing selector
+ * A `:global` selector cannot modify an existing selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_modifier(node) {
-	e(node, "css_global_block_invalid_modifier", "A :global {...} block cannot modify an existing selector");
+	e(node, "css_global_block_invalid_modifier", "A `:global` selector cannot modify an existing selector");
 }
 
 /**
- * A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)
+ * A `:global` selector can only be modified if it is a descendant of other selectors
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
-export function css_global_block_invalid_placement(node) {
-	e(node, "css_global_block_invalid_placement", "A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)");
+export function css_global_block_invalid_modifier_start(node) {
+	e(node, "css_global_block_invalid_modifier_start", "A `:global` selector can only be modified if it is a descendant of other selectors");
 }
 
 /**
- * :global(...) can be at the start or end of a selector sequence, but not in the middle
+ * `:global(...)` can be at the start or end of a selector sequence, but not in the middle
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_invalid_placement(node) {
-	e(node, "css_global_invalid_placement", ":global(...) can be at the start or end of a selector sequence, but not in the middle");
+	e(node, "css_global_invalid_placement", "`:global(...)` can be at the start or end of a selector sequence, but not in the middle");
 }
 
 /**
- * :global(...) must contain exactly one selector
+ * `:global(...)` must contain exactly one selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_invalid_selector(node) {
-	e(node, "css_global_invalid_selector", ":global(...) must contain exactly one selector");
+	e(node, "css_global_invalid_selector", "`:global(...)` must contain exactly one selector");
 }
 
 /**
- * :global(...) must not contain type or universal selectors when used in a compound selector
+ * `:global(...)` must not contain type or universal selectors when used in a compound selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_invalid_selector_list(node) {
-	e(node, "css_global_invalid_selector_list", ":global(...) must not contain type or universal selectors when used in a compound selector");
+	e(node, "css_global_invalid_selector_list", "`:global(...)` must not contain type or universal selectors when used in a compound selector");
 }
 
 /**
@@ -525,12 +525,12 @@ export function css_selector_invalid(node) {
 }
 
 /**
- * :global(...) must not be followed with a type selector
+ * `:global(...)` must not be followed by a type selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_type_selector_invalid_placement(node) {
-	e(node, "css_type_selector_invalid_placement", ":global(...) must not be followed with a type selector");
+	e(node, "css_type_selector_invalid_placement", "`:global(...)` must not be followed by a type 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 e8b570b92d..4497617fbb 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
@@ -27,10 +27,25 @@ function is_global(relative_selector) {
 	return (
 		first.type === 'PseudoClassSelector' &&
 		first.name === 'global' &&
-		relative_selector.selectors.every(
-			(selector) =>
-				selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-		)
+		(first.args === null ||
+			// Only these two selector types keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			))
+	);
+}
+
+/**
+ * True if is `:global`
+ * @param {Css.SimpleSelector} simple_selector
+ */
+function is_global_block_selector(simple_selector) {
+	return (
+		simple_selector.type === 'PseudoClassSelector' &&
+		simple_selector.name === 'global' &&
+		simple_selector.args === null
 	);
 }
 
@@ -48,19 +63,12 @@ const analysis_visitors = {
 
 		node.metadata.rule = context.state.rule;
 
-		node.metadata.used = node.children.every(
+		node.metadata.used ||= node.children.every(
 			({ metadata }) => metadata.is_global || metadata.is_global_like
 		);
 	},
 	RelativeSelector(node, context) {
-		node.metadata.is_global =
-			node.selectors.length >= 1 &&
-			node.selectors[0].type === 'PseudoClassSelector' &&
-			node.selectors[0].name === 'global' &&
-			node.selectors.every(
-				(selector) =>
-					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-			);
+		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
 		if (node.selectors.length === 1) {
 			const first = node.selectors[0];
@@ -85,15 +93,30 @@ const analysis_visitors = {
 	Rule(node, context) {
 		node.metadata.parent_rule = context.state.rule;
 
-		// `:global {...}` or `div :global {...}`
 		node.metadata.is_global_block = node.prelude.children.some((selector) => {
-			const last = selector.children[selector.children.length - 1];
+			let is_global_block = false;
 
-			const s = last.selectors[last.selectors.length - 1];
+			for (const child of selector.children) {
+				const idx = child.selectors.findIndex(is_global_block_selector);
 
-			if (s.type === 'PseudoClassSelector' && s.name === 'global' && s.args === null) {
-				return true;
+				if (is_global_block) {
+					// All selectors after :global are unscoped
+					child.metadata.is_global_like = true;
+				}
+
+				if (idx !== -1) {
+					is_global_block = true;
+					for (let i = idx + 1; i < child.selectors.length; i++) {
+						walk(/** @type {Css.Node} */ (child.selectors[i]), null, {
+							ComplexSelector(node) {
+								node.metadata.used = true;
+							}
+						});
+					}
+				}
 			}
+
+			return is_global_block;
 		});
 
 		context.next({
@@ -118,21 +141,35 @@ const validation_visitors = {
 			}
 
 			const complex_selector = node.prelude.children[0];
-			const relative_selector = complex_selector.children[complex_selector.children.length - 1];
+			const global_selector = complex_selector.children.find((r, selector_idx) => {
+				const idx = r.selectors.findIndex(is_global_block_selector);
+				if (idx === 0) {
+					if (r.selectors.length > 1 && selector_idx === 0 && node.metadata.parent_rule === null) {
+						e.css_global_block_invalid_modifier_start(r.selectors[1]);
+					}
+					return true;
+				} else if (idx !== -1) {
+					e.css_global_block_invalid_modifier(r.selectors[idx]);
+				}
+			});
 
-			if (relative_selector.selectors.length > 1) {
-				e.css_global_block_invalid_modifier(
-					relative_selector.selectors[relative_selector.selectors.length - 1]
-				);
+			if (!global_selector) {
+				throw new Error('Internal error: global block without :global selector');
 			}
 
-			if (relative_selector.combinator && relative_selector.combinator.name !== ' ') {
-				e.css_global_block_invalid_combinator(relative_selector, relative_selector.combinator.name);
+			if (global_selector.combinator && global_selector.combinator.name !== ' ') {
+				e.css_global_block_invalid_combinator(global_selector, global_selector.combinator.name);
 			}
 
 			const declaration = node.block.children.find((child) => child.type === 'Declaration');
 
-			if (declaration) {
+			if (
+				declaration &&
+				// :global { color: red; } is invalid, but foo :global { color: red; } is valid
+				node.prelude.children.length === 1 &&
+				node.prelude.children[0].children.length === 1 &&
+				node.prelude.children[0].children[0].selectors.length === 1
+			) {
 				e.css_global_block_invalid_declaration(declaration);
 			}
 		}
@@ -146,14 +183,7 @@ const validation_visitors = {
 			if (global) {
 				const idx = node.children.indexOf(global);
 
-				if (global.selectors[0].args === null && idx !== node.children.length - 1) {
-					// ensure `:global` is only at the end of a selector
-					e.css_global_block_invalid_placement(global.selectors[0]);
-				} else if (
-					global.selectors[0].args !== null &&
-					idx !== 0 &&
-					idx !== node.children.length - 1
-				) {
+				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
 					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 					for (let i = idx + 1; i < node.children.length; i++) {
 						if (!is_global(node.children[i])) {
@@ -196,8 +226,17 @@ const validation_visitors = {
 	},
 	NestingSelector(node, context) {
 		const rule = /** @type {Css.Rule} */ (context.state.rule);
-		if (!rule.metadata.parent_rule) {
+		const parent_rule = rule.metadata.parent_rule;
+		if (!parent_rule) {
 			e.css_nesting_selector_invalid_placement(node);
+		} else if (
+			// :global { &.foo { ... } } is invalid
+			parent_rule.metadata.is_global_block &&
+			!parent_rule.metadata.parent_rule &&
+			parent_rule.prelude.children[0].children.length === 1 &&
+			parent_rule.prelude.children[0].children[0].selectors.length === 1
+		) {
+			e.css_global_block_invalid_modifier_start(node);
 		}
 	}
 };
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 f238e3e075..95195d2608 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
@@ -295,12 +295,19 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					return false;
 				}
 
-				if (name === 'global' && relative_selector.selectors.length === 1) {
-					const args = /** @type {Compiler.Css.SelectorList} */ (selector.args);
+				if (
+					name === 'global' &&
+					selector.args !== null &&
+					relative_selector.selectors.length === 1
+				) {
+					const args = selector.args;
 					const complex_selector = args.children[0];
 					return apply_selector(complex_selector.children, rule, element, stylesheet);
 				}
 
+				// We came across a :global, everything beyond it is global and therefore a potential match
+				if (name === 'global' && selector.args === null) return true;
+
 				if ((name === 'is' || name === 'where') && selector.args) {
 					let matched = false;
 
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 bc3952eacc..ef9c61b79f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -92,7 +92,7 @@ const visitors = {
 
 		next();
 	},
-	Declaration(node, { state, next }) {
+	Declaration(node, { state }) {
 		const property = node.property && remove_css_prefix(node.property.toLowerCase());
 		if (property === 'animation' || property === 'animation-name') {
 			let index = node.start + node.property.length + 1;
@@ -140,7 +140,7 @@ const visitors = {
 		if (node.metadata.is_global_block) {
 			const selector = node.prelude.children[0];
 
-			if (selector.children.length === 1) {
+			if (selector.children.length === 1 && selector.children[0].selectors.length === 1) {
 				// `:global {...}`
 				state.code.prependRight(node.start, '/* ');
 				state.code.appendLeft(node.block.start + 1, '*/');
@@ -216,16 +216,38 @@ const visitors = {
 	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
-		/** @param {Css.SimpleSelector} selector */
-		function remove_global_pseudo_class(selector) {
-			context.state.code
-				.remove(selector.start, selector.start + ':global('.length)
-				.remove(selector.end - 1, selector.end);
+		/**
+		 * @param {Css.PseudoClassSelector} selector
+		 * @param {Css.Combinator | null} combinator
+		 */
+		function remove_global_pseudo_class(selector, combinator) {
+			if (selector.args === null) {
+				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)
+					.remove(selector.end - 1, selector.end);
+			}
 		}
 
 		for (const relative_selector of node.children) {
 			if (relative_selector.metadata.is_global) {
-				remove_global_pseudo_class(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;
 			}
 
@@ -241,10 +263,10 @@ const visitors = {
 					}
 				}
 
-				// for any :global() at the middle of compound selector
+				// 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 89a739713a..8e168a2b74 100644
--- a/packages/svelte/src/compiler/types/css.d.ts
+++ b/packages/svelte/src/compiler/types/css.d.ts
@@ -33,17 +33,32 @@ export namespace Css {
 		metadata: {
 			parent_rule: null | Rule;
 			has_local_selectors: boolean;
+			/**
+			 * `true` if the rule contains a `:global` selector, and therefore everything inside should be unscoped
+			 */
 			is_global_block: boolean;
 		};
 	}
 
+	/**
+	 * A list of selectors, e.g. `a, b, c {}`
+	 */
 	export interface SelectorList extends BaseNode {
 		type: 'SelectorList';
+		/**
+		 * The `a`, `b` and `c` in `a, b, c {}`
+		 */
 		children: ComplexSelector[];
 	}
 
+	/**
+	 * A complex selector, e.g. `a b c {}`
+	 */
 	export interface ComplexSelector extends BaseNode {
 		type: 'ComplexSelector';
+		/**
+		 * The `a`, `b` and `c` in `a b c {}`
+		 */
 		children: RelativeSelector[];
 		metadata: {
 			rule: null | Rule;
@@ -51,14 +66,26 @@ export namespace Css {
 		};
 	}
 
+	/**
+	 * A relative selector, e.g the `a` and `> b` in `a > b {}`
+	 */
 	export interface RelativeSelector extends BaseNode {
 		type: 'RelativeSelector';
+		/**
+		 * In `a > b`, `> b` forms one relative selector, and `>` is the combinator. `null` for the first selector.
+		 */
 		combinator: null | Combinator;
+		/**
+		 * The `b:is(...)` in `> b:is(...)`
+		 */
 		selectors: SimpleSelector[];
 		metadata: {
-			/** :global(..) */
+			/**
+			 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
+			 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
+			 */
 			is_global: boolean;
-			/** :root, :host, ::view-transition */
+			/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
 			is_global_like: boolean;
 			scoped: boolean;
 		};
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js
new file mode 100644
index 0000000000..2c22b248d3
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_combinator',
+		message: 'A `:global` selector cannot follow a `>` combinator',
+		position: [79, 88]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte
new file mode 100644
index 0000000000..72e8bdc31d
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte
@@ -0,0 +1,11 @@
+<style>
+	/* ok */
+	.x :global.x p {
+	}
+	.x :global > p {
+	}
+
+	/* not ok */
+	.x > :global p {
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js
index 1014cd34c2..3d701e10b7 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_combinator',
-		message: 'A :global {...} block cannot follow a > combinator',
-		position: [12, 21]
+		message: 'A `:global` selector cannot follow a `>` combinator',
+		position: [54, 63]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte
index b3b6ebe6ac..b3af8b4e21 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte
@@ -1,3 +1,9 @@
 <style>
-	.x > :global {}
+	/* ok */
+	.x :global {
+	}
+
+	/* not ok */
+	.x > :global {
+	}
 </style>
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 3f7a82b54c..776cb9c7d0 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
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_declaration',
-		message: 'A :global {...} block can only contain rules, not declarations',
-		position: [24, 34]
+		message: 'A top-level `:global {...}` block can only contain rules, not declarations',
+		position: [109, 119]
 	}
 });
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 6a1891ca29..d3374f2aa0 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
@@ -1,5 +1,15 @@
 <style>
+	/* ok */
 	.x :global {
 		color: red;
 	}
+
+	:global .y {
+		color: red;
+	}
+
+	/* not ok */
+	:global {
+		color: red;
+	}
 </style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js
deleted file mode 100644
index 0eb061e41e..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'css_global_block_invalid_placement',
-		message:
-			'A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)',
-		position: [50, 57]
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte
deleted file mode 100644
index 15d721f54f..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<style>
-	/* ok */
-	.x :global {
-	}
-	/* not ok */
-	:global .x {
-	}
-</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte
deleted file mode 100644
index 7d274e3894..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style>
-	.x .y:global {}
-</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
index 9f06599f7a..9ae4e758c4 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_list',
-		message: 'A :global {...} block cannot be part of a selector list with more than one item',
+		message: 'A `:global` selector cannot be part of a selector list with more than one item',
 		position: [9, 31]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js
new file mode 100644
index 0000000000..9f58616ca7
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_modifier_start',
+		message: 'A `:global` selector can only be modified if it is a descendant of other selectors',
+		position: [75, 77]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte
new file mode 100644
index 0000000000..027874c7a7
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte
@@ -0,0 +1,11 @@
+<style>
+	/* ok */
+	div :global.x {
+		color: red;
+	}
+
+	/* not ok */
+	:global.x {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js
new file mode 100644
index 0000000000..6d4b02adab
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_modifier_start',
+		message: 'A `:global` selector can only be modified if it is a descendant of other selectors',
+		position: [147, 148]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte
new file mode 100644
index 0000000000..5e5123a1c9
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte
@@ -0,0 +1,22 @@
+<style>
+	/* ok */
+	div :global {
+		&.x {
+			color: red;
+		}
+	}
+	div {
+		:global {
+			&.x {
+				color: red;
+			}
+		}
+	}
+
+	/* not ok */
+	:global {
+		&.x {
+			color: red;
+		}
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
similarity index 56%
rename from packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/_config.js
rename to packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
index 00843fa217..3659ac1d44 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_modifier',
-		message: 'A :global {...} block cannot modify an existing selector',
-		position: [14, 21]
+		message: 'A `:global` selector cannot modify an existing selector',
+		position: [70, 77]
 	}
 });
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..0cb7273572
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte
@@ -0,0 +1,11 @@
+<style>
+	/* ok */
+	div :global.x {
+		color: red;
+	}
+
+	/* not ok */
+	.x:global {
+		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 430b45fe37..bee0d7204d 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: 16,
+				line: 69,
 				column: 1,
-				character: 128
+				character: 917
 			},
 			end: {
-				line: 16,
+				line: 69,
 				column: 16,
-				character: 143
+				character: 932
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index 8bf0f0e596..3acc1b0212 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -1,3 +1,4 @@
+
 	/* :global {*/
 		.x {
 			color: green;
@@ -10,6 +11,59 @@
 		}
 	}
 
+	/* some css preprocessors de-nest :global blocks with a single child
+	   (e.g turn `:global { div { ... } }` into `:global div { ... }`),
+	   so we need to support it, too */
+	 div {
+		.y {
+			color: green;
+		}
+	}
+
+	div.svelte-xyz p {
+		.y {
+			color: green;
+		}
+	}
+
+	/* `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;
+	}
+
 	/* (unused) .unused :global {
 		.z {
 			color: red;
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index d05a6b7edc..2f2cdfcbd5 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -13,6 +13,59 @@
 		}
 	}
 
+	/* some css preprocessors de-nest :global blocks with a single child
+	   (e.g turn `:global { div { ... } }` into `:global div { ... }`),
+	   so we need to support it, too */
+	:global div {
+		.y {
+			color: green;
+		}
+	}
+
+	div :global p {
+		.y {
+			color: green;
+		}
+	}
+
+	/* `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;
+	}
+
+	/* ...and therefore `div { :global.x { ... }` aswell */
+	div {
+		:global.x {
+			color: green;
+		}
+	}
+
+	div {
+		& :global.x {
+			color: green;
+		}
+	}
+
+	div :global:is(html.dark-mode *) {
+		color: green;
+	}
+
 	.unused :global {
 		.z {
 			color: red;
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
index cf556bf4c4..bab7b8a9e9 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_placement",
-		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+		"message": "`:global(...)` can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
 			"line": 8,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
index 164daa5796..8ca06aa625 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_placement",
-		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+		"message": "`:global(...)` can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
 			"line": 5,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
index 7b63fe4d7a..bf3dce8b7f 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 2,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
index fcc75beb5c..6260b09743 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 2,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json
index e1bc38e0f1..1af01bce50 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
index 0b641f2115..484319ef06 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_placement",
-		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+		"message": "`:global(...)` can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
 			"line": 2,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
index d0be529197..d61411ee96 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 11,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
index d37ff8d5d1..722e8be23f 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
index c05bb647ad..9a20737c5d 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 2,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
index b1d79c25b8..5317179d5b 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 5,
 			"column": 1
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
index b1d79c25b8..5317179d5b 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 5,
 			"column": 1
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json
index e9261e5e1c..406fd6129c 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 20,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
index 3d96fbc1ff..3d8ae68ec0 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 11,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json b/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json
index e7c461b699..5c75d86774 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_type_selector_invalid_placement",
-		"message": ":global(...) must not be followed with a type selector",
+		"message": "`:global(...)` must not be followed by a type selector",
 		"start": {
 			"line": 17,
 			"column": 14
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b393174e0f..9de214c847 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1322,17 +1322,32 @@ declare module 'svelte/compiler' {
 			metadata: {
 				parent_rule: null | Rule;
 				has_local_selectors: boolean;
+				/**
+				 * `true` if the rule contains a `:global` selector, and therefore everything inside should be unscoped
+				 */
 				is_global_block: boolean;
 			};
 		}
 
+		/**
+		 * A list of selectors, e.g. `a, b, c {}`
+		 */
 		export interface SelectorList extends BaseNode {
 			type: 'SelectorList';
+			/**
+			 * The `a`, `b` and `c` in `a, b, c {}`
+			 */
 			children: ComplexSelector[];
 		}
 
+		/**
+		 * A complex selector, e.g. `a b c {}`
+		 */
 		export interface ComplexSelector extends BaseNode {
 			type: 'ComplexSelector';
+			/**
+			 * The `a`, `b` and `c` in `a b c {}`
+			 */
 			children: RelativeSelector[];
 			metadata: {
 				rule: null | Rule;
@@ -1340,14 +1355,26 @@ declare module 'svelte/compiler' {
 			};
 		}
 
+		/**
+		 * A relative selector, e.g the `a` and `> b` in `a > b {}`
+		 */
 		export interface RelativeSelector extends BaseNode {
 			type: 'RelativeSelector';
+			/**
+			 * In `a > b`, `> b` forms one relative selector, and `>` is the combinator. `null` for the first selector.
+			 */
 			combinator: null | Combinator;
+			/**
+			 * The `b:is(...)` in `> b:is(...)`
+			 */
 			selectors: SimpleSelector[];
 			metadata: {
-				/** :global(..) */
+				/**
+				 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
+				 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
+				 */
 				is_global: boolean;
-				/** :root, :host, ::view-transition */
+				/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
 				is_global_like: boolean;
 				scoped: boolean;
 			};
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 e85ee2d529..5c475b7ec8 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
@@ -202,9 +202,18 @@ This is because the Svelte compiler treated the assignment to `foo.value` as an
 
 Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
 
-### Stricter CSS `:global` selector validation
+### :is(...) and :where(...) are scoped
 
-Previously, a compound selector starting with a global modifier which has universal or type selectors (like `:global(span).foo`) was valid. In Svelte 5, this is a validation error instead. The reason is that in this selector the resulting CSS would be equivalent to one without `:global` - in other words, `:global` is ignored in this case.
+Previously, Svelte did not analyse selectors inside `:is(...)` and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:where(...)` selectors.
+
+When using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:
+
+```diff
+- main {
++ main :global {
+	@apply bg-blue-100 dark:bg-blue-900
+}
+```
 
 ### CSS hash position no longer deterministic