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 `
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 @@
-
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
}
```