Example of SvelteKit cause ReferenceError in Safari when importing uno.css in +layout.svelte
UnoCSS version
66.5.9
Describe the bug
When using Svelte 5 (Runes) with SvelteKit, following the official examples (examples/sveltekit) to import 'uno.css' directly inside <script> in +layout.svelte causes a runtime Error on Safari (macOS/iOS), breaking the runtime reactive system of Svelte.
Safari console shows: ReferenceError: Cannot access uninitialized variable. Almost the same bug like #618.
In that case, the runes system is broken since the runtime of Svelte throws. So, as in the image, the counter button won't work anymore.
This problem only happens in the sveltekit example; for others like sveltekit-preprocesser, sveltekit-scoped they are fine since they do not use that import 'uno.css' in the root layout component.
Importing uno.css in client-side hooks may solve this problem in my local testing; check SvelteKit Hooks for details. But it also causes a flicker in the first load since it does not load early enough.
Reproduction
Just run the sveltekit example, then open Safari.
System Info
System: macOS 15.7.2 Browser: Safari 26.1 (20622.2.11.119.1)
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.
Source: unocss/unocss