Svelte 5: Delay in Applying CSS Classes when $derived value is not at end of Class Attribute List

[johannesmutter]

Describe the bug

When a $derived value is used as e.g. the first class in a class attribute within a component, there is an unexpected delay in applying the subsequent CSS class definitions. This results in the affected element being unstyled for a brief period immediately after the component mounts and the HTML is rendered (approximately 1-second delay).

To prevent the issue from occuring, the $derived value must be placed at the end of the class attribute list.

Reproduction

Here's a minimal Svelte 5 repo to reproduce the bug (please note this issue is not reproducable in the the Svelte REPL).
https://github.com/johannesmutter/svelte-5-bug-delay-in-applying-css-classes-from-derived-rune

Reproduction

<script>
  let { rows = 3 } = $props();
  const title_font = $derived( rows <= 3 ? 'text-system' : 'text-intro' );
</script>

<p class='{title_font} bold'>Some Text.</p>
<!-- Please note: {title_font} is placed at the start. The "bold" class will be applied only after a 1s delay -->

See screen recording:

The dynamic class from derived is added instantly, but all the classes that follow are added with a delay.

---

Adding a $derived value at the very end is a workaround to fix this behaviour (class="... {dynamic_class}")

<p class='title bold {title_font} '>Some Text.</p>
<!-- Please note: {title_font} is placed at the end -->

See screen recording:

Expected Behavior

All classes, including those specified after the $derived value, should be applied simultaneously without any delay when the component mounts.

Actual Behavior

The classes specified after the $derived value in the class attribute are applied with a delay after the component mounts, resulting in a brief period where the element is unstyled.

Workaround

Placing the $derived value at the end of the class attribute list resolves the issue, ensuring all classes are applied simultaneously without delay.

Logs

No response

System Info

Svelte 5.0.0-next.82

Severity

annoyance

[dummdidumm]

This appears to fixed now