New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Svelte 5: Cannot use :global() with CSS nesting #10540
Comments
@svelte-kit-so-good Good point, I think it would be good to support this without the Selectors like |
I just tested this with the new The original issue still generates the same error message and replacing
<div>
<div class="a">Normal nesting works</div>
<div class="b">Nesting with :global doesn't work</div>
<div class="c">Non-nested selector with :global works</div>
</div>
<style>
div {
font-family: monospace;
.a {
color: blue;
}
:global {
.b {
color: red;
}
}
}
div :global {
.c {
color: green;
}
}
</style> |
Can confirm. Also weirdly the global { } selector issue not happening in the Svelte 5 REPL but only in a freshly installed sveltekit project in dev mode (?)
|
In your example it still happens if you use nesting for the |
UPDATE: I just tested the new Another bug with :global() and nesting. Perhaps related to this bug.
Svelte 5 repl - it doesn't work (reload the page if no code is shown) |
Describe the bug
A compiler error is thrown when using a nested CSS selector with
:global()
.The nested version of
div :global(.b)
throws an error, whereas the non-nested version doesn't throw an error.Reproduction
REPL link
Steps:
:global(.b)
selector to confirm that it's causing the issueLogs
System Info
Svelte 5 Version: Next.60
Happens an all OS-es and in the REPL
Severity
annoyance
The text was updated successfully, but these errors were encountered: