CSS validation: :global(...) must contain a single selector error when using Svelte with Tailwind

[swyxio]

Describe the bug

not that i demand Svelte to be compatible with Tailwind Typography but... its gonna be popular and i figure it might raise something that is worth tackling.

a popular way of including Tailwind is by including it inside of a layout component:

<style global lang="postcss">
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
</style>

this wraps ALL THE THINGS in :global. this is not good for something like Tailwind, because this happens with Tailwind's popular typography plugin:

:global(.prose) :global(:where(ul) :global(ul), :global(ul) :global(ol), :global(ol) :global(ul), :global(ol) :global(ol):not(:where([class~="not-prose"]) :global(*))) {
	margin: 1rem
	}

creates the error :global(...) must contain a single selector.

Reproduction

https://svelte.dev/repl/d5e49cea12eb448e84f711eb43570c36?version=3.44.3

System Info

svelte 3.44.3
tailwind 3.08
tailwind/typography 0.5.0

Severity

annoyance

[Conduitry]

I feel like this might be more something for svelte-preprocess's handling of <style global>, which isn't a Svelte core thing. If there's some smarter way for it to wrap stuff in :global()s when it sees that, that would probably be worth doing.

[swyxio]

thank you for the quick response Conduitry. Perhaps another way to do this is to make some sort of API in Sveltekit to have a smoother path for adding Tailwind, as i'm sure nobody is entirely happy with this hacky <style global lang="postcss"> way of injecting it.

i'd be ok transferring it to the sveltekit repo if you agree, but i will volunteer that when i first ran into this issue, i came here first to search if anyone else had come across this issue yet. must be a newish thing since tailwind typography hasnt been out that long.

for now: i ripped out tailwind from the whole bundler chain, and just built the thing in a separate process myself. i think ok for small projects like mine, but most people will want an all-in-one-build-step solution.

[dummdidumm]

I saw many people recommend doing import "./somestyles.css" in the script tag of a layout file instead, because of better preprocessing and faster startup time AFAIK. Does this avoid the mentioned error?

[swyxio]

HMMM. just saw you dummdidumm. giving it a shot.

[swyxio]

holy crap... it worked 🤦🏽 thank you thank you

we need to change all the Tailwind + Svelte blogposts out there asap, this is so much nicer than the <style global lang="postcss"> crap lol

[CarlosIvanchuk]

I saw many people recommend doing import "./somestyles.css" in the script tag of a layout file instead, because of better preprocessing and faster startup time AFAIK. Does this avoid the mentioned error?

I was thinking just that when I was reading this issue messages. This is the way svelte-add/tailwindcss does it

[babichjacob]

Perhaps another way to do this is to make some sort of API in Sveltekit to have a smoother path for adding Tailwind

That's what Svelte Add is; it's even mentioned during npm init svelte@next and the SvelteKit documentation so that the people maintaining Svelte and SvelteKit don't have to be burdened by integrations.