sveltejs · Rich-Harris · Jul 25, 2024 · Jul 19, 2024 · Jul 19, 2024 · Jul 19, 2024
diff --git a/.changeset/tricky-balloons-care.md 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
@@ -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
@@ -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
@@ -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");
 }
 
 /**