@mrhenry/prettier-twig 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## 0.1.3 (2026-09-24)
+
+ * Normalize twig structures inside attribute values (`{ w:1256 , q: 45 }` becomes `{ w: 1256, q: 45 }`)
+ * Normalize mapping key/value spacing (`{a:1}` becomes `{ a: 1 }`), leaving ternaries and slices untouched
+ * Drop whitespace around the `|` filter operator (`image.imgix_src | add_query_arg` becomes `image.imgix_src|add_query_arg`)
+
+## 0.1.2 (2026-09-22)
+
+ * Fix inline elements (text-level, ruby, inline-level replaced content and inline-level form controls) being pushed onto their own line instead of staying with the surrounding text
+ * Fix a comment written right after an opening tag being moved onto its own line

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mrhenry/prettier-twig",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"type": "module",
 	"main": "src/index.js",
 	"license": "MIT",

package/src/printer.js

@@ -70,6 +70,13 @@ function printChildren(path, printCallback, source, leadingHardline = true, opti
 			docs.push(childDoc);
 		} else if (blankBefore) {
 			docs.push([hardline, hardline, childDoc]);
+		} else if (
+			first &&
+			!gap.includes('\n') &&
+			(child.type === 'comment' || child.type === 'twigComment')
+		) {
+			// a comment written right after the opening tag stays there
+			docs.push(gap === '' ? childDoc : [' ', childDoc]);
 		} else if (!gap.includes('\n') && previousWasInline && inline) {
 			// consecutive inline expressions on one source line stay together
 			docs.push([gap === '' ? '' : ' ', childDoc]);
@@ -132,11 +139,25 @@ function isInlineChild(node) {
 	return node.type === 'element' && INLINE_ELEMENTS.has(node.name);
 }
 
-/** Phrasing (inline) elements that may share a line with neighbouring text. */
+/**
+ * Elements that are `display: inline` by default (and the inline-level ruby,
+ * replaced and form-control elements), so they may share a line with
+ * neighbouring text instead of being moved onto their own line.
+ */
 const INLINE_ELEMENTS = new Set([
-	'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em',
-	'i', 'img', 'kbd', 'mark', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small',
-	'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr',
+	// text-level semantics
+	'a', 'abbr', 'acronym', 'b', 'bdi', 'bdo', 'big', 'br', 'cite', 'code',
+	'data', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'mark', 'nobr',
+	'q', 's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup',
+	'time', 'tt', 'u', 'var', 'wbr',
+	// ruby annotations
+	'rp', 'rt', 'ruby',
+	// embedded / replaced inline-level content
+	'audio', 'canvas', 'embed', 'iframe', 'img', 'map', 'math', 'object',
+	'picture', 'svg', 'video',
+	// inline-level form controls
+	'button', 'input', 'label', 'meter', 'output', 'progress', 'select',
+	'textarea',
 ]);
 
 /**
@@ -193,15 +214,21 @@ function hasBlankLine(source, from, to) {
 
 /**
  * Collapses runs of whitespace in a twig construct's body to single spaces,
- * leaving the contents of string literals untouched.
+ * leaving the contents of string literals untouched. When `removeFilterSpaces`
+ * is set, whitespace around the `|` filter operator is dropped too (`a | b`
+ * becomes `a|b`); comment bodies keep their spaces by leaving it unset.
  *
  * @param {string} text
+ * @param {boolean} [removeFilterSpaces]
  * @returns {string}
  */
-function collapseWhitespace(text) {
+function collapseWhitespace(text, removeFilterSpaces = false) {
 	let out = '';
 	let quote = '';
 	let pendingSpace = false;
+	// `|` is Twig's filter operator: no space goes before or after it
+	const noSpaceBefore = removeFilterSpaces ? ')]},|' : ')]},';
+	const noSpaceAfter = removeFilterSpaces ? '([{|' : '([{';
 	for (let i = 0; i < text.length; i += 1) {
 		const ch = text[i];
 		if (quote !== '') {
@@ -228,7 +255,7 @@ function collapseWhitespace(text) {
 			continue;
 		}
 		const previous = out[out.length - 1] ?? '';
-		if (pendingSpace && out !== '' && !'([{'.includes(previous) && !')]},'.includes(ch)) {
+		if (pendingSpace && out !== '' && !noSpaceAfter.includes(previous) && !noSpaceBefore.includes(ch)) {
 			out += ' ';
 		}
 		pendingSpace = false;
@@ -282,7 +309,7 @@ function twigDelimiters(raw) {
  */
 function normalizeTwigTag(raw) {
 	const { open, close, body } = twigDelimiters(raw);
-	const normalized = collapseWhitespace(body).trim();
+	const normalized = collapseWhitespace(body, true).trim();
 	return normalized === '' ? `${open}${close}` : `${open} ${normalized} ${close}`;
 }
 
@@ -338,7 +365,7 @@ function formatTwigHead(raw, options) {
 	const unit = options.useTabs === false ? ' '.repeat(options.tabWidth ?? 4) : '\t';
 	const lines = body
 		.split(/\r?\n/)
-		.map((/** @type {string} */ text) => collapseWhitespace(text).trim());
+		.map((/** @type {string} */ text) => collapseWhitespace(text, true).trim());
 	while (lines.length > 0 && lines[0] === '') {
 		lines.shift();
 	}
@@ -477,6 +504,43 @@ function formatStructures(text, forceBreak, multiline = [], trailingComma = true
 	return docs.length === 0 ? '' : docs;
 }
 
+/**
+ * Normalizes the key/value separator of a mapping entry to `key: value` (one
+ * space after, none before). Only the first top-level colon is touched, so a
+ * ternary or slice inside the value keeps its spacing. Entries without a colon
+ * (a shorthand key) are returned unchanged.
+ *
+ * @param {string} entry
+ * @returns {string}
+ */
+function normalizeMappingEntry(entry) {
+	let depth = 0;
+	let quote = '';
+	for (let i = 0; i < entry.length; i += 1) {
+		const ch = entry[i];
+		if (quote !== '') {
+			if (ch === '\\') {
+				i += 1;
+			} else if (ch === quote) {
+				quote = '';
+			}
+			continue;
+		}
+		if (ch === '"' || ch === "'") {
+			quote = ch;
+		} else if (ch === '(' || ch === '{' || ch === '[') {
+			depth += 1;
+		} else if (ch === ')' || ch === '}' || ch === ']') {
+			depth -= 1;
+		} else if (ch === ':' && depth === 0) {
+			const key = entry.slice(0, i).trim();
+			const value = entry.slice(i + 1).trim();
+			return `${key}: ${value}`;
+		}
+	}
+	return entry;
+}
+
 /**
  * @param {string} text A single `{ … }` mapping or `[ … ]` sequence.
  * @param {boolean} forceBreak Whether the container must expand.
@@ -491,7 +555,9 @@ function formatContainer(text, forceBreak, multiline = [], trailingComma = true)
 	if (entries.length === 0) {
 		return `${open}${close}`;
 	}
-	const parts = entries.map((entry) => formatStructures(entry, false, multiline, trailingComma));
+	const parts = entries.map((entry) =>
+		formatStructures(open === '{' ? normalizeMappingEntry(entry) : entry, false, multiline, trailingComma),
+	);
 	const trailing = trailingComma ? ifBreak(',') : '';
 	// mappings get inner spaces (`{ a: 1 }`), sequences do not (`[1, 2]`)
 	const edge = open === '{' ? line : softline;
@@ -512,7 +578,7 @@ function formatContainer(text, forceBreak, multiline = [], trailingComma = true)
  */
 function formatTwigTag(raw, forceBreakStructures = false, trailingComma = true) {
 	const { open, close, body } = twigDelimiters(raw);
-	const normalized = collapseWhitespace(body).trim();
+	const normalized = collapseWhitespace(body, true).trim();
 	if (normalized === '') {
 		return `${open}${close}`;
 	}
@@ -521,14 +587,13 @@ function formatTwigTag(raw, forceBreakStructures = false, trailingComma = true)
 }
 
 /**
- * Prints an element's start tag.
+ * Whether an element's start tag prints on a single line: at most one real
+ * attribute, no conditional attributes and no multi-line attribute value.
  *
  * @param {any} node
- * @param {any[]} attrDocs
- * @param {string} source
- * @returns {any} A Prettier doc.
+ * @returns {boolean}
  */
-function printOpenTag(node, attrDocs, source) {
+function isSingleLineStartTag(node) {
 	const attrs = node.attrs ?? [];
 	const realAttrs = attrs.filter(
 		(/** @type {any} */ a) => a.type !== 'twig' && a.type !== 'twigBlock' && a.type !== 'twigComment',
@@ -541,8 +606,20 @@ function printOpenTag(node, attrDocs, source) {
 				: /[\r\n]/.test(c.text),
 		),
 	);
+	return realAttrs.length <= 1 && !hasConditional && !hasComplexValue;
+}
+
+/**
+ * Prints an element's start tag.
+ *
+ * @param {any} node
+ * @param {any[]} attrDocs
+ * @param {string} source
+ * @returns {any} A Prettier doc.
+ */
+function printOpenTag(node, attrDocs, source) {
 	const forcedSingleLine = FORCE_SINGLE_LINE.has(node.name);
-	const singleLineTag = forcedSingleLine || (realAttrs.length <= 1 && !hasConditional && !hasComplexValue);
+	const singleLineTag = forcedSingleLine || isSingleLineStartTag(node);
 	return forcedSingleLine
 		? // `html`, `link` and `meta` are never broken across lines
 		collapseWhitespace(source.slice(node.rawStart, node.startTagEnd)).replace(
@@ -648,7 +725,11 @@ function isTextOnly(node) {
 
 /**
  * Whether an element's non-empty content is only phrasing content (text,
- * prints, comments and inline twig blocks).
+ * prints, comments, inline twig blocks and inline elements).
+ *
+ * Inline element children only count as phrasing when the element's own start
+ * tag prints on a single line: once a multi-line start tag puts its `>` on a
+ * line of its own, the content belongs on the line below it.
  *
  * @param {any} node
  * @param {string} source
@@ -659,13 +740,15 @@ function isPhrasingContent(node, source) {
 	if (children.length === 0) {
 		return false;
 	}
+	const inlineElementsAttach = isSingleLineStartTag(node);
 	return children.every(
 		(/** @type {any} */ c) =>
 			c.type === 'text' ||
 			c.type === 'twig' ||
 			c.type === 'comment' ||
 			c.type === 'twigComment' ||
-			(c.type === 'twigBlock' && isInlineTwigBlock(c, source)),
+			(c.type === 'twigBlock' && isInlineTwigBlock(c, source)) ||
+			(c.type === 'element' && inlineElementsAttach && INLINE_ELEMENTS.has(c.name)),
 	);
 }
 
@@ -715,9 +798,10 @@ const RAWTEXT_ELEMENTS = new Set(['script', 'style', 'textarea', 'title', 'pre']
  * Prints an attribute.
  *
  * @param {any} attr
+ * @param {any} options
  * @returns {any} A Prettier doc.
  */
-function printAttribute(attr) {
+function printAttribute(attr, options) {
 	if (attr.quote === null && attr.valueChunks.length === 0) {
 		return attr.nameRaw;
 	}
@@ -729,10 +813,24 @@ function printAttribute(attr) {
 	const hasControlFlow = attr.valueChunks.some(
 		(/** @type {any} */ c) => c.type === 'twig' && c.atom.tag,
 	);
-	const rawValue = attr.valueChunks
-		.map((/** @type {any} */ c) => (c.type === 'twig' ? c.atom.raw : c.text))
-		.join('');
-	const value = isEventHandler || hasControlFlow ? rawValue : printAttributeValue(rawValue);
+	let value;
+	if (isEventHandler || hasControlFlow) {
+		value = attr.valueChunks
+			.map((/** @type {any} */ c) => (c.type === 'twig' ? c.atom.raw : c.text))
+			.join('');
+	} else {
+		// Plain values get their twig expressions normalized (`{ w:1256 , q: 45 }`
+		// becomes `{ w:1256, q: 45 }`, `a | b` becomes `a|b`); the surrounding
+		// literal text is kept and the result is re-indented.
+		const formattedValue = attr.valueChunks
+			.map((/** @type {any} */ c) =>
+				c.type === 'twig'
+					? docToString(formatTwigTag(c.atom.raw, false, options.trailingComma !== 'none'), options)
+					: c.text,
+			)
+			.join('');
+		value = printAttributeValue(formattedValue);
+	}
 	if (attr.quote === null) {
 		return [attr.nameRaw, '=', value];
 	}
@@ -1222,7 +1320,7 @@ function printNode(node, options) {
 		case 'twigComment':
 			return printTwigComment(node);
 		case 'attr':
-			return printAttribute(node);
+			return printAttribute(node, options);
 		case 'text':
 			return printText(node);
 		case 'comment':

package/test/prettier-twig.test.js

@@ -265,6 +265,56 @@ test('keeps text around inline elements on one line', async () => {
 	);
 });
 
+test('keeps inline elements from being pushed onto their own line', async () => {
+	{
+		const source = `<p><strong>If you are seeing this message you are viewing an incomplete page.<br>Everything you see here is WIP.</strong></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		const source = `<p class="type-d"><b>{{ __('There are no results.', 'mr') }}</b></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// no text sibling: the whole inline run stays on one line
+		const source = `<p><del>old</del><ins>new</ins></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// inline-level form controls and embedded content are covered too
+		const source = `<p><label for="x">Name</label><input id="x"><img src="a.png"></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// ruby annotations and legacy inline elements
+		const source = `<p><ruby>漢<rt>kan</rt></ruby><tt>mono</tt><big>big</big></p>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// a multi-line start tag puts its `>` on its own line, so the inline
+		// content belongs on the line below it (unchanged behaviour)
+		assert.equal(
+			await fmt(`<div class="a" data-x="1"><br></div>`),
+			`<div
+	class="a"
+	data-x="1"
+>
+	<br>
+</div>
+`,
+		);
+	}
+});
+
 test('places the closing > at the opening indent in multi-line tags', async () => {
 	{
 		const out = await fmt(`<div
@@ -1155,6 +1205,50 @@ test('keeps inline comments next to content without adding line breaks', async (
 	}
 });
 
+test('keeps a comment written after the opening tag on that line', async () => {
+	{
+		const source = `<html lang="en" class="no-js"> {# TODO: set lang correctly #}
+	<head></head>
+</html>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// open-ended partial: the comment still follows the opening tag
+		const source = `<html lang="en" class="no-js"> {# TODO: set lang correctly #}
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		const source = `<div class="a"> {# c #}
+	<p>x</p>
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// html comments behave like twig comments
+		const source = `<div class="a"> <!-- c -->
+	<p>x</p>
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+
+	{
+		// a newline after the opening tag still puts the comment on its own line
+		const source = `<div class="a">
+	{# c #}
+	<p>x</p>
+</div>
+`;
+		assert.equal(await fmt(source), source);
+	}
+});
+
 test('keeps html comments and doctype', async () => {
 	const out = await fmt(`<!doctype html>
 <!-- c -->
@@ -1670,6 +1764,86 @@ test('aligns multi-line attribute values on one indent level', async () => {
 `,
 		);
 	}
+
+	{
+		// a value whose lines have no indentation is indented one level
+		const out = await fmt(`<source
+srcset="
+{{ url|add_query_arg({ w: 120 }) }} 120w,
+{{ url|add_query_arg({ w: 250, q: 45 }) }} 250w,
+{{ url|add_query_arg({ w: 380, q: 45 }) }} 380w
+"
+sizes="calc(100vw - 96px - 48px)"
+media="(min-width: 35rem)"
+>`);
+		assert.equal(
+			out,
+			`<source
+	srcset="
+		{{ url|add_query_arg({ w: 120 }) }} 120w,
+		{{ url|add_query_arg({ w: 250, q: 45 }) }} 250w,
+		{{ url|add_query_arg({ w: 380, q: 45 }) }} 380w
+	"
+	sizes="calc(100vw - 96px - 48px)"
+	media="(min-width: 35rem)"
+>
+`,
+		);
+	}
+});
+
+test('normalizes twig structures inside attribute values', async () => {
+	const out = await fmt(`<source
+	media="(min-width: 90rem)"
+	srcset="
+		{{ url|add_query_arg({ w:1256 , q: 45 }) }} 2x,
+		{{ url|add_query_arg({ w: 628 }) }}
+	"
+>`);
+	assert.equal(
+		out,
+		`<source
+	media="(min-width: 90rem)"
+	srcset="
+		{{ url|add_query_arg({ w: 1256, q: 45 }) }} 2x,
+		{{ url|add_query_arg({ w: 628 }) }}
+	"
+>
+`,
+	);
+});
+
+test('normalizes mapping key/value spacing without touching ternary or slices', async () => {
+	assert.equal(await fmt(`{{ {a:1,b :2} }}`), `{{ { a: 1, b: 2 } }}\n`);
+	assert.equal(await fmt(`{{ { x: a ? b : c, y: list[1:2] } }}`), `{{ { x: a ? b : c, y: list[1:2] } }}\n`);
+});
+
+test('drops whitespace around the filter operator', async () => {
+	const source = `{% set url = image.imgix_src|add_query_arg({
+	auto: 'format',
+	crop: 'faces,entropy',
+	ar: aspect_ratio,
+	fit: 'crop',
+	q: 60,
+}, false) %}
+`;
+	assert.equal(await fmt(source), source);
+
+	// a subtle variation that does get formatted: spaces around the filters
+	assert.equal(
+		await fmt(`{% set url = image.imgix_src | add_query_arg({
+	auto: 'format',
+	crop: 'faces,entropy',
+	ar: aspect_ratio,
+	fit: 'crop',
+	q: 60,
+}, false) %}
+`),
+		source,
+	);
+
+	// whitespace inside a string literal is untouched
+	assert.equal(await fmt(`{{ 'a | b' | upper }}`), `{{ 'a | b'|upper }}\n`);
 });
 
 test('indents twig block bodies while section heads stay at block indent', async () => {