npm - @mrhenry/prettier-twig - Versions diffs - 0.1.0 - Mend

@mrhenry/prettier-twig 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/LICENSE +24 -0
package/package.json +22 -0
package/src/index.js +73 -0
package/src/printer.js +1145 -0
package/test/prettier-twig.test.js +1896 -0

package/test/prettier-twig.test.js ADDED Viewed

@@ -0,0 +1,1896 @@
+// @ts-check
+/**
+ * End-to-end tests for the `@mrhenry/prettier-twig` plugin.
+ *
+ * Covers the formatting rules (tabs, multi-line tags, conditional attributes,
+ * twig blocks), Prettier's report-only / range / cursor modes (which rely on
+ * node offsets being exact positions in the original source) and directed
+ * tests for edge cases (raw-text elements, void/self-closing tags, attribute
+ * forms, control flow).
+ *
+ * @module test
+ */
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { format, check, formatWithCursor } from 'prettier';
+import * as pluginModule from '@mrhenry/prettier-twig';
+const plugin = /** @type {any} */ (/** @type {any} */ (pluginModule).default ?? pluginModule);
+/**
+ * @param {string} source
+ * @param {any} [options]
+ * @returns {Promise<string>}
+ */
+function fmt(source, options = {}) {
+	return format(source, { parser: 'twig-html', plugins: [plugin], ...options });
+}
+test('formats a simple element with tabs', async () => {
+	const out = await fmt(`<div>
+	<span>x</span>
+</div>`);
+	assert.equal(
+		out,
+		`<div>
+	<span>x</span>
+</div>
+`,
+	);
+});
+test('expands elements with multiple attributes', async () => {
+	{
+		const out = await fmt(`<div class="a" data-x="1"><br></div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x="1"
+>
+	<br>
+</div>
+`,
+		);
+	}
+	{
+		// no line breaks around the text: its exact whitespace is significant
+		const out = await fmt(`<div class="a" data-x="1">text</div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x="1"
+>text</div>
+`,
+		);
+	}
+});
+test('keeps a single-attribute element on one line', async () => {
+	const out = await fmt(`<div class="a">text</div>`);
+	assert.equal(
+		out,
+		`<div class="a">text</div>
+`,
+	);
+});
+test('keeps html, link and meta tags on a single line', async () => {
+	{
+		const out = await fmt(`<html lang="en" dir="rtl">
+<head></head>
+</html>`);
+		assert.equal(
+			out,
+			`<html lang="en" dir="rtl">
+	<head></head>
+</html>
+`,
+		);
+	}
+	{
+		assert.equal(
+			await fmt(`<link rel="stylesheet" href="/style.css" media="screen">`),
+			`<link rel="stylesheet" href="/style.css" media="screen">\n`,
+		);
+	}
+	{
+		assert.equal(
+			await fmt(`<meta name="description" content="a b c">`),
+			`<meta name="description" content="a b c">\n`,
+		);
+	}
+	{
+		// even when the source breaks the start tag across lines
+		assert.equal(
+			await fmt(`<meta
+	name="a"
+	content="b"
+>`),
+			`<meta name="a" content="b">\n`,
+		);
+	}
+	{
+		// a single space is kept before the closing slash of a self-closing tag
+		assert.equal(
+			await fmt(`<meta name="msapplication-TileColor" content="#ffffff" />`),
+			`<meta name="msapplication-TileColor" content="#ffffff" />\n`,
+		);
+		assert.equal(await fmt(`<link rel="a" href="/b"/>`), `<link rel="a" href="/b" />\n`);
+	}
+});
+test('does not close open-ended partials', async () => {
+	{
+		// a partial that opens the document, completed by another template
+		assert.equal(await fmt(`<html>\n  <body>`), `<html>
+	<body>
+`);
+	}
+	{
+		assert.equal(
+			await fmt(`<div class="a" data-b="1">`),
+			`<div
+	class="a"
+	data-b="1"
+>
+`,
+		);
+	}
+	{
+		assert.equal(await fmt(`<div class="a">`), `<div class="a">\n`);
+	}
+	{
+		// closed elements still get their end tag
+		assert.equal(await fmt(`<div class="a">x</div>`), `<div class="a">x</div>\n`);
+	}
+});
+test('preserves the indentation of dangling end tags', async () => {
+	{
+		// a partial that closes the document, opened by another template
+		assert.equal(
+			await fmt(`{{ function('wp_footer') }}
+	</body>
+</html>`),
+			`		{{ function('wp_footer') }}
+	</body>
+</html>
+`,
+		);
+		// a subtle variation that does get formatted: extra spaces in the tag
+		assert.equal(
+			await fmt(`{{  function('wp_footer')  }}
+	</body>
+</html>`),
+			`		{{ function('wp_footer') }}
+	</body>
+</html>
+`,
+		);
+	}
+	{
+		const source = `		{% include 'footer.twig' %}
+	</body>
+</html>
+`;
+		assert.equal(await fmt(source), source);
+		// a subtle variation that does get formatted: extra spaces in the tag
+		assert.equal(
+			await fmt(`		{%  include   'footer.twig' %}
+	</body>
+</html>
+`),
+			source,
+		);
+	}
+});
+test('preserves significant whitespace around inline text', async () => {
+	{
+		// no line break: the exact whitespace is preserved
+		assert.equal(await fmt(`<span>foo</span>`), `<span>foo</span>\n`);
+		assert.equal(await fmt(`<span> foo</span>`), `<span> foo</span>\n`);
+		// a subtle variation that does get formatted: the start tag's space
+		assert.equal(await fmt(`<span >foo</span>`), `<span>foo</span>\n`);
+	}
+	{
+		// already spans lines: indentation may be normalized, close tag is kept
+		assert.equal(await fmt(`<span>\nfoo</span>`), `<span>\n\tfoo</span>\n`);
+		assert.equal(await fmt(`<span>\nfoo\n</span>`), `<span>\n\tfoo\n</span>\n`);
+	}
+});
+test('keeps inline text next to expressions in place', async () => {
+	{
+		// the `.` is not surrounded by newlines, so it stays on the same line
+		const source = `<h1 class="hero__title type-a">
+	{{ page.title }}.
+</h1>
+`;
+		assert.equal(await fmt(source), source);
+		// a subtle variation that does get formatted: spaces inside the tag
+		assert.equal(
+			await fmt(`<h1 class="hero__title type-a">
+	{{  page.title  }}.
+</h1>
+`),
+			source,
+		);
+	}
+	{
+		// the content is surrounded by newlines, so indentation may be adjusted
+		assert.equal(
+			await fmt(`<p>
+{{ a }}, and {{ b }}!
+</p>`),
+			`<p>
+	{{ a }}, and {{ b }}!
+</p>
+`,
+		);
+	}
+});
+test('keeps text around inline elements on one line', async () => {
+	const source = `<p class="l-error__text type-d">
+	Please try again later. Go back to the <a href="/">homepage</a>.
+</p>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: a run of spaces in the text
+	assert.equal(
+		await fmt(`<p class="l-error__text type-d">
+	Please try again later.  Go back to the <a href="/">homepage</a>.
+</p>
+`),
+		source,
+	);
+});
+test('places the closing > at the opening indent in multi-line tags', async () => {
+	{
+		const out = await fmt(`<div
+	class="a"
+	data-x
+><br></div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x
+>
+	<br>
+</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<div
+	class="a"
+	data-x
+>body</div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x
+>body</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<div
+	class="a"
+	data-x><br></div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x
+>
+	<br>
+</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<div
+	class="a"
+	data-x>body</div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x
+>body</div>
+`,
+		);
+	}
+	{
+		// no content: the end tag closes on the same line as the opening `>`
+		const out = await fmt(`<div
+	class="a"
+	data-x></div>`);
+		assert.equal(
+			out,
+			`<div
+	class="a"
+	data-x
+></div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<div
+	class="store-locator__map"
+	data-store-locator-map
+></div>`);
+		assert.equal(
+			out,
+			`<div
+	class="store-locator__map"
+	data-store-locator-map
+></div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<span class="foo" aria-hidden="true">·&nbsp;&nbsp;</span>`);
+		assert.equal(
+			out,
+			`<span
+	class="foo"
+	aria-hidden="true"
+>·&nbsp;&nbsp;</span>
+`,
+		);
+	}
+});
+test('formats conditional attributes', async () => {
+	{
+		const source = `<a
+	href="{{ url }}"
+	{% if current %}aria-current="page"{% endif %}
+><br></a>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<a
+	href="{{ url }}"
+	{% if current %}
+		aria-current="page"
+	{% endif %}
+>
+	<br>
+</a>
+`,
+		);
+	}
+	{
+		const source = `<a
+	href="{{ url }}"
+	{% if current %}aria-current="page"{% endif %}
+>text</a>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<a
+	href="{{ url }}"
+	{% if current %}
+		aria-current="page"
+	{% endif %}
+>text</a>
+`,
+		);
+	}
+	{
+		const source = `<a href="{{ url }}" {% if current %}aria-current="page"{% endif %}><br></a>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<a
+	href="{{ url }}"
+	{% if current %}
+		aria-current="page"
+	{% endif %}
+>
+	<br>
+</a>
+`,
+		);
+	}
+	{
+		const source = `<a href="{{ url }}" {% if current %}aria-current="page"{% endif %}>text</a>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<a
+	href="{{ url }}"
+	{% if current %}
+		aria-current="page"
+	{% endif %}
+>text</a>
+`,
+		);
+	}
+	{
+		const source = `<a
+	href="{{ url }}"
+	{% if current %}
+	aria-current="page"
+	{% endif %}
+><br></a>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<a
+	href="{{ url }}"
+	{% if current %}
+		aria-current="page"
+	{% endif %}
+>
+	<br>
+</a>
+`,
+		);
+	}
+	{
+		const source = `<a
+	href="{{ url }}"
+	{% if current %}
+	aria-current="page"
+	{% endif %}
+>text</a>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<a
+	href="{{ url }}"
+	{% if current %}
+		aria-current="page"
+	{% endif %}
+>text</a>
+`,
+		);
+	}
+});
+test('indents twig block bodies', async () => {
+	{
+		const out = await fmt(`{% if x %}
+<div>a</div>
+{% endif %}`);
+		assert.equal(
+			out,
+			`{% if x %}
+	<div>a</div>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% if x %}<div>a</div>{% endif %}`);
+		assert.equal(
+			out,
+			`{% if x %}
+	<div>a</div>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% if x %}
+	<div>a</div>
+{% endif %}`);
+		assert.equal(
+			out,
+			`{% if x %}
+	<div>a</div>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% if
+	x
+%}
+	<div>a</div>
+{%
+	endif %}`);
+		assert.equal(
+			out,
+			`{% if x %}
+	<div>a</div>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{%  if x %}
+	<div>a</div>
+{% endif
+%}`);
+		assert.equal(
+			out,
+			`{% if x %}
+	<div>a</div>
+{% endif %}
+`,
+		);
+	}
+});
+test('formats an include with a multiline array', async () => {
+	{
+		const out = await fmt(`{% include 'x.twig' with { a: 1, b: 2 } %}`);
+		assert.equal(
+			out,
+			`{% include 'x.twig' with {
+	a: 1,
+	b: 2,
+} %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% include 'x.twig' with {
+	a: 1,
+	b: 2,
+} %}
+`);
+		assert.equal(
+			out,
+			`{% include 'x.twig' with {
+	a: 1,
+	b: 2,
+} %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% include 'x.twig'
+	with {
+		a: 1,
+		b: 2,
+	}
+%}
+`);
+		assert.equal(
+			out,
+			`{% include 'x.twig' with {
+	a: 1,
+	b: 2,
+} %}
+`,
+		);
+	}
+});
+test('formats a set with a multiline array', async () => {
+	{
+		const out = await fmt(`{% set image = ensure_timber_image(teaser.thumbnail) %}
+{% if image %}
+	{% set url = image.imgix_src|add_query_arg({
+		ar: '4:5',
+		fit: 'crop',
+		crop: 'faces,edges',
+		auto: 'format',
+		q: 60,
+	}, false) %}
+{% endif %}`);
+		assert.equal(
+			out,
+			`{% set image = ensure_timber_image(teaser.thumbnail) %}
+{% if image %}
+	{% set url = image.imgix_src|add_query_arg({
+		ar: '4:5',
+		fit: 'crop',
+		crop: 'faces,edges',
+		auto: 'format',
+		q: 60,
+	}, false) %}
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% set url = image.imgix_src|add_query_arg({ ar: '4:5', fit: 'crop', crop: 'faces,edges', auto: 'format', q: 60 }, false) %}`);
+		assert.equal(
+			out,
+			`{% set url = image.imgix_src|add_query_arg({
+	ar: '4:5',
+	fit: 'crop',
+	crop: 'faces,edges',
+	auto: 'format',
+	q: 60,
+}, false) %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% set url =
+	image.imgix_src|add_query_arg(
+		{
+			ar: '4:5',
+			fit: 'crop',
+			crop: 'faces,edges',
+			auto: 'format',
+			q: 60,
+		},
+		false
+	)
+%}
+`);
+		assert.equal(
+			out,
+			`{% set url = image.imgix_src|add_query_arg({
+	ar: '4:5',
+	fit: 'crop',
+	crop: 'faces,edges',
+	auto: 'format',
+	q: 60,
+}, false) %}
+`,
+		);
+	}
+});
+test('keeps source multi-line objects expanded regardless of printWidth', async () => {
+	const source = `{% set url = image.imgix_src|add_query_arg({
+	ar: '1:1',
+	fit: 'fill',
+	fill: solid,
+	'fill-color': 'fff',
+	auto: 'format',
+	q: 70,
+}, false) %}
+`;
+	assert.equal(await fmt(source, { printWidth: 200 }), source);
+	// a subtle variation that does get formatted: extra spaces around colons
+	assert.equal(
+		await fmt(
+			`{% set url = image.imgix_src|add_query_arg({
+	ar:    '1:1',
+	fit:   'fill',
+	fill:  solid,
+	'fill-color': 'fff',
+	auto:  'format',
+	q:     70,
+}, false) %}
+`,
+			{ printWidth: 200 },
+		),
+		source,
+	);
+});
+test('formats a set with a multiline sequence', async () => {
+	const source = `{% set footer_menus = [
+	{ menu_items: menus.footer_a_navigation_items },
+	{ menu_items: menus.footer_b_navigation_items },
+	{ menu_items: menus.footer_c_navigation_items },
+] %}
+`;
+	assert.equal(await fmt(source, { printWidth: 200 }), source);
+	// a subtle variation that does get formatted: extra spaces after colons
+	assert.equal(
+		await fmt(
+			`{% set footer_menus = [
+	{ menu_items:  menus.footer_a_navigation_items },
+	{ menu_items:  menus.footer_b_navigation_items },
+	{ menu_items:  menus.footer_c_navigation_items },
+] %}
+`,
+			{ printWidth: 200 },
+		),
+		source,
+	);
+});
+test('preserves only a single blank line between siblings', async () => {
+	{
+		const source = `<div>
+	<p>a</p>
+	<p>b</p>
+</div>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<div>
+	<p>a</p>
+	<p>b</p>
+</div>
+`,
+		);
+	}
+	{
+		const source = `<div>
+	<p>a</p>
+	<p>b</p>
+</div>`;
+		const out = await fmt(source);
+		assert.equal(
+			out,
+			`<div>
+	<p>a</p>
+	<p>b</p>
+</div>
+`,
+		);
+	}
+});
+test('drops blank lines at the start of the document', async () => {
+	assert.equal(await fmt(`\n\n\n<div>x</div>\n\n\n`), `<div>x</div>\n`);
+	assert.equal(
+		await fmt(`\n\n{% if a %}\n\t<p>x</p>\n{% endif %}`),
+		`{% if a %}
+	<p>x</p>
+{% endif %}
+`,
+	);
+});
+test('preserves blank lines between root-level siblings', async () => {
+	const source = `<p>a</p>
+<p>b</p>
+<p>c</p>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: extra blank lines collapse
+	assert.equal(
+		await fmt(`<p>a</p>
+<p>b</p>
+<p>c</p>
+`),
+		source,
+	);
+});
+test('preserves blank lines around twig section heads and bodies', async () => {
+	const source = `{% if a %}
+	<p>x</p>
+{% else %}
+	<p>y</p>
+{% endif %}
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: extra blank lines collapse
+	assert.equal(
+		await fmt(`{% if a %}
+	<p>x</p>
+{% else %}
+	<p>y</p>
+{% endif %}
+`),
+		source,
+	);
+});
+test('keeps blank lines between statements bordered by whitespace trim markers', async () => {
+	const source = `{% if foo %}
+{%- endif -%}
+{%- if bar -%}
+{% endif %}
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: extra spaces in the tag
+	assert.equal(
+		await fmt(`{%   if foo   %}
+{%- endif -%}
+{%- if bar -%}
+{% endif %}
+`),
+		source,
+	);
+});
+test('keeps twig comments', async () => {
+	const out = await fmt(`{# note #}
+<div>x</div>`);
+	assert.equal(
+		out,
+		`{# note #}
+<div>x</div>
+`,
+	);
+	// a subtle variation that does get formatted: extra spaces in the comment
+	assert.equal(
+		await fmt(`{#   note   #}
+<div>x</div>`),
+		out,
+	);
+});
+test('format twig comments', async () => {
+	{
+		const out = await fmt(`{#  note #}
+<div>x</div>`);
+		assert.equal(
+			out,
+			`{# note #}
+<div>x</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`{# note  #}
+<div>x</div>`);
+		assert.equal(
+			out,
+			`{# note #}
+<div>x</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`{#
+	long note
+	seconde line
+#}
+<div>x</div>`);
+		assert.equal(
+			out,
+			`{#
+	long note
+	seconde line
+#}
+<div>x</div>
+`,
+		);
+		// a subtle variation that does get formatted: a run of spaces inside
+		const normalized = await fmt(`{#
+	long   note
+	seconde line
+#}
+<div>x</div>`);
+		assert.equal(
+			normalized,
+			`{#
+	long note
+	seconde line
+#}
+<div>x</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`{# long note
+	seconde line
+#}
+<div>x</div>`);
+		assert.equal(
+			out,
+			`{#
+	long note
+	seconde line
+#}
+<div>x</div>
+`,
+		);
+	}
+	{
+		const out = await fmt(`{#
+	long note
+	seconde line #}
+<div>x</div>`);
+		assert.equal(
+			out,
+			`{#
+	long note
+	seconde line
+#}
+<div>x</div>
+`,
+		);
+	}
+});
+test('keeps html comments and doctype', async () => {
+	const out = await fmt(`<!doctype html>
+<!-- c -->
+<p>x</p>`);
+	assert.equal(
+		out,
+		`<!doctype html>
+<!-- c -->
+<p>x</p>
+`,
+	);
+	// a subtle variation that does get formatted: a space in the element tag
+	assert.equal(
+		await fmt(`<!doctype html>
+<!-- c -->
+<p >x</p>`),
+		out,
+	);
+});
+test('report-only mode: check returns false when formatting differs', async () => {
+	const unformatted = '<div class="a" data-b="1">x</div>';
+	const ok = await check(unformatted, { parser: 'twig-html', plugins: [plugin] });
+	assert.equal(ok, false);
+});
+test('report-only mode: check returns true when already formatted', async () => {
+	const formatted = await fmt('<div class="a" data-b="1">x</div>');
+	const ok = await check(formatted, { parser: 'twig-html', plugins: [plugin] });
+	assert.equal(ok, true);
+});
+test('range formatting does not corrupt output', async () => {
+	// Prettier's range machinery (`calculateRange` -> `isSourceElement`) only
+	// recognises built-in parser names, so a custom parser gets a no-op range.
+	// The guarantee we can make, and test, is that requesting a range returns
+	// the original source untouched (no offset drift or corruption).
+	const source = `<div class="a">keep</div>
+<p class="x" data-y="1">z</p>`;
+	const rangeStart = source.indexOf('<p');
+	const rangeEnd = source.length;
+	const out = await fmt(source, { rangeStart, rangeEnd });
+	assert.equal(out, source);
+	// a subtle variation that does get formatted: without a range the same
+	// source has its multi-attribute tag expanded
+	assert.equal(
+		await fmt(source),
+		`<div class="a">keep</div>
+<p
+	class="x"
+	data-y="1"
+>z</p>
+`,
+	);
+});
+test('cursor offset is preserved', async () => {
+	const source = `<div>
+	<p>a</p>
+	<span>b</span>
+</div>`;
+	const cursorOffset = source.indexOf('<span');
+	const res = await formatWithCursor(source, {
+		parser: 'twig-html',
+		plugins: [plugin],
+		cursorOffset,
+	});
+	assert.equal(res.formatted, `${source}\n`);
+	// the cursor still sits on the opening `<` of the `<span>` element
+	assert.equal(res.formatted[res.cursorOffset], '<');
+	assert.equal(res.formatted.slice(res.cursorOffset, res.cursorOffset + 5), '<span');
+	// a subtle variation that does get formatted: the mis-indented paragraph is
+	// re-indented while the cursor still tracks the `<span>` element
+	const unformatted = `<div>
+<p>a</p>
+	<span>b</span>
+</div>`;
+	const res2 = await formatWithCursor(unformatted, {
+		parser: 'twig-html',
+		plugins: [plugin],
+		cursorOffset: unformatted.indexOf('<span'),
+	});
+	assert.equal(
+		res2.formatted,
+		`<div>
+	<p>a</p>
+	<span>b</span>
+</div>
+`,
+	);
+	assert.equal(res2.formatted.slice(res2.cursorOffset, res2.cursorOffset + 5), '<span');
+});
+test('formats idempotently', async () => {
+	const samples = [
+		`<div class="a">x</div>`,
+		`<div
+	class="a"
+	data-x="1"
+>x</div>`,
+		`{% if x %}
+	<p>a</p>
+{% else %}
+	<p>b</p>
+{% endif %}`,
+		`<ul>
+	{% for i in items %}
+		<li>{{ i }}</li>
+	{% endfor %}
+</ul>`,
+	];
+	for (const s of samples) {
+		const once = await fmt(s);
+		const twice = await fmt(once);
+		assert.equal(once, twice, `not idempotent for ${JSON.stringify(s)}`);
+	}
+});
+test('preserves non-embedded raw-text element content verbatim', async () => {
+	const source = `<textarea>
+	keep   spacing
+		indented
+</textarea>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: a space in the start tag
+	// (the raw content is still untouched)
+	assert.equal(
+		await fmt(`<textarea >
+	keep   spacing
+		indented
+</textarea>
+`),
+		source,
+	);
+});
+test('formats embedded JavaScript and keeps twig constructs', async () => {
+	const source = `<script>
+	var config = {{ config_json|json_encode|raw }};
+	if (config) { console.log('{{ message }}'); }
+</script>
+`;
+	assert.equal(
+		await fmt(source),
+		`<script>
+	var config = {{ config_json|json_encode|raw }};
+	if (config) {
+		console.log("{{ message }}");
+	}
+</script>
+`,
+	);
+});
+test('formats embedded CSS and keeps twig constructs', async () => {
+	const source = `<style>
+	.card { color: {{ color }}; background: url({{ background_url }}); }
+</style>
+`;
+	assert.equal(
+		await fmt(source),
+		`<style>
+	.card {
+		color: {{ color }};
+		background: url({{ background_url }});
+	}
+</style>
+`,
+	);
+});
+test('formats scripts with inline twig control flow', async () => {
+	const source = `<script>
+	(function () {
+		window.Mr = {
+			gtagConfigured: {% if options.google_metrics.gtag_id %}true{% else %}false{% endif %}
+		};
+	})();
+</script>
+`;
+	assert.equal(
+		await fmt(source, { singleQuote: true }),
+		`<script>
+	(function () {
+		window.Mr = {
+			gtagConfigured: {% if options.google_metrics.gtag_id %}true{% else %}false{% endif %}
+		};
+	})();
+</script>
+`,
+	);
+});
+test('keeps multi-line twig blocks indented inside embedded JavaScript', async () => {
+	const source = `<script>
+	gtag("config", {{ options.google_metrics.gtag_id|json_encode }}, {
+		{% if options.google_metrics.debug_mode %}
+			'debug_mode': true
+		{% endif %}
+	});
+</script>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: a space in the JavaScript,
+	// while the multi-line twig block keeps its indentation
+	assert.equal(
+		await fmt(`<script>
+	gtag( "config", {{ options.google_metrics.gtag_id|json_encode }}, {
+		{% if options.google_metrics.debug_mode %}
+			'debug_mode': true
+		{% endif %}
+	});
+</script>
+`),
+		source,
+	);
+});
+test('drops trailing commas in embedded JavaScript only', async () => {
+	const source = `<script>
+	var config = {
+		a: 1,
+		b: 2,
+	};
+	gtag("config", "x", {
+		c: 3,
+	});
+</script>
+<style>
+	.a { color: red; }
+</style>
+{% include 'x.twig' with { a: 1, b: 2 } %}`;
+	assert.equal(
+		await fmt(source),
+		`<script>
+	var config = {
+		a: 1,
+		b: 2
+	};
+	gtag("config", "x", {
+		c: 3
+	});
+</script>
+<style>
+	.a {
+		color: red;
+	}
+</style>
+{% include 'x.twig' with {
+	a: 1,
+	b: 2,
+} %}
+`,
+	);
+});
+test('honours the trailingComma option for twig constructs only', async () => {
+	const source = `{% include 'partials/teaser-list-c.twig' with {
+	teasers: format_teasers_data(posts)
+} %}
+<script>
+	var config = {
+		a: 1,
+	};
+</script>
+<style>
+	.a { color: red; }
+</style>`;
+	assert.equal(
+		await fmt(source),
+		`{% include 'partials/teaser-list-c.twig' with {
+	teasers: format_teasers_data(posts),
+} %}
+<script>
+	var config = {
+		a: 1
+	};
+</script>
+<style>
+	.a {
+		color: red;
+	}
+</style>
+`,
+	);
+	assert.equal(
+		await fmt(source, { trailingComma: 'none' }),
+		`{% include 'partials/teaser-list-c.twig' with {
+	teasers: format_teasers_data(posts)
+} %}
+<script>
+	var config = {
+		a: 1
+	};
+</script>
+<style>
+	.a {
+		color: red;
+	}
+</style>
+`,
+	);
+});
+test('does not touch empty or external scripts and styles', async () => {
+	assert.equal(await fmt('<script src="/x.js"></script>'), '<script src="/x.js"></script>\n');
+	assert.equal(await fmt('<script></script>'), '<script></script>\n');
+	assert.equal(await fmt('<style></style>'), '<style></style>\n');
+});
+test('preserves significant whitespace inside <pre>', async () => {
+	const source = `<pre>
+  two spaces
+	tab
+		more
+</pre>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: a space in the start tag
+	// (the whitespace-significant content is still untouched)
+	assert.equal(
+		await fmt(`<pre >
+  two spaces
+	tab
+		more
+</pre>
+`),
+		source,
+	);
+});
+test('keeps void elements without end tags', async () => {
+	assert.equal(await fmt('<br>'), '<br>\n');
+	assert.equal(await fmt('<hr>'), '<hr>\n');
+	assert.equal(await fmt('<img src="a.png">'), '<img src="a.png">\n');
+});
+test('expands multi-attribute void elements but never adds an end tag', async () => {
+	assert.equal(
+		await fmt('<img src="a.png" alt="a">'),
+		`<img
+	src="a.png"
+	alt="a"
+>
+`,
+	);
+});
+test('keeps self-closing syntax for custom elements', async () => {
+	assert.equal(await fmt('<custom-element />'), '<custom-element />\n');
+	assert.equal(
+		await fmt(`<custom-element />
+<p>x</p>`),
+		`<custom-element />
+<p>x</p>
+`,
+	);
+	// subtle variations that do get formatted: the space before the slash is
+	// normalised to a single one
+	assert.equal(await fmt('<custom-element  />'), '<custom-element />\n');
+	assert.equal(
+		await fmt(`<custom-element/>
+<p>x</p>`),
+		`<custom-element />
+<p>x</p>
+`,
+	);
+});
+test('does not invent an end tag for a self-closing single-attribute tag', async () => {
+	// regression: the single-line start tag used to drop the `/`
+	assert.equal(await fmt('<img src="a" />'), '<img src="a" />\n');
+});
+test('ends the document with exactly one newline', async () => {
+	assert.equal(await fmt('<div>x</div>'), '<div>x</div>\n');
+	assert.equal(
+		await fmt(`<div>x</div>
+`),
+		'<div>x</div>\n',
+	);
+	assert.equal(await fmt('  ', { parser: 'twig-html', plugins: [plugin] }), '');
+});
+test('normalizes unquoted, single-quoted and interpolated attribute forms', async () => {
+	const out = await fmt(`<input type=text disabled value='a b' data-label="{{ label }}">`);
+	assert.equal(
+		out,
+		`<input
+	type=text
+	disabled
+	value='a b'
+	data-label="{{ label }}"
+>
+`,
+	);
+});
+test('keeps event-handler attribute values verbatim', async () => {
+	const source = `<form
+	class="x"
+	onsubmit="
+	;(function (e) {
+		var element = document.getElementById('{{ id }}-select');
+		if (!element) return;
+		window.location = href;
+	}(event));
+"
+>
+</form>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: the ordinary attribute is
+	// normalised while the event-handler value stays verbatim
+	assert.equal(
+		await fmt(`<form
+	class = "x"
+	onsubmit="
+	;(function (e) {
+		var element = document.getElementById('{{ id }}-select');
+		if (!element) return;
+		window.location = href;
+	}(event));
+"
+>
+</form>
+`),
+		source,
+	);
+});
+test('expands the start tag when an attribute value is multi-line', async () => {
+	const source = `<div style="
+	background-color: paleturquoise;
+	box-sizing: border-box;
+	font-family: monospace;
+	min-height: 6.25rem;
+">
+	<p>
+		wrapper
+	</p>
+</div>
+`;
+	assert.equal(
+		await fmt(source),
+		`<div
+	style="
+		background-color: paleturquoise;
+		box-sizing: border-box;
+		font-family: monospace;
+		min-height: 6.25rem;
+	"
+>
+	<p>
+		wrapper
+	</p>
+</div>
+`,
+	);
+});
+test('aligns multi-line attribute values on one indent level', async () => {
+	{
+		const out = await fmt(`<img srcset="
+	{{ url|add_query_arg({ w: 1600, q: 45 }) }} 2x,
+		{{ url|add_query_arg({ w: 800 }) }}
+">`);
+		assert.equal(
+			out,
+			`<img
+	srcset="
+		{{ url|add_query_arg({ w: 1600, q: 45 }) }} 2x,
+		{{ url|add_query_arg({ w: 800 }) }}
+	"
+>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<div class="x" id="y"><img
+	srcset="
+		{{ a }} 1x,
+			{{ b }} 2x
+	"
+></div>`);
+		assert.equal(
+			out,
+			`<div
+	class="x"
+	id="y"
+>
+	<img
+		srcset="
+			{{ a }} 1x,
+			{{ b }} 2x
+		"
+	>
+</div>
+`,
+		);
+	}
+});
+test('indents twig block bodies while section heads stay at block indent', async () => {
+	const source = `{% if a %}
+	{% for x in y %}
+		<p>{{ x }}</p>
+	{% endfor %}
+{% elseif b %}
+	<p>b</p>
+{% else %}
+	<p>c</p>
+{% endif %}
+`;
+	const out = await fmt(source);
+	assert.equal(out, source);
+	// a subtle variation that does get formatted: spaces inside the block tags
+	assert.equal(
+		await fmt(`{%  if a  %}
+	{%  for x in y  %}
+		<p>{{ x }}</p>
+	{% endfor %}
+{% elseif b %}
+	<p>b</p>
+{% else %}
+	<p>c</p>
+{% endif %}
+`),
+		source,
+	);
+});
+test('places else and elseif at the block indent in a flattened chain', async () => {
+	{
+		const out = await fmt(`{% if user %}<span>{{ user.name }}</span>{% endif %}`);
+		assert.equal(
+			out,
+			`{% if user %}
+	<span>{{ user.name }}</span>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% if user %}
+	<span>{{ user.name }}</span>
+	{% endif %}`);
+		assert.equal(
+			out,
+			`{% if user %}
+	<span>{{ user.name }}</span>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% if user %}<span>{{ user.name }}</span>{% else %}<span>N/A</span>{% endif %}`);
+		assert.equal(
+			out,
+			`{% if user %}
+	<span>{{ user.name }}</span>
+{% else %}
+	<span>N/A</span>
+{% endif %}
+`,
+		);
+	}
+	{
+		const out = await fmt(`{% if user %}
+	<span>{{ user.name }}</span>
+	{% else %}
+	<span>N/A</span>
+{% endif %}`);
+		assert.equal(
+			out,
+			`{% if user %}
+	<span>{{ user.name }}</span>
+{% else %}
+	<span>N/A</span>
+{% endif %}
+`,
+		);
+	}
+});
+test('does not mess with whitespace in html elements', async () => {
+	{
+		const out = await fmt(`<span>{% if user %}{{ user.name }}{% else %}N/A{% endif %}</span>`);
+		assert.equal(
+			out,
+			`<span>{% if user %}{{ user.name }}{% else %}N/A{% endif %}</span>
+`,
+		);
+	}
+	{
+		const out = await fmt(`<span>
+	{% if user %} {{ user.name }}{% else %} N/A{% endif %}
+</span>`);
+		assert.equal(
+			out,
+			`<span>
+	{% if user %} {{ user.name }}{% else %} N/A{% endif %}
+</span>
+`,
+		);
+	}
+});
+test('drops redundant blank lines between siblings', async () => {
+	const source = `<div>alpha</div>
+<div>beta</div>
+<div>gamma</div>`;
+	const out = await fmt(source);
+	assert.equal(
+		out,
+		`<div>alpha</div>
+<div>beta</div>
+<div>gamma</div>
+`,
+	);
+});
+test('keeps twig and html comments, including inline and trimmed comments', async () => {
+	const source = `<!doctype html>
+<!-- an html comment -->
+{# a twig comment #}
+{#- a trimmed twig comment -#}
+<div>{# inline #}text</div>
+`;
+	const out = await fmt(source);
+	assert.equal(out, source);
+	// a subtle variation that does get formatted: spaces in the standalone
+	// comments are collapsed (the verbatim inline comment is left alone)
+	assert.equal(
+		await fmt(`<!doctype html>
+<!-- an html comment -->
+{#  a twig comment  #}
+{#-  a trimmed twig comment  -#}
+<div>{# inline #}text</div>
+`),
+		source,
+	);
+});
+test('indents deeply nested elements', async () => {
+	const out = await fmt(`<div><section><article><p>deep</p></article></section></div>`);
+	assert.equal(
+		out,
+		`<div>
+	<section>
+		<article>
+			<p>deep</p>
+		</article>
+	</section>
+</div>
+`,
+	);
+});
+test('indents nested loops inside elements', async () => {
+	const source = `<table>
+	<tbody>
+		{% for row in rows %}
+			<tr>
+				{% for cell in row %}
+					<td>{{ cell }}</td>
+				{% endfor %}
+			</tr>
+		{% endfor %}
+	</tbody>
+</table>
+`;
+	assert.equal(await fmt(source), source);
+	// a subtle variation that does get formatted: spaces inside the loop tag
+	assert.equal(
+		await fmt(`<table>
+	<tbody>
+		{%  for row in rows  %}
+			<tr>
+				{% for cell in row %}
+					<td>{{ cell }}</td>
+				{% endfor %}
+			</tr>
+		{% endfor %}
+	</tbody>
+</table>
+`),
+		source,
+	);
+});
+test('nests control structures inside elements', async () => {
+	const out = await fmt(`{% for group in groups %}<div><h2>{{ group.name }}</h2><ul>{% for item in group.items %}<li>{{ item }}</li>{% endfor %}</ul></div>{% endfor %}`);
+	assert.equal(
+		out,
+		`{% for group in groups %}
+	<div>
+		<h2>{{ group.name }}</h2>
+		<ul>
+			{% for item in group.items %}
+				<li>{{ item }}</li>
+			{% endfor %}
+		</ul>
+	</div>
+{% endfor %}
+`,
+	);
+});
+test('indents nested if/else inside a loop with multi-attribute tags', async () => {
+	const out = await fmt(`{% for x in items %}{% if x.active %}<li class="active" data-id="{{ x.id }}">{{ x.name }}</li>{% else %}<li>{{ x.name }}</li>{% endif %}{% else %}<li>empty</li>{% endfor %}`);
+	assert.equal(
+		out,
+		`{% for x in items %}
+	{% if x.active %}
+		<li
+			class="active"
+			data-id="{{ x.id }}"
+		>{{ x.name }}</li>
+	{% else %}
+		<li>{{ x.name }}</li>
+	{% endif %}
+{% else %}
+	<li>empty</li>
+{% endfor %}
+`,
+	);
+});
+test('keeps an if/elseif/else chain with inline bodies verbatim', async () => {
+	assert.equal(
+		await fmt(`{% if a %}A{% elseif b %}B{% elseif c %}C{% else %}D{% endif %}`),
+		`{% if a %}A{% elseif b %}B{% elseif c %}C{% else %}D{% endif %}
+`,
+	);
+	// a subtle variation that does get formatted: a line break inside a body
+	// means the chain is no longer inline, so it is expanded
+	assert.equal(
+		await fmt(`{% if a %}
+A{% elseif b %}B{% elseif c %}C{% else %}D{% endif %}`),
+		`{% if a %}
+	A
+{% elseif b %}
+	B
+{% elseif c %}
+	C
+{% else %}
+	D
+{% endif %}
+`,
+	);
+});
+test('indents nested twig blocks inside nested elements', async () => {
+	const out = await fmt(`<div>
+<section>
+{% if a %}
+{% for x in y %}
+<p>{{ x }}</p>
+{% endfor %}
+{% else %}
+<p>none</p>
+{% endif %}
+</section>
+</div>`);
+	assert.equal(
+		out,
+		`<div>
+	<section>
+		{% if a %}
+			{% for x in y %}
+				<p>{{ x }}</p>
+			{% endfor %}
+		{% else %}
+			<p>none</p>
+		{% endif %}
+	</section>
+</div>
+`,
+	);
+});
+test('nested indent for include blocks', async () => {
+	const source = `<div class="row">
+	<div class="wrapper">
+		<div class="frame-detail">
+			{% if page_fields.colorways|length > 0 %}
+				<ul class="frame-detail__colorways">
+					{% for colorway in page_fields.colorways %}
+						{% set image = ensure_timber_image(colorway.image) %}
+						{% if image and colorway.name %}
+							{% set anchor = single_use_anchor(fn('sanitize_title', colorway.name)) %}
+							<li
+								id="{{ anchor }}"
+								class="frame-detail__colorways__item"
+							>
+								{% include 'snippets/colorway.twig' with {
+									lazy_loading: loop.index0 > 1,
+								} %}
+							</li>
+						{% endif %}
+					{% endfor %}
+				</ul>
+			{% endif %}
+		</div>
+	</div>
+</div>
+`;
+	const out = await fmt(source);
+	assert.equal(out, source);
+	// a subtle variation that does get formatted: spaces inside a block tag
+	assert.equal(
+		await fmt(`<div class="row">
+	<div class="wrapper">
+		<div class="frame-detail">
+			{%  if page_fields.colorways|length > 0  %}
+				<ul class="frame-detail__colorways">
+					{% for colorway in page_fields.colorways %}
+						{% set image = ensure_timber_image(colorway.image) %}
+						{% if image and colorway.name %}
+							{% set anchor = single_use_anchor(fn('sanitize_title', colorway.name)) %}
+							<li
+								id="{{ anchor }}"
+								class="frame-detail__colorways__item"
+							>
+								{% include 'snippets/colorway.twig' with {
+									lazy_loading: loop.index0 > 1,
+								} %}
+							</li>
+						{% endif %}
+					{% endfor %}
+				</ul>
+			{% endif %}
+		</div>
+	</div>
+</div>
+`),
+		source,
+	);
+});
+test('nested blank link', async () => {
+	const source = `<div class="row">
+	<div class="wrapper">
+		<div class="frame-detail">
+			<div class="frame-detail__information">
+				{% if page_fields.product_description %}
+					<h2 class="frame-detail__information__title type-b">
+						{{ __('Description', 'mr') }}
+					</h2>
+					<div class="frame-detail__information__description type-d">
+						{{ page_fields.product_description|wpautop }}
+					</div>
+				{% endif %}
+			</div>
+		</div>
+	</div>
+</div>
+`;
+	const out = await fmt(source);
+	assert.equal(out, source);
+	// a subtle variation that does get formatted: an extra blank line collapses
+	assert.equal(
+		await fmt(`<div class="row">
+	<div class="wrapper">
+		<div class="frame-detail">
+			<div class="frame-detail__information">
+				{% if page_fields.product_description %}
+					<h2 class="frame-detail__information__title type-b">
+						{{ __('Description', 'mr') }}
+					</h2>
+					<div class="frame-detail__information__description type-d">
+						{{ page_fields.product_description|wpautop }}
+					</div>
+				{% endif %}
+			</div>
+		</div>
+	</div>
+</div>
+`),
+		source,
+	);
+});
+test('multiple twig structures on a single line', async () => {
+	const source = `{{ teaser.number_of_colorways }} {{ __('colours', 'mr') -}}
+`;
+	const out = await fmt(source);
+	assert.equal(out, source);
+	// a subtle variation that does get formatted: extra spaces inside and
+	// between the expressions are normalised
+	assert.equal(
+		await fmt(`{{  teaser.number_of_colorways  }}  {{  __('colours', 'mr') -}}
+`),
+		source,
+	);
+});