test case and fix

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -564,14 +564,20 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		}
 	};
 
-	let can_inline = false;
+	let has_expression_tag = false;
+	let can_inline = true;
 	if (Array.isArray(attribute.value)) {
 		for (let value of attribute.value) {
-			if (value.type === 'ExpressionTag' && value.expression.type === 'Identifier') {
-				const binding = context.state.scope
-					.owner(value.expression.name)
-					?.declarations.get(value.expression.name);
-				can_inline ||= can_inline_variable(binding, value.expression.name);
+			if (value.type === 'ExpressionTag') {
+				if (value.expression.type === 'Identifier') {
+					const binding = context.state.scope
+						.owner(value.expression.name)
+						?.declarations.get(value.expression.name);
+					can_inline &&= can_inline_variable(binding, value.expression.name);
+				} else {
+					can_inline = false;
+				}
+				has_expression_tag = true;
 			}
 		}
 	}
@@ -588,7 +594,7 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		);
 		return true;
 	} else {
-		if (can_inline) {
+		if (has_expression_tag && can_inline) {
 			push_template_quasi(context.state, ` ${name}="`);
 			push_template_expression(context.state, grouped_value);
 			push_template_quasi(context.state, `"`);

packages/svelte/src/compiler/types/template.d.ts

@@ -422,6 +422,11 @@ export type Block = EachBlock | IfBlock | AwaitBlock | KeyBlock | SnippetBlock;
 export interface Attribute extends BaseNode {
 	type: 'Attribute';
 	name: string;
+	/**
+	 * The attribute may be omitted when false.
+	 * String values are represented by an array since it may be a combination of text and expression
+	 * values such as `style="color: {color} !import"`.
+	 */
 	value: true | Array<Text | ExpressionTag>;
 	metadata: {
 		dynamic: boolean;

packages/svelte/tests/snapshot/samples/hoist-unmodified-var/_expected/client/index.svelte.js

@@ -2,21 +2,29 @@
 // Note: compiler output will change before 5.0 is released!
 import "svelte/internal/disclose-version";
 
-const autocapitalize = 'words';
+const o = 'o';
+const d = 'd';
 
 import * as $ from "svelte/internal";
 
 const boolean = false;
-var frag = $.template(`<p autocapitalize="${autocapitalize}" contenteditable="${boolean}"> </p>`);
+var frag = $.template(`<p autocapitalize="${`w${$.stringify(o)}r${$.stringify(d)}s`}" contenteditable="${boolean}"> </p>`);
 
 export default function Hoist_unmodified_var($$anchor, $$props) {
 	$.push($$props, true);
 
+	let value = 'd';
+
+	value += 'd';
+
 	/* Init */
 	var p = $.open($$anchor, true, frag);
+
+	$.attr(p, "itemid", `w${$.stringify(o)}r${$.stringify(value)}s`);
+
 	var text = $.child(p);
 
-	text.nodeValue = `boolean is ${$.stringify(boolean)} and autocapitalize is ${$.stringify(autocapitalize)}`;
+	text.nodeValue = `boolean is ${$.stringify(boolean)} and autocapitalize is w${$.stringify(o)}r${$.stringify(d)}s`;
 	$.close($$anchor, p);
 	$.pop();
-}
+}

packages/svelte/tests/snapshot/samples/hoist-unmodified-var/_expected/server/index.svelte.js

@@ -2,13 +2,16 @@
 // Note: compiler output will change before 5.0 is released!
 import * as $ from "svelte/internal/server";
 
-const autocapitalize = 'words';
+const o = 'o';
+const d = 'd';
 
 export default function Hoist_unmodified_var($$payload, $$props) {
 	$.push(true);
 
 	let boolean = false;
+	let value = 'd';
 
-	$$payload.out += `<p${$.attr("autocapitalize", autocapitalize, false)}${$.attr("contenteditable", boolean, false)}>boolean is ${$.escape(boolean)} and autocapitalize is ${$.escape(autocapitalize)}</p>`;
+	value += 'd';
+	$$payload.out += `<p${$.attr("autocapitalize", `w${$.stringify(o)}r${$.stringify(d)}s`, false)}${$.attr("itemid", `w${$.stringify(o)}r${$.stringify(value)}s`, false)}${$.attr("contenteditable", boolean, false)}>boolean is ${$.escape(boolean)} and autocapitalize is w${$.escape(o)}r${$.escape(d)}s</p>`;
 	$.pop();
-}
+}

packages/svelte/tests/snapshot/samples/hoist-unmodified-var/index.svelte

@@ -1,11 +1,14 @@
 <svelte:options runes={true} />
 
 <script context="module">
-	const autocapitalize = 'words';
+	const o = 'o';
+	const d = 'd';
 </script>
 
 <script>
 	let boolean = false;
+	let value = 'd';
+	value += 'd';
 </script>
 
-<p {autocapitalize} contenteditable={boolean}>boolean is {boolean} and autocapitalize is {autocapitalize}</p>
+<p autocapitalize="w{o}r{d}s" itemid="w{o}r{value}s" contenteditable={boolean}>boolean is {boolean} and autocapitalize is w{o}r{d}s</p>