@mrhenry/prettier-twig 0.1.2 → 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.2",
+	"version": "0.1.3",
 	"type": "module",
 	"main": "src/index.js",
 	"license": "MIT",

package/src/printer.js

@@ -214,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 !== '') {
@@ -249,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;
@@ -303,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}`;
 }
 
@@ -359,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();
 	}
@@ -498,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.
@@ -512,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;
@@ -533,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}`;
 	}
@@ -753,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;
 	}
@@ -767,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];
 	}
@@ -1260,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

@@ -1764,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 () => {