From 8fb2fb70e1d89f3bb43962a790d6704a2a7002a0 Mon Sep 17 00:00:00 2001
From: adiGuba <frederic.martini@gmail.com>
Date: Thu, 27 Feb 2025 10:38:49 +0100
Subject: [PATCH] fix : bug "$0 is not defined" with svelte:element and a
 single class with a function call (#15396)

* add spread to test

* fix #15386

* fix #15392

* test

* changeset

* use is_text_attribute
---
 .changeset/two-dragons-camp.md                |  5 ++
 .../client/visitors/SvelteElement.js          |  5 +-
 .../svelte-element-css-hash/_config.js        | 60 +++++++++++++++++++
 .../svelte-element-css-hash/main.svelte       | 20 +++++++
 4 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/two-dragons-camp.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte

diff --git a/.changeset/two-dragons-camp.md b/.changeset/two-dragons-camp.md
new file mode 100644
index 0000000000..cb0635186f
--- /dev/null
+++ b/.changeset/two-dragons-camp.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix : bug "$0 is not defined" on svelte:element with a function call on class
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index 7149f8d0e4..ac284c818d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -83,9 +83,10 @@ export function SvelteElement(node, context) {
 	if (
 		attributes.length === 1 &&
 		attributes[0].type === 'Attribute' &&
-		attributes[0].name.toLowerCase() === 'class'
+		attributes[0].name.toLowerCase() === 'class' &&
+		is_text_attribute(attributes[0])
 	) {
-		// special case when there only a class attribute
+		// special case when there only a class attribute, without call expression
 		let { value, has_state } = build_attribute_value(
 			attributes[0].value,
 			context,
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js
new file mode 100644
index 0000000000..c7a6213d82
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js
@@ -0,0 +1,60 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<div></div>
+		<div class="red svelte-p153w3"></div>
+		<div></div>
+		<div class="red svelte-p153w3"></div>
+		<div class="blue svelte-p153w3"></div>
+		<div class="blue svelte-p153w3"></div>
+	`,
+
+	async test({ assert, target, component }) {
+		component.active = true;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div></div>
+			<div class="red svelte-p153w3"></div>
+			<div class="active"></div>
+			<div class="red svelte-p153w3 active"></div>
+			<div class="blue svelte-p153w3"></div>
+			<div class="blue svelte-p153w3 active"></div>
+		`
+		);
+
+		component.tag = 'span';
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span></span>
+			<span class="red svelte-p153w3"></span>
+			<span class="active"></span>
+			<span class="red svelte-p153w3 active"></span>
+			<span class="blue svelte-p153w3"></span>
+			<span class="blue svelte-p153w3 active"></span>
+		`
+		);
+
+		component.active = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span></span>
+			<span class="red svelte-p153w3"></span>
+			<span class=""></span>
+			<span class="red svelte-p153w3"></span>
+			<span class="blue svelte-p153w3"></span>
+			<span class="blue svelte-p153w3"></span>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte
new file mode 100644
index 0000000000..709f7b4fa1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let { tag = "div", active = false } = $props();
+
+	function cn(classname) {
+		return classname;
+	}
+</script>
+
+<svelte:element this={tag}></svelte:element>
+<svelte:element this={tag} class="red"></svelte:element>
+<svelte:element this={tag} class:active={active}></svelte:element>
+<svelte:element this={tag} class="red" class:active={active}></svelte:element>
+<svelte:element this={tag} class={cn("blue")}></svelte:element>
+<svelte:element this={tag} class={cn("blue")} class:active={active}></svelte:element>
+
+<style>
+	.red {
+		color: red;
+	}
+</style>