:where breaks :global in 3.38.3

[TheComputerM]

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

:global(...) must contain a single selector (2:0)

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.

[ignatiusmb]

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

[babichjacob]

As far as I'm aware, this is not a bug: #6428

[TheComputerM]

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

[babichjacob]

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).

[TheComputerM]

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 <style global></style> to be implemented.

[janosh]

@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))

[Conduitry]

This should be fixed in 3.39.0 - https://svelte.dev/repl/564fb17fee1f491c89986252fb04776f?version=3.39.0

[Garito]

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

[janosh]

@Garito Maybe you meant this?

:global(.table :where(th, td)) {

[Garito]

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

[JamesLavin]

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!

[JamesLavin]

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."

saadeghi/daisyui#809 (comment)

[Garito]

Any progress with this issue?

[Garito]

I've noticed that passing on svelte's css management solves the problem
IMHO, very bad precedent

[JamesLavin]

@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!)

[AlexanderRodgers]

I'm also still facing this issue using DaisyUI and svelte-markdown. Unfortunate as there doesn't seem to be many markdown alternatives.

[ajay122812]

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 <#6434 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARKKHVSBWGVFMP6U26FNMJ3V262JRANCNFSM47FZW2AA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[myieye]

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>