@ -25,31 +25,28 @@ This works by adding a class to affected elements, which is based on a hash of t
</style>
</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
```svelte
<style>
<style>
:global(body) {
:global(body) {
/* this will apply to <body> */
/* applies to <body> */
margin: 0;
margin: 0;
}
}
div :global(strong) {
div :global(strong) {
/* this will apply to all <strong> elements, in any
/* applies to all <strong> elements, in any component,
component, that are inside <div> elements belonging
that are inside <div> elements belonging
to this component */
to this component */
color: goldenrod;
color: goldenrod;
}
}
p:global(.red) {
p:global(.big.red) {
/* this will apply to all <p> elements belonging to this
/* applies to all <p> elements belonging to this component
component with a class of red, even if class="red" does
with `class="big red"`, even if it is applied
not initially appear in the markup, and is instead
programmatically (for example by a library) */
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. */
}
}
</style>
</style>
```
```
@ -66,6 +63,30 @@ The `-global-` part will be removed when compiled, and the keyframe will then be
</style>
</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
## Nested style tags
There should only be 1 top-level `<style>` tag per component.
There should only be 1 top-level `<style>` tag per component.
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?)");
e(node,"css_global_block_invalid_modifier_start","A `:global` selector can only be modified if it is a descendant of other selectors");
@ -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.
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:
Simon H
2 months ago
committed by
GitHub