From ae014758235e756769b09b2acfb9ae38ffda83fb Mon Sep 17 00:00:00 2001 From: ARIF Date: Mon, 30 Jun 2025 17:02:16 +0600 Subject: [PATCH] Update index.md I am a kinda beginner-ish dev. It took me over an hour to really test and find out this problem. Adding this comment would help new devs save time. Thanks. --- .../07-classes-and-styles/01-classes/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md index 4b4b073b46..a4caefde4c 100644 --- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md +++ b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md @@ -26,4 +26,20 @@ We can make it nicer though. Adding or removing a class based on some condition This means 'always add the `card` class, and add the `flipped` class whenever `flipped` is truthy'. +> **Note:** When using multiple expressions inside a `class={}` attribute, make sure to combine them within a single array or object. +> Avoid separating expressions with commas at the top level (for example: `class={['foo'], 'bar'}`), as this creates a JavaScript sequence expression, which can cause errors in Runes mode and result in unintended behavior. +> +> ✅ Correct: +> +> ```svelte +>
+> ``` +> +> ❌ Avoid: +> +> ```svelte +>
+> ``` +> + For more examples of how to combine conditional classes, [consult the `class` documentation](/docs/svelte/class).