svelte 5.56.8 → 5.56.10

package/src/compiler/print/index.js

@@ -7,6 +7,68 @@ import { is_void } from '../../utils.js';
 /** Threshold for when content should be formatted on separate lines */
 const LINE_BREAK_THRESHOLD = 50;
 
+/** Characters that are valid in a CSS identifier without escaping */
+const REGEX_IDENTIFIER_CHAR = /^[a-zA-Z0-9_-]$/;
+
+/** Hex digits — a backslash followed by one of these is read as a hex escape */
+const REGEX_HEX_DIGIT = /[0-9a-fA-F]/;
+
+/**
+ * Re-escape a CSS identifier name so that it prints as valid CSS.
+ *
+ * `parse` decodes CSS escape sequences when building the AST — `\31` becomes `1`,
+ * `\a` becomes a newline — but keeps single-character escapes such as `\.` and
+ * escaped backslashes intact. When printing we therefore only need to escape the
+ * characters that would be illegal in a bare identifier: a leading digit, `-`
+ * followed by a digit, whitespace and control characters, and anything else that
+ * is not already escaped.
+ * @param {string} name
+ */
+function escape_identifier(name) {
+	let escaped = '';
+	let i = 0;
+
+	while (i < name.length) {
+		const char = name[i];
+
+		if (char === '\\') {
+			const next = name.charAt(i + 1);
+			if (next === '' || REGEX_HEX_DIGIT.test(next)) {
+				// A literal backslash in a name must itself be escaped: `\5c `
+				// re-parses to a backslash, whereas a backslash followed by a hex
+				// digit (or by nothing) would be read back as a hex escape.
+				escaped += '\\5c ';
+				i += 1;
+				continue;
+			}
+
+			// Already escaped — copy the backslash and the escaped character as-is.
+			escaped += '\\' + next;
+			i += 2;
+			continue;
+		}
+
+		const code = /** @type {number} */ (char.codePointAt(0));
+		const is_leading_digit = i === 0 && char >= '0' && char <= '9';
+		const is_leading_hyphen_digit =
+			i === 0 && char === '-' && name.charAt(i + 1) >= '0' && name.charAt(i + 1) <= '9';
+
+		if (
+			is_leading_digit ||
+			is_leading_hyphen_digit ||
+			!(REGEX_IDENTIFIER_CHAR.test(char) || code >= 160)
+		) {
+			escaped += `\\${code.toString(16)} `;
+		} else {
+			escaped += char;
+		}
+
+		i += 1;
+	}
+
+	return escaped;
+}
+
 /**
  * `print` converts a Svelte AST node back into Svelte source code.
  * It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
@@ -19,6 +81,10 @@ const LINE_BREAK_THRESHOLD = 50;
  */
 export function print(ast, options = undefined) {
 	const comments = (ast.type === 'Root' && ast.comments) || [];
+	const state = { preserve_whitespace: 0 };
+	const css_comments =
+		(ast.type === 'Root' ? ast.css?.comments : ast.type === 'StyleSheet' ? ast.comments : null) ||
+		[];
 
 	return esrap.print(
 		ast,
@@ -28,8 +94,8 @@ export function print(ast, options = undefined) {
 				getLeadingComments: options?.getLeadingComments,
 				getTrailingComments: options?.getTrailingComments
 			}),
-			...svelte_visitors(comments),
-			...css_visitors
+			...svelte_visitors(comments, state),
+			...css_visitors(css_comments, comments)
 		}),
 		{
 			indent: options?.indent
@@ -40,9 +106,15 @@ export function print(ast, options = undefined) {
 /**
  * @param {Context} context
  * @param {AST.SvelteNode} node
+ * @param {boolean} preserve_whitespace
  * @param {boolean} allow_inline
  */
-function block(context, node, allow_inline = false) {
+function block(context, node, preserve_whitespace = false, allow_inline = false) {
+	if (preserve_whitespace) {
+		context.visit(node);
+		return;
+	}
+
 	const child_context = context.new();
 	child_context.visit(node);
 
@@ -82,6 +154,7 @@ function attributes(node, attributes, context, comments) {
 	}
 
 	const separator = context.new();
+	let previous_attribute_end = node.start;
 
 	const children = attributes.map((attribute) => {
 		const child_context = context.new();
@@ -90,12 +163,16 @@ function attributes(node, attributes, context, comments) {
 			const comment = comments[comment_index];
 
 			if (comment.start < attribute.start) {
-				if (comment.type === 'Line') {
-					child_context.write('//' + comment.value);
-					child_context.newline();
-				} else {
-					child_context.write('/*' + comment.value + '*/'); // TODO match indentation?
-					child_context.append(separator);
+				// Inside a previous attribute's value can be comments which don't
+				// advance comment_index, therefore this additional check
+				if (comment.start >= previous_attribute_end) {
+					if (comment.type === 'Line') {
+						child_context.write('//' + comment.value);
+						child_context.newline();
+					} else {
+						child_context.write('/*' + comment.value + '*/'); // TODO match indentation?
+						child_context.append(separator);
+					}
 				}
 
 				comment_index += 1;
@@ -105,6 +182,7 @@ function attributes(node, attributes, context, comments) {
 		}
 
 		child_context.visit(attribute);
+		previous_attribute_end = attribute.end;
 
 		length += child_context.measure() + 1;
 
@@ -137,8 +215,9 @@ function attributes(node, attributes, context, comments) {
  * @param {AST.BaseElement} node
  * @param {Context} context
  * @param {AST.JSComment[]} comments
+ * @param {{ preserve_whitespace: number }} state
  */
-function base_element(node, context, comments) {
+function base_element(node, context, comments, state) {
 	const child_context = context.new();
 
 	child_context.write('<' + node.name);
@@ -164,174 +243,298 @@ function base_element(node, context, comments) {
 		child_context.write(`${multiline_attributes ? '' : ' '}/>`);
 	} else {
 		child_context.write('>');
-		block(child_context, node.fragment, true);
+		block(child_context, node.fragment, state.preserve_whitespace > 0, true);
 		child_context.write(`</${node.name}>`);
 	}
 
 	context.append(child_context);
 }
 
-/** @type {Visitors<AST.SvelteNode>} */
-const css_visitors = {
-	Atrule(node, context) {
-		context.write(`@${node.name}`);
-		if (node.prelude) context.write(` ${node.prelude}`);
+/**
+ * @param {AST.BaseElement} node
+ * @param {Context} context
+ * @param {AST.JSComment[]} comments
+ * @param {{ preserve_whitespace: number }} state
+ */
+function print_element(node, context, comments, state) {
+	const name = node.name.toLowerCase();
+	const preserve =
+		(node.type === 'RegularElement' || node.type === 'TitleElement') &&
+		(name === 'pre' || name === 'textarea' || name === 'title');
+
+	if (preserve) state.preserve_whitespace += 1;
+	base_element(node, context, comments, state);
+	if (preserve) state.preserve_whitespace -= 1;
+}
 
-		if (node.block) {
-			context.write(' ');
-			context.visit(node.block);
-		} else {
-			context.write(';');
-		}
-	},
+/**
+ * @param {AST.CSS.CSSComment[]} comments
+ * @param {AST.JSComment[]} js_comments
+ * @returns {Visitors<AST.SvelteNode>}
+ */
+function css_visitors(comments, js_comments) {
+	let comment_index = 0;
+
+	/** @param {number} end */
+	const has_comment_before = (end) => comments[comment_index]?.start < end;
+
+	/**
+	 * @param {Context} context
+	 * @param {AST.CSS.CSSComment} comment
+	 */
+	function write_comment(context, comment) {
+		context.write(`/*${comment.value}*/`);
+	}
 
-	AttributeSelector(node, context) {
-		context.write(`[${node.name}`);
-		if (node.matcher) {
-			context.write(node.matcher);
-			context.write(`"${node.value}"`);
-			if (node.flags) {
-				context.write(` ${node.flags}`);
-			}
+	/**
+	 * @param {Context} context
+	 * @param {number} end
+	 */
+	function write_inline_comments(context, end) {
+		let written = false;
+
+		while (has_comment_before(end)) {
+			if (written) context.write(' ');
+			write_comment(context, comments[comment_index++]);
+			written = true;
 		}
-		context.write(']');
-	},
 
-	Block(node, context) {
-		context.write('{');
+		return written;
+	}
 
-		if (node.children.length > 0) {
-			context.indent();
-			context.newline();
+	/**
+	 * @param {Context} context
+	 * @param {string} value
+	 * @param {number} end
+	 */
+	function write_value(context, value, end) {
+		let offset = 0;
+
+		while (has_comment_before(end)) {
+			const comment = comments[comment_index++];
+			const position = Math.max(offset, Math.min(comment.position ?? 0, value.length));
+			context.write(value.slice(offset, position));
+			write_comment(context, comment);
+			offset = position;
+		}
 
-			let started = false;
+		context.write(value.slice(offset));
+	}
 
-			for (const child of node.children) {
-				if (started) {
-					context.newline();
-				}
+	/**
+	 * @param {Context} context
+	 * @param {Array<AST.CSS.Rule | AST.CSS.Atrule | AST.CSS.Declaration>} children
+	 * @param {number} end
+	 * @param {boolean} margins
+	 */
+	function print_children(context, children, end, margins) {
+		let started = false;
 
-				context.visit(child);
+		const separate = () => {
+			if (!started) return;
+			if (margins) context.margin();
+			context.newline();
+		};
 
+		for (const child of children) {
+			while (has_comment_before(child.start)) {
+				separate();
+				write_comment(context, comments[comment_index++]);
 				started = true;
 			}
 
-			context.dedent();
-			context.newline();
+			separate();
+			context.visit(child);
+			started = true;
 		}
 
-		context.write('}');
-	},
+		while (has_comment_before(end)) {
+			separate();
+			write_comment(context, comments[comment_index++]);
+			started = true;
+		}
+	}
 
-	ClassSelector(node, context) {
-		context.write(`.${node.name}`);
-	},
+	/**
+	 * @param {AST.CSS.SelectorList} node
+	 * @param {Context} context
+	 * @param {boolean} multiline
+	 */
+	function print_selector_list(node, context, multiline) {
+		let needs_separator = false;
+		let remaining_selectors = node.children.length;
 
-	ComplexSelector(node, context) {
 		for (const selector of node.children) {
+			while (has_comment_before(selector.start)) {
+				if (needs_separator) context.write(' ');
+				write_comment(context, comments[comment_index++]);
+				needs_separator = true;
+			}
+
+			if (needs_separator) {
+				if (multiline) context.newline();
+				else context.write(' ');
+			}
+
 			context.visit(selector);
+			needs_separator = true;
+			remaining_selectors -= 1;
+
+			if (remaining_selectors > 0) context.write(',');
 		}
-	},
+	}
 
-	Declaration(node, context) {
-		context.write(`${node.property}: ${node.value};`);
-	},
+	return {
+		Atrule(node, context) {
+			context.write(`@${escape_identifier(node.name)}`);
 
-	IdSelector(node, context) {
-		context.write(`#${node.name}`);
-	},
+			const prelude_end = node.block?.start ?? node.end;
+			if (node.prelude || has_comment_before(prelude_end)) {
+				context.write(' ');
+				write_value(context, node.prelude, prelude_end);
+			}
 
-	NestingSelector(node, context) {
-		context.write('&');
-	},
+			if (node.block) {
+				context.write(' ');
+				context.visit(node.block);
+			} else {
+				context.write(';');
+			}
+		},
+
+		AttributeSelector(node, context) {
+			context.write(`[${escape_identifier(node.name)}`);
+			if (node.matcher) {
+				context.write(node.matcher);
+				context.write(`"${node.value}"`);
+				if (node.flags) context.write(` ${node.flags}`);
+			}
+			context.write(']');
+		},
 
-	Nth(node, context) {
-		context.write(node.value);
-	},
+		Block(node, context) {
+			context.write('{');
 
-	Percentage(node, context) {
-		context.write(node.value);
-	},
+			if (node.children.length > 0 || has_comment_before(node.end)) {
+				context.indent();
+				context.newline();
+				print_children(context, node.children, node.end, false);
+				context.dedent();
+				context.newline();
+			}
 
-	PseudoClassSelector(node, context) {
-		context.write(`:${node.name}`);
+			context.write('}');
+		},
 
-		if (node.args) {
-			context.write('(');
+		ClassSelector(node, context) {
+			context.write(`.${escape_identifier(node.name)}`);
+		},
 
-			let started = false;
+		ComplexSelector(node, context) {
+			for (const selector of node.children) context.visit(selector);
+		},
 
-			for (const arg of node.args.children) {
-				if (started) {
-					context.write(', ');
-				}
+		Declaration(node, context) {
+			context.write(`${node.property}: `);
+			write_value(context, node.value, node.end);
+			context.write(';');
+		},
 
-				context.visit(arg);
+		IdSelector(node, context) {
+			context.write(`#${escape_identifier(node.name)}`);
+		},
 
-				started = true;
-			}
+		NestingSelector(node, context) {
+			context.write('&');
+		},
 
-			context.write(')');
-		}
-	},
+		Nth(node, context) {
+			context.write(node.value);
+		},
 
-	PseudoElementSelector(node, context) {
-		context.write(`::${node.name}`);
-	},
+		Percentage(node, context) {
+			context.write(node.value);
+		},
 
-	RelativeSelector(node, context) {
-		if (node.combinator) {
-			if (node.combinator.name === ' ') {
-				context.write(' ');
-			} else {
-				context.write(` ${node.combinator.name} `);
+		PseudoClassSelector(node, context) {
+			context.write(`:${escape_identifier(node.name)}`);
+
+			if (node.args) {
+				context.write('(');
+				context.visit(node.args);
+				if (has_comment_before(node.end)) {
+					context.write(' ');
+					write_inline_comments(context, node.end);
+				}
+				context.write(')');
 			}
-		}
+		},
+
+		PseudoElementSelector(node, context) {
+			context.write(`::${escape_identifier(node.name)}`);
+			if (node.args) {
+				context.write('(');
+				context.visit(node.args);
+				if (has_comment_before(node.end)) {
+					context.write(' ');
+					write_inline_comments(context, node.end);
+				}
+				context.write(')');
+			}
+		},
 
-		for (const selector of node.selectors) {
-			context.visit(selector);
-		}
-	},
+		RelativeSelector(node, context) {
+			if (node.combinator) {
+				if (node.combinator.name === ' ') context.write(' ');
+				else context.write(` ${node.combinator.name} `);
+			}
 
-	Rule(node, context) {
-		let started = false;
+			for (const selector of node.selectors) context.visit(selector);
+		},
 
-		for (const selector of node.prelude.children) {
-			if (started) {
-				context.write(',');
-				context.newline();
-			}
+		Rule(node, context) {
+			print_selector_list(node.prelude, context, true);
+			context.write(' ');
+			if (write_inline_comments(context, node.block.start)) context.write(' ');
+			context.visit(node.block);
+		},
 
-			context.visit(selector);
-			started = true;
-		}
+		SelectorList(node, context) {
+			print_selector_list(node, context, false);
+		},
 
-		context.write(' ');
-		context.visit(node.block);
-	},
+		StyleSheet(node, context) {
+			context.write('<style');
+			attributes(node, node.attributes, context, js_comments);
+			context.write('>');
 
-	SelectorList(node, context) {
-		let started = false;
-		for (const selector of node.children) {
-			if (started) {
-				context.write(', ');
+			if (node.children.length > 0 || node.comments.length > 0) {
+				context.indent();
+				context.newline();
+				print_children(context, node.children, node.content.end, true);
+				context.dedent();
+				context.newline();
 			}
 
-			context.visit(selector);
-			started = true;
-		}
-	},
+			context.write('</style>');
+		},
 
-	TypeSelector(node, context) {
-		context.write(node.name);
-	}
-};
+		TypeSelector(node, context) {
+			if (node.namespace !== undefined) {
+				context.write(node.namespace === '*' ? '*' : escape_identifier(node.namespace));
+				context.write('|');
+			}
+			context.write(node.name === '*' ? node.name : escape_identifier(node.name));
+		}
+	};
+}
 
 /**
  * @param {AST.JSComment[]} comments
+ * @param {{ preserve_whitespace: number }} state
  * @returns {Visitors<AST.SvelteNode>}
  */
-const svelte_visitors = (comments) => ({
+const svelte_visitors = (comments, state) => ({
 	Root(node, context) {
 		if (node.options) {
 			context.write('<svelte:options');
@@ -363,11 +566,27 @@ const svelte_visitors = (comments) => ({
 		context.write('<script');
 		attributes(node, node.attributes, context, comments);
 		context.write('>');
-		block(context, node.content);
+		block(context, node.content, state.preserve_whitespace > 0);
 		context.write('</script>');
 	},
 
 	Fragment(node, context) {
+		if (state.preserve_whitespace > 0) {
+			for (const child of node.nodes) {
+				context.visit(child);
+				context.multiline ||= child.type === 'Text' && /[\r\n]/.test(child.data);
+			}
+			return;
+		}
+
+		const first = node.nodes[0];
+		const last = node.nodes.at(-1);
+		const has_surrounding_whitespace =
+			first?.type === 'Text' &&
+			/^\s/.test(first.data) &&
+			last?.type === 'Text' &&
+			/\s$/.test(last.data);
+
 		/** @type {AST.SvelteNode[][]} */
 		const items = [];
 
@@ -459,6 +678,10 @@ const svelte_visitors = (comments) => ({
 			});
 
 		multiline ||= width > LINE_BREAK_THRESHOLD;
+		// Normally context.newline() also makes context.multiline true, but the below loop only
+		// does that if we have more than one child context. If there's one long text block inside
+		// with whitespace at the edges we wanna split that up, too.
+		context.multiline ||= has_surrounding_whitespace && width > LINE_BREAK_THRESHOLD * 2;
 
 		for (let i = 0; i < child_contexts.length; i += 1) {
 			const prev = child_contexts[i];
@@ -525,7 +748,7 @@ const svelte_visitors = (comments) => ({
 
 		if (node.pending) {
 			context.write('}');
-			block(context, node.pending);
+			block(context, node.pending, state.preserve_whitespace > 0);
 			context.write('{:');
 		} else {
 			context.write(' ');
@@ -536,7 +759,7 @@ const svelte_visitors = (comments) => ({
 			if (node.value) context.visit(node.value);
 			context.write('}');
 
-			block(context, node.then);
+			block(context, node.then, state.preserve_whitespace > 0);
 
 			if (node.catch) {
 				context.write('{:');
@@ -544,11 +767,11 @@ const svelte_visitors = (comments) => ({
 		}
 
 		if (node.catch) {
-			context.write(node.value ? 'catch ' : 'catch');
+			context.write(node.error ? 'catch ' : 'catch');
 			if (node.error) context.visit(node.error);
 			context.write('}');
 
-			block(context, node.catch);
+			block(context, node.catch, state.preserve_whitespace > 0);
 		}
 
 		context.write('{/await}');
@@ -592,7 +815,7 @@ const svelte_visitors = (comments) => ({
 	},
 
 	Component(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	ConstTag(node, context) {
@@ -682,11 +905,11 @@ const svelte_visitors = (comments) => ({
 
 		context.write('}');
 
-		block(context, node.body);
+		block(context, node.body, state.preserve_whitespace > 0);
 
 		if (node.fallback) {
 			context.write('{:else}');
-			block(context, node.fallback);
+			block(context, node.fallback, state.preserve_whitespace > 0);
 		}
 
 		context.write('{/each}');
@@ -710,13 +933,13 @@ const svelte_visitors = (comments) => ({
 			context.visit(node.test);
 			context.write('}');
 
-			block(context, node.consequent);
+			block(context, node.consequent, state.preserve_whitespace > 0);
 		} else {
 			context.write('{#if ');
 			context.visit(node.test);
 			context.write('}');
 
-			block(context, node.consequent);
+			block(context, node.consequent, state.preserve_whitespace > 0);
 		}
 
 		if (node.alternate !== null) {
@@ -728,7 +951,7 @@ const svelte_visitors = (comments) => ({
 				)
 			) {
 				context.write('{:else}');
-				block(context, node.alternate);
+				block(context, node.alternate, state.preserve_whitespace > 0);
 			} else {
 				context.visit(node.alternate);
 			}
@@ -743,7 +966,7 @@ const svelte_visitors = (comments) => ({
 		context.write('{#key ');
 		context.visit(node.expression);
 		context.write('}');
-		block(context, node.fragment);
+		block(context, node.fragment, state.preserve_whitespace > 0);
 		context.write('{/key}');
 	},
 
@@ -775,7 +998,7 @@ const svelte_visitors = (comments) => ({
 	},
 
 	RegularElement(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	RenderTag(node, context) {
@@ -785,7 +1008,7 @@ const svelte_visitors = (comments) => ({
 	},
 
 	SlotElement(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SnippetBlock(node, context) {
@@ -804,7 +1027,7 @@ const svelte_visitors = (comments) => ({
 		}
 
 		context.write(')}');
-		block(context, node.body);
+		block(context, node.body, state.preserve_whitespace > 0);
 		context.write('{/snippet}');
 	},
 
@@ -839,40 +1062,12 @@ const svelte_visitors = (comments) => ({
 		}
 	},
 
-	StyleSheet(node, context) {
-		context.write('<style');
-		attributes(node, node.attributes, context, comments);
-		context.write('>');
-
-		if (node.children.length > 0) {
-			context.indent();
-			context.newline();
-
-			let started = false;
-
-			for (const child of node.children) {
-				if (started) {
-					context.margin();
-					context.newline();
-				}
-
-				context.visit(child);
-				started = true;
-			}
-
-			context.dedent();
-			context.newline();
-		}
-
-		context.write('</style>');
-	},
-
 	SvelteBody(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SvelteBoundary(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SvelteComponent(node, context) {
@@ -884,7 +1079,7 @@ const svelte_visitors = (comments) => ({
 		attributes(node, node.attributes, context, comments);
 		if (node.fragment && node.fragment.nodes.length > 0) {
 			context.write('>');
-			block(context, node.fragment, true);
+			block(context, node.fragment, state.preserve_whitespace > 0, true);
 			context.write(`</svelte:component>`);
 		} else {
 			context.write(' />');
@@ -892,7 +1087,7 @@ const svelte_visitors = (comments) => ({
 	},
 
 	SvelteDocument(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SvelteElement(node, context) {
@@ -905,7 +1100,7 @@ const svelte_visitors = (comments) => ({
 
 		if (node.fragment && node.fragment.nodes.length > 0) {
 			context.write('>');
-			block(context, node.fragment);
+			block(context, node.fragment, state.preserve_whitespace > 0);
 			context.write(`</svelte:element>`);
 		} else {
 			context.write(' />');
@@ -913,19 +1108,19 @@ const svelte_visitors = (comments) => ({
 	},
 
 	SvelteFragment(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SvelteHead(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SvelteSelf(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	SvelteWindow(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	Text(node, context) {
@@ -933,7 +1128,7 @@ const svelte_visitors = (comments) => ({
 	},
 
 	TitleElement(node, context) {
-		base_element(node, context, comments);
+		print_element(node, context, comments, state);
 	},
 
 	TransitionDirective(node, context) {