Skip to content

Conversation

@thecrypticace
Copy link
Contributor

The CSS grammar allows any characters that are not ; or { as part of an at-rule "preamble" but Svelte's CSS parsing breaks on at-rules containing a : when nested inside rules. This situation occurs when user's apply classes with variants, for example, @apply dark:bg-white. To combat this we need to add svelte-preprocess and configure it run postcss on <style> blocks before svelte has a chance to analyze the CSS. It'd be great to not need this but, at least for now, we do.

Fixes #1221

We need to add `svelte-preprocess` and configure it to stop Svelte’s CSS parsing from breaking when applying utilities like `dark:bg-white` since it breaks on the `:`. Ideally we wouldn’t need this but, at least for now, we do.
@vercel
Copy link

vercel bot commented May 20, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
tailwindcss-com ✅ Ready (Inspect) Visit Preview May 20, 2022 at 4:46PM (UTC)

@thecrypticace thecrypticace merged commit 413c35e into master May 20, 2022
@thecrypticace thecrypticace deleted the svelte-guide-fix branch May 20, 2022 16:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SvelteKit guide could be better

3 participants