fix: missing classes after dynamic expressions in class attributes (#11134)

.changeset/cool-comics-marry.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix missing classes after dynamic expressions in class attribute

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -853,9 +853,7 @@ function serialize_attribute_value(
 	/** @type {import('estree').Expression[]} */
 	const expressions = [];
 
-	if (attribute_value[0].type !== 'Text') {
+	quasis.push(b.quasi('', false));
-		quasis.push(b.quasi('', false));
-	}
 
 	let i = 0;
 	for (const node of attribute_value) {
@@ -866,7 +864,8 @@ function serialize_attribute_value(
 				// don't trim, space could be important to separate from expression tag
 				data = data.replace(regex_whitespaces_strict, ' ');
 			}
-			quasis.push(b.quasi(data, i === attribute_value.length));
+			const last = /** @type {import('estree').TemplateElement} */ (quasis.at(-1));
+			last.value.raw += data;
 		} else {
 			expressions.push(
 				b.call(
@@ -874,9 +873,7 @@ function serialize_attribute_value(
 					/** @type {import('estree').Expression} */ (context.visit(node.expression))
 				)
 			);
-			if (i === attribute_value.length || attribute_value[i]?.type !== 'Text') {
+			quasis.push(b.quasi('', i + 1 === attribute_value.length));
-				quasis.push(b.quasi('', true));
-			}
 		}
 	}
 

packages/svelte/tests/server-side-rendering/samples/head-raw-elements-content/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/server-side-rendering/samples/head-raw-elements-content/_expected.html

@@ -0,0 +1,2 @@
+<div class="bar baz svelte-m782ot">bar</div>
+<div class="foo bar baz svelte-m782ot">bar</div>

packages/svelte/tests/server-side-rendering/samples/head-raw-elements-content/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	const dynamic_value = 'bar';
+</script>
+<div class="{dynamic_value} baz">bar</div>
+<div class="foo {dynamic_value} baz">bar</div>
+
+<style>
+	.baz {
+		color: red;
+	}
+</style>