fix(html): leading space for leading interpolation in textarea is sensitive (#5468)

src/language-html/preprocess.js

@@ -262,22 +262,15 @@ function extractWhitespaces(ast /*, options*/) {
     const isIndentationSensitive = isIndentationSensitiveNode(node);
 
     return node.clone({
+      isWhitespaceSensitive,
+      isIndentationSensitive,
       children: node.children
         // extract whitespace nodes
         .reduce((newChildren, child) => {
-          if (child.type !== "text") {
+          if (child.type !== "text" || isWhitespaceSensitive) {
             return newChildren.concat(child);
           }
 
-          if (isWhitespaceSensitive) {
-            return newChildren.concat(
-              Object.assign({}, child, {
-                isWhitespaceSensitive,
-                isIndentationSensitive
-              })
-            );
-          }
-
           const localChildren = [];
 
           const [, leadingSpaces, text, trailingSpaces] = child.value.match(

src/language-html/printer-html.js

@@ -7,6 +7,7 @@ const {
 } = require("../doc");
 const {
   breakParent,
+  dedentToRoot,
   fill,
   group,
   hardline,
@@ -29,7 +30,6 @@ const {
   getPrettierIgnoreAttributeCommentData,
   hasPrettierIgnore,
   inferScriptParser,
-  isPreLikeNode,
   isScriptLikeTag,
   normalizeParts,
   preferHardlineAsLeadingSpaces,
@@ -199,19 +199,13 @@ function genericPrint(path, options, print) {
                     concat([
                       shouldHugContent
                         ? ifBreak(softline, "", { groupId: attrGroupId })
-                        : node.firstChild.type === "text" &&
-                          node.firstChild.isWhitespaceSensitive &&
-                          node.firstChild.isIndentationSensitive
-                        ? (node.children.length === 1 &&
-                            node.firstChild.type === "text" &&
-                            node.firstChild.value.indexOf("\n") === -1) ||
-                          node.firstChild.sourceSpan.start.line ===
-                            node.lastChild.sourceSpan.end.line
-                          ? ""
-                          : literalline
                         : node.firstChild.hasLeadingSpaces &&
                           node.firstChild.isLeadingSpaceSensitive
                         ? line
+                        : node.firstChild.type === "text" &&
+                          node.isWhitespaceSensitive &&
+                          node.isIndentationSensitive
+                        ? dedentToRoot(softline)
                         : softline,
                       printChildren(path, options, print)
                     ])
@@ -228,17 +222,16 @@ function genericPrint(path, options, print) {
                     : node.lastChild.hasTrailingSpaces &&
                       node.lastChild.isTrailingSpaceSensitive
                     ? line
-                    : node.type === "element" &&
-                      isPreLikeNode(node) &&
-                      node.lastChild.type === "text" &&
-                      (node.lastChild.value.indexOf("\n") === -1 ||
-                        new RegExp(
-                          `\\n\\s{${options.tabWidth *
-                            countParents(
-                              path,
-                              n => n.parent && n.parent.type !== "root"
-                            )}}$`
-                        ).test(node.lastChild.value))
+                    : node.lastChild.type === "text" &&
+                      node.isWhitespaceSensitive &&
+                      node.isIndentationSensitive &&
+                      new RegExp(
+                        `\\n\\s{${options.tabWidth *
+                          countParents(
+                            path,
+                            n => n.parent && n.parent.type !== "root"
+                          )}}$`
+                      ).test(node.lastChild.value)
                     ? /**
                        *     <div>
                        *       <pre>
@@ -827,8 +820,8 @@ function printClosingTagEndMarker(node) {
 }
 
 function getTextValueParts(node, value = node.value) {
-  return node.isWhitespaceSensitive
-    ? node.isIndentationSensitive
+  return node.parent.isWhitespaceSensitive
+    ? node.parent.isIndentationSensitive
       ? replaceNewlines(value, literalline)
       : replaceNewlines(
           dedentString(value.replace(/^\s*?\n|\n\s*?$/g, "")),

src/language-html/utils.js

@@ -139,51 +139,59 @@ function isIndentationSensitiveNode(node) {
 }
 
 function isLeadingSpaceSensitiveNode(node) {
-  if (isFrontMatterNode(node)) {
-    return false;
-  }
-
-  if (
-    (node.type === "text" || node.type === "interpolation") &&
-    node.prev &&
-    (node.prev.type === "text" || node.prev.type === "interpolation")
-  ) {
-    return true;
-  }
-
-  if (!node.parent || node.parent.cssDisplay === "none") {
-    return false;
-  }
+  const isLeadingSpaceSensitive = _isLeadingSpaceSensitiveNode();
 
   if (
+    isLeadingSpaceSensitive &&
     !node.prev &&
-    node.parent.type === "element" &&
+    node.parent &&
+    node.parent.tagDefinition &&
     node.parent.tagDefinition.ignoreFirstLf
   ) {
-    return false;
+    return node.type === "interpolation";
   }
 
-  if (isPreLikeNode(node.parent)) {
+  return isLeadingSpaceSensitive;
+
+  function _isLeadingSpaceSensitiveNode() {
+    if (isFrontMatterNode(node)) {
+      return false;
+    }
+
+    if (
+      (node.type === "text" || node.type === "interpolation") &&
+      node.prev &&
+      (node.prev.type === "text" || node.prev.type === "interpolation")
+    ) {
+      return true;
+    }
+
+    if (!node.parent || node.parent.cssDisplay === "none") {
+      return false;
+    }
+
+    if (isPreLikeNode(node.parent)) {
+      return true;
+    }
+
+    if (
+      !node.prev &&
+      (node.parent.type === "root" ||
+        isScriptLikeTag(node.parent) ||
+        !isFirstChildLeadingSpaceSensitiveCssDisplay(node.parent.cssDisplay))
+    ) {
+      return false;
+    }
+
+    if (
+      node.prev &&
+      !isNextLeadingSpaceSensitiveCssDisplay(node.prev.cssDisplay)
+    ) {
+      return false;
+    }
+
     return true;
   }
-
-  if (
-    !node.prev &&
-    (node.parent.type === "root" ||
-      isScriptLikeTag(node.parent) ||
-      !isFirstChildLeadingSpaceSensitiveCssDisplay(node.parent.cssDisplay))
-  ) {
-    return false;
-  }
-
-  if (
-    node.prev &&
-    !isNextLeadingSpaceSensitiveCssDisplay(node.prev.cssDisplay)
-  ) {
-    return false;
-  }
-
-  return true;
 }
 
 function isTrailingSpaceSensitiveNode(node) {

tests/html_angular/__snapshots__/jsfmt.spec.js.snap

@@ -1024,6 +1024,426 @@ exports[`attributes.component.html - angular-verify 4`] = `
 
 `;
 
+exports[`first-lf.component.html - angular-verify 1`] = `
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>
+{{ generatedDiscountCodes }}</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}123</textarea>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>    {{ generatedDiscountCodes }}</textarea>
+<textarea>
+  
+{{ generatedDiscountCodes }}</textarea
+>
+<textarea>
+  
+    {{ generatedDiscountCodes }}</textarea
+>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>    {{ generatedDiscountCodes }}123</textarea>
+<textarea>
+  
+{{ generatedDiscountCodes }}123</textarea
+>
+<textarea>
+  
+    {{ generatedDiscountCodes }}123</textarea
+>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+  
+{{ generatedDiscountCodes }}</textarea
+>
+<textarea type="text">
+  
+    {{ generatedDiscountCodes }}</textarea
+>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+  
+{{ generatedDiscountCodes }}123</textarea
+>
+<textarea type="text">
+  
+    {{ generatedDiscountCodes }}123</textarea
+>
+
+`;
+
+exports[`first-lf.component.html - angular-verify 2`] = `
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>
+{{ generatedDiscountCodes }}</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}123</textarea>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>    {{ generatedDiscountCodes }}</textarea>
+<textarea>
+  
+{{ generatedDiscountCodes }}</textarea
+>
+<textarea>
+  
+    {{ generatedDiscountCodes }}</textarea
+>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>    {{ generatedDiscountCodes }}123</textarea>
+<textarea>
+  
+{{ generatedDiscountCodes }}123</textarea
+>
+<textarea>
+  
+    {{ generatedDiscountCodes }}123</textarea
+>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+  
+{{ generatedDiscountCodes }}</textarea
+>
+<textarea type="text">
+  
+    {{ generatedDiscountCodes }}</textarea
+>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+  
+{{ generatedDiscountCodes }}123</textarea
+>
+<textarea type="text">
+  
+    {{ generatedDiscountCodes }}123</textarea
+>
+
+`;
+
+exports[`first-lf.component.html - angular-verify 3`] = `
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>
+{{ generatedDiscountCodes }}</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}123</textarea>
+~
+<textarea
+  >{{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  >{{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea>
+    {{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea>
+  
+{{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea>
+  
+    {{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  >{{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea
+  >{{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea>
+    {{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea>
+  
+{{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea>
+  
+    {{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea
+  type="text"
+  >{{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  type="text"
+  >{{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  type="text"
+>
+    {{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  type="text"
+>
+  
+{{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  type="text"
+>
+  
+    {{
+    generatedDiscountCodes
+  }}</textarea
+>
+<textarea
+  type="text"
+  >{{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea
+  type="text"
+  >{{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea
+  type="text"
+>
+    {{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea
+  type="text"
+>
+  
+{{
+    generatedDiscountCodes
+  }}123</textarea
+>
+<textarea
+  type="text"
+>
+  
+    {{
+    generatedDiscountCodes
+  }}123</textarea
+>
+
+`;
+
+exports[`first-lf.component.html - angular-verify 4`] = `
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>
+{{ generatedDiscountCodes }}</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}123</textarea>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>    {{ generatedDiscountCodes }}</textarea>
+<textarea>
+  
+{{ generatedDiscountCodes }}</textarea
+>
+<textarea>
+  
+    {{ generatedDiscountCodes }}</textarea
+>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>    {{ generatedDiscountCodes }}123</textarea>
+<textarea>
+  
+{{ generatedDiscountCodes }}123</textarea
+>
+<textarea>
+  
+    {{ generatedDiscountCodes }}123</textarea
+>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+  
+{{ generatedDiscountCodes }}</textarea
+>
+<textarea type="text">
+  
+    {{ generatedDiscountCodes }}</textarea
+>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+  
+{{ generatedDiscountCodes }}123</textarea
+>
+<textarea type="text">
+  
+    {{ generatedDiscountCodes }}123</textarea
+>
+
+`;
+
 exports[`ignore-attribute.component.html - angular-verify 1`] = `
 <div
     bindon-target=" a | b : c "

tests/html_angular/first-lf.component.html

@@ -0,0 +1,36 @@
+<textarea>{{ generatedDiscountCodes }}</textarea>
+<textarea>
+{{ generatedDiscountCodes }}</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea>{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea>  
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}</textarea>
+<textarea type="text">{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">
+    {{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+{{ generatedDiscountCodes }}123</textarea>
+<textarea type="text">  
+    {{ generatedDiscountCodes }}123</textarea>

tests/html_tags/__snapshots__/jsfmt.spec.js.snap

@@ -860,14 +860,18 @@ ___________________________
    line breaks
 
 </pre>
-<pre>     Foo     Bar     </pre>
+<pre>
+     Foo     Bar     </pre
+>
 <pre>
      Foo     Bar
 </pre>
 <pre>
 Foo     Bar
 </pre>
-<pre>     Foo     Bar</pre>
+<pre>
+     Foo     Bar</pre
+>
 <figure
   role="img"
   aria-labelledby="cow-caption"
@@ -3143,7 +3147,9 @@ exports[`textarea.html - html-verify 2`] = `
 <textarea></textarea>
 
 <div>
-  <textarea>lorem ipsum</textarea>
+  <textarea>
+lorem ipsum</textarea
+  >
 </div>
 
 `;