Closed TheComputerM closed 3 years ago
The preferred usage for your particular use case should be outside :global
, so that a
and p
can be scoped to the component
:global(button) ~ :where(a, p) {
color: red;
}
On that note, it should also be valid to have selector list inside :where
and :is
(and :not
), and use them in :global
. #6435
As far as I'm aware, this is not a bug: https://github.com/sveltejs/svelte/pull/6428
As far as I'm aware, this is not a bug: #6428
What should not work:
a > :global(b, c)
What should work:
a > :global(b), a > :global(c)
a > :global(:where(b, c))
Read about :where
What should work:
a > :global(:where(b, c))
I would personally expect this to be disallowed in favor of
a > :where(:global(b), :global(c))
given the recent change. That being said, this code snippet doesn't currently work (the :global
passes through the compiler).
True, but I would also like this to work: :global(a > :where(b, c))
and using a > :where(:global(b), :global(c))
would make it harder for to be implemented.
@babichjacob Some selectors don't lend themselves to that conversion. In my case, 3.38.3 reported this new error for
article :global(:where(h2, h3, h4, h5, h6))
which would become
article :where(:global(h2), :global(h3), :global(h4), :global(h5), :global(h6))
This should be fixed in 3.39.0 - https://svelte.dev/repl/564fb17fee1f491c89986252fb04776f?version=3.39.0
Hi! my app suddenly started to raise this error It complain with this output:
3291: border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
3292: }
3293: :global(.table) :global(:where(th), :global(td)) {
^
3294: white-space: nowrap;
3295: padding: 1rem;
I've tried to update the libs but still rises the same error
Any idea how to solve this? Thanks
@Garito Maybe you meant this?
:global(.table :where(th, td)) {
Don't know since this is not my css Would be tailwind or daisyui
The weird think is that it started suddenly after run npm run build
no changes
npm run build
started failing after I added DaisyUI. After banging my head a while, I discovered this issue/thread and downgraded Svelte to 3.38.2, which caused npm run build
to start working again.
Thank you for reporting this, @TheComputerM!
Just looked through some DaisyUI issues. DaisyUI's creator (Pouya) says:
"This issue must be fixed from Svelte.
When we use <style global>
, svelte tries to handle styles with :global()
but it doesn't process :where()
correctly.
table :where(th, td)
is a valid CSS selector that I used in daisyUI but Svelte changes it to :global(.table) :global(:where(th), :global(td))
which is wrong."
https://github.com/saadeghi/daisyui/issues/809#issuecomment-1136172021
Any progress with this issue?
I've noticed that passing on svelte's css management solves the problem IMHO, very bad precedent
@tanhauhau closed this issue over a year ago after trying to fix it and believing he had succeeded. (Thank you for that!) Perhaps he would be willing to take a quick look at the new information posted here since last June?
I have watched some of your excellent Youtube videos on Svelte Store, Li Hau, and plan to watch them all. Thank you for taking time to share that and for pushing the Svelte project forward!
(P.S. Apologies for not digging into this code myself. I'm a backend Elixir dev only recently enticed out of my hole into the frontend world by two amazing new frameworks, Svelte and Phoenix LiveView. I'm no Rich Harris!)
I'm also still facing this issue using DaisyUI and svelte-markdown. Unfortunate as there doesn't seem to be many markdown alternatives.
Unsubscribe
On Thu, Aug 25, 2022, 11:49 PM Alex Rodgers @.***> wrote:
I'm also still facing this issue using DaisyUI and svelte-markdown. Unfortunate as there doesn't seem to be many markdown alternatives.
— Reply to this email directly, view it on GitHub https://github.com/sveltejs/svelte/issues/6434#issuecomment-1227610934, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARKKHVSBWGVFMP6U26FNMJ3V262JRANCNFSM47FZW2AA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
I've finally found a clean way to include global styles without forcing them through Svelte's global
processing pipeline:
<script lang="ts">
import css from './app.postcss?inline';
</script>
<svelte:element this="style">
{css}
</svelte:element>
Describe the bug Using multiple selectors in
:where
(https://web.dev/css-is-and-where/) breaks :global in 3.38.3 and not 3.38.2.Logs
To Reproduce In 3.38.2: https://svelte.dev/repl/564fb17fee1f491c89986252fb04776f?version=3.38.2 In 3.38.3: https://svelte.dev/repl/564fb17fee1f491c89986252fb04776f?version=3.38.3
Expected behavior Should have same behavior as 3.38.2
Severity Kind of high.