[bug] :global styles don't immediately work with svelte(kit)

[bartekjaszczak]

Describe the bug

Svelte's styles are scoped to components, but svelte allows setting global styles with :global syntax:

<style>
  :global * {
    background-color: red;
  }
</style>

These styles don't work immediately. Once I run the app and edit the global style, then they start working (once the HMR kicks in). This is something that works out of the box with default svelte(kit) project, even with all of the tauri-specific options (including static adapter, prerender enabled and ssr disabled). Haven't found such issue online, not even sure if it's really tauri-related.

Note: if there is more than one :global selector, none of them works at the beginning. Once at least one of them is updated and hot-reloaded, all of them start working.

EDIT: any edit and HMR update within <style> blocks works, it doesn't have to be :global selector
EDIT2: Right click -> Reload sometimes fixes this, sometimes it doesn't, can't really tell when it works

Note 2: As I was collecting the stack trace from brand new tauri app template, the :global selector worked immediately, but only during the first ever full compilation with npm run tauri dev. Every subsequent run of npm run tauri dev suffered from the mentioned issue.

Reproduction

npm create tauri-app@latest
# Select all default options except for UI template -> Svelte
# cd into the project
npm install

edit the src/routes/+page.svelte file. In the <style> scope, add any global selector that should affect the app visually, for example:

...
<style>
  ...
  :global * {
    background-color: red;
  }
</style>

npm run tauri dev

nothing is red at this point. While the app is running, modify the global style again, for example by changing previously added background-color to yellow and save. HMR causes the frontend to reload and the global styles are now applied (some components should be yellow).

Expected behavior

:global styles should work from the start, at least that's how they work in non-tauri sveltekit project

Full tauri info output

npm run tauri info   

> [email protected] tauri
> tauri info


[✔] Environment
    - OS: Arch Linux Rolling Release x86_64 (X64) (Hyprland on wayland)
    ✔ webkit2gtk-4.1: 2.46.5
    ✔ rsvg2: 2.59.2
    ✔ rustc: 1.83.0 (90b35a623 2024-11-26)
    ✔ cargo: 1.83.0 (5ffbef321 2024-10-29)
    ✔ rustup: 1.27.1 (2024-05-07)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (default)
    - node: 23.4.0
    - npm: 11.0.0

[-] Packages
    - tauri 🦀: 2
    - tauri-build 🦀: No version detected
    - wry 🦀: No version detected
    - tao 🦀: No version detected
    - tauri-cli 🦀: 2.2.1
    - @tauri-apps/api : 2.2.0
    - @tauri-apps/cli : 2.2.2

[-] Plugins

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../build
    - devUrl: http://localhost:1420/
    - framework: Svelte
    - bundler: Vite

Stack trace

npm run tauri dev

> [email protected] tauri
> tauri dev

    Running BeforeDevCommand (`npm run dev`)

> [email protected] dev
> vite dev


  VITE v6.0.7  ready in 517 ms

  ➜  Local:   http://localhost:1420/
    Info Watching /home/btj/dev/tmp/tauritest/src-tauri for changes...
   Compiling tauritest v0.1.0 (/home/btj/dev/tmp/tauritest/src-tauri)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 9.57s
     Running `target/debug/tauritest`
6:49:06 PM [vite] (client) hmr update /src/routes/+page.svelte?svelte&type=style&lang.css

Additional context

• 12.01.2025: The issue doesn't seem to exist on Windows, only Linux