diff --git a/changelog_unreleased/angular/20134.md b/changelog_unreleased/angular/20134.md new file mode 100644 index 000000000..87bf13b28 --- /dev/null +++ b/changelog_unreleased/angular/20134.md @@ -0,0 +1,21 @@ +#### Avoid breaking inline element closing tags after interpolations (#20134 by @splincode) + + +```html + +
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create one: +
+ + +
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create one: +
+ + +
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create + one: +
+``` diff --git a/src/language-html/print/children.js b/src/language-html/print/children.js index 05cadf7fb..d480b011d 100644 --- a/src/language-html/print/children.js +++ b/src/language-html/print/children.js @@ -92,6 +92,16 @@ function printBetweenLine(prevNode, nextNode) { return softline; } + if ( + needsToBorrowPrevClosingTagEndMarker(nextNode) && + prevNode.kind === "element" && + prevNode.children.length === 1 && + prevNode.firstChild.kind === "interpolation" && + prevNode.hasLeadingSpaces + ) { + return ""; + } + if ( (needsToBorrowNextOpeningTagStartMarker(prevNode) && (hasPrettierIgnore(nextNode) || diff --git a/tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap b/tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap new file mode 100644 index 000000000..8fcba89e1 --- /dev/null +++ b/tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`issue-11981.html format 1`] = ` +====================================options===================================== +parsers: ["angular"] + printWidth: 80 (default) | +=====================================input====================================== +
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create one: +
+
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create one: +
+ +=====================================output===================================== +
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create + one: +
+
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create + one: +
+ +================================================================================ +`; diff --git a/tests/format/angular/inline-interpolation/format.test.js b/tests/format/angular/inline-interpolation/format.test.js new file mode 100644 index 000000000..8cbc48b1a --- /dev/null +++ b/tests/format/angular/inline-interpolation/format.test.js @@ -0,0 +1 @@ +runFormatTest(import.meta, ["angular"]); diff --git a/tests/format/angular/inline-interpolation/issue-11981.html b/tests/format/angular/inline-interpolation/issue-11981.html new file mode 100644 index 000000000..5a139955e --- /dev/null +++ b/tests/format/angular/inline-interpolation/issue-11981.html @@ -0,0 +1,7 @@ +
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create one: +
+
+ Sorry, we couldn’t find an account for {{ phoneInput }}, let's create one: +