unocss: Styles sometimes don't apply with Svelte Scoped and Svelte 4

UnoCSS version

0.53.4

Describe the bug

There are some edge cases when using Svelte 4 where styles are not generated for some components. I have yet to find the source of the issue but managed to provide a repro showcasing the problem; extracted and stripped down from the real app.

Currently, a workaround is to downgrade Svelte to 3.59.2.

But here comes more weird part. The diffs below are a few examples of changes that make the issue disappear in the repro.

diff --git a/src/routes/technical-studies.section.svelte b/src/routes/technical-studies.section.svelte
index b40e081..27c676c 100644
--- a/src/routes/technical-studies.section.svelte
+++ b/src/routes/technical-studies.section.svelte
@@ -6,9 +6,6 @@
 		<h4 class="text-primary text-lg font-bold tracking-wide">
 		</h4>
 
-		<h3 class="my-4 text-4xl font-bold text-gray-100">
-		</h3>
-
 		<h4 class="my-4 text-xl leading-relaxed text-gray-100">
 		</h4>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fa56246..4e581e4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import EnvironmentalRegulationSection from "./environmental-regulation.section.svelte";
-	import TechnicalStudiesSection from "./technical-studies.section.svelte";
 </script>
 
 <EnvironmentalRegulationSection />

Reproduction

https://github.com/scheatkode/unocss-weirdness-repro

Expected

Actual

System Info

No response

Validations

Read the Contributing Guidelines.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 15 (13 by maintainers)

Most upvoted comments

So after much wrestling I did manage to pinpoint the origin of the problem, which explains why this was such a ~~nasty~~ subtle bug that’s hard to reproduce and “works on my machine”.

The issue lies in this piece of code, a barely noticeable race condition which cleared the injected UnoGenerator’s shortcuts before generating the CSS, which in turn resulted in empty CSS since the generator would not be able to expand the class names to their original unhashed and unprefixed counterparts.

Although I won’t be able to provide a test case since this is inherently a result of non-determinism, I have opened #2922 to address it.

scheatkode on Jul 27, 2023

Minor update: I reduced the surface of the issue down to this code. Something isn’t working quite right in here which makes the generate method return empty CSS. Hopefully I will be able to provide a failing test case once I manage to pinpoint the origin of the problem.

Unfortunately, that’s all the time I have for this at the moment, I’ll get back to this when I can.

scheatkode on Jul 16, 2023

So after much wrestling I did manage to pinpoint the origin of the problem, which explains why this was such a nasty subtle bug that’s hard to reproduce and "works on my machine".

Yes, nasty, indeed. Thanks for your hard work on this, I’ll try to review soon, sorry for the delay!

jacob-8 on Jul 31, 2023

This will require a few hours/days of debugging on my end which unfortunately, I do not have enough bandwidth for at the moment.

I’m stuck on Svelte 3 for the time being until I can uncover the source of the problem, which will then allow me to provide a minimal reproduction to the relevant tool, whether it be Vite, Svelte, or Svelte-Scoped.

I noted that your repro has four missing imports in your app.html file. These throw errors in your Stackblitz, are they causing the browser to stop loading resources like CSS files?

There’s also a lot of other variables. You’re using a .scss file import. You have i18n. You have unused imports. You have a package-lock.json and pnpm-lock.yml - which are you running? Your Svelte files environmental-regulation.section.svelte are irregularly named. That shouldn’t be a problem but I don’t have a clue if something in the Svelte, Vite-Svelte, Vite pipeline changed as to introduce a bug for files not named according to convention like EnvironmentalRegulation.svelte.

My apologies for the extra crux, as you said, these are pieces pulled from a bigger app after some debugging of my own. However I already eliminated these possibilities already.

Thank you all for your patience, I will get back to this as soon as time allows.

scheatkode on Jul 7, 2023