Repository: prettier/prettier (JavaScript)

Issue:
Strange indention in template literal
**Prettier 2.7.1**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEADAOlABDrBGAOiwHEIsYz0QBaagQ2qqwBJhNdcwALOgGwGsCAcwBOcBAQCuUACZwRvAJZQ4ACipcYMAA4BnJAHoDAd1MEo2gLYArXQUiWD2umH50hcJ2K2L5Bl2BwurpUAJTsuAC+ETgATESk5JQgrHTRICxs2BxY3HyCouJQUrLySirqIJo6+kamxuZWtvYQjs6u7p7a3jC+Iv5ggcFhMVjRUKggADQgENq90LrIoHQiIhDGAAqrCEsofMZ0AJ5LMwBGIi78cDAAynSWcAAyynDIAGZ8unDnl643t3ayiEyBgIkkPxAcEsZzgMjkMiedCgQkknQAYhARJY6D4UcgQHRJBRplUYJZeAB1LiKeC6dpwW67WmKAButKOBLAwVJym+Ihgm0uQhxHy+kNsAA9bsDeHAAIqSCDwMW8b4zZwifkEs50WG8UndZQwSmKGQwLjIAAcAAYNetvpTLtoCd0gvJWW8ZgBHJXwIVzPaE3TUFRwuGksS+xRiIXuUVIT5qyHfSyKUHglOyhV+t6J8UzGB603my1IWKFy6KcpCADCrQTUN0AFZSZJvgAVPV7JPqkCsiEASVKsFuYBEinmAEFZLcYEc5arvpFIkA)
<!-- prettier-ignore -->
```sh
--parser babel
```

**Input:**
<!-- prettier-ignore -->
```jsx
`
    1. Go to "--a-" ${
      chalk.green.underline("https://www.npmjs.com/package/prettier/access")
    }
    2. Go to "${a}" ${
      chalk.green.underline("https://www.npmjs.com/package/prettier/access")
    }
`
```

**Output:**
<!-- prettier-ignore -->
```jsx
`
    1. Go to "--a-" ${chalk.green.underline(
      "https://www.npmjs.com/package/prettier/access"
    )}
    2. Go to "${a}" ${chalk.green.underline(
  "https://www.npmjs.com/package/prettier/access"
)}
`;

```

**Expected behavior:**

Those two function calls should format in a similar style.


Hints:
Looking at the output doc, change it to

```diff
+          dedentToRoot(align(0,indent(indent(
    group([
      "chalk",
      ".",
      "green",
      ".",
      "underline",
      group([
        "(",
        indent([softline, '"https://www.npmjs.com/package/prettier/access"']),
        ifBreak(""),
        softline,
        ")",
      ]),
    ]),
+          )))),
```

will result the same.

[playground](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBtAOlABFgNgSyjgGUBXAM3PwA8AhCUqAEwEMAnATwBpMd0QABvx7Y8+eGxa4CRETgDkOHAEYAdFgDiELDG38AtPpb7+WeXKwBzNgwAOACgyi+IACTBhvJUzg-YAFQgAJQgIGHsvJSwpfEsoCOcorAAGCySsQj9wyPSM5gRsxNyrG1IHJ2L0-jAACykAa08iyv5VJsqk-ms4BHaOpVa+-qx+Rh82GTgh-us7Rxzh-giQNOG8rPnm4YBnCHIYSdW1s34amBhbbaQAemuAdwfVKFsAWwArbdVIF+vbFjB6ixLHBfmw4Od8HA2Nd-mA4NttvxzAt+gBdACUR36+HItDBLHqy34mJRHV2+0OpJaIHR0w6GKx6QxVJwtK2WDZ6U5ShJiUmZEoNHoY3Y3By-AAvn0GV4CBIpJTRIolAAmdRaHR6EDI0SzMqbKL8dzTHxZQIhML2GJxeypdYFeyZB38FjE9Hu1b8ihUOgMZii1aS6W8hSmHU4PXlcVuDwrFlYU0Fc2hcLW+KpJ2wR35LM5SMGzrgOq4Rpx5qDMtVEDdXqVwttOuGkBjKGTOklOYVXJLds4TPhVDkg6EOBcE4gM4XK63B53J6vD5fCA-P4AoEg2xgiFQmFgOEIpEy9k4vFwAlEmmMrBDxXFYnto9RR+Vd0enJewW+kWcQMgKV1585ShBURwsfghDrfgAG4+jqNgmEVVEVhACBbBgfBoG2ZBQHYGw7gABXYBAsJQKQ7hYDgsK4EAACNJABcFiBYF44AAGRHZByCkbZR1o+j6kY1dCEsZAYDYUheLgF4aN8U1WJYKBLFIdcADEIDYF4WAhRTkBAFhSF0ZCzheXAAHUanEeFVxIYjxHwAA3cQOF0sAEWQwgeLYGB8MkSxNM47jeI+ahiGE3A4AARVIMI4AC3AeOov42E83SmAgMB9DgahbFwdSoWQzdCBgUz8CYGAamQAAOVIQE3CAeNMyRbF0zd4ShezYuogBHaL4B81CSL07Z9CIXxfGQsEevwMEfKBfykC4+LeJ4l58FE8TlrCyLetihbAuomAWBokqyoqpAVQOyR8BkSwAGFl3mkB4QAVmQ0geP8I6SMWhKQHsiSAEkcxgYgwDYfA0IAQWYYgYA4cK4p4iUJSAA)

Patch:
diff --git a/src/language-js/print/template-literal.js b/src/language-js/print/template-literal.js
--- a/src/language-js/print/template-literal.js
+++ b/src/language-js/print/template-literal.js
@@ -50,6 +50,7 @@ function printTemplateLiteral(path, print, options) {
 
   parts.push(lineSuffixBoundary, "`");
 
+  let previousQuasiIndentSize = 0;
   path.each(({ index, node: quasi }) => {
     parts.push(print());
 
@@ -69,7 +70,11 @@ function printTemplateLiteral(path, print, options) {
     // expression inside at the beginning of ${ instead of the beginning
     // of the `.
     const { tabWidth } = options;
-    const indentSize = getIndentSize(quasi.value.raw, tabWidth);
+    const text = quasi.value.raw;
+    const indentSize = text.includes("\n")
+      ? getIndentSize(text, tabWidth)
+      : previousQuasiIndentSize;
+    previousQuasiIndentSize = indentSize;
 
     let expressionDoc = expressionDocs[index];
 
@@ -90,7 +95,7 @@ function printTemplateLiteral(path, print, options) {
     }
 
     const aligned =
-      indentSize === 0 && quasi.value.raw.endsWith("\n")
+      indentSize === 0 && text.endsWith("\n")
         ? align(Number.NEGATIVE_INFINITY, expressionDoc)
         : addAlignmentToDoc(expressionDoc, indentSize, tabWidth);
 


Test patch:
diff --git a/tests/format/js/template-literals/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/template-literals/__snapshots__/jsfmt.spec.js.snap
--- a/tests/format/js/template-literals/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/js/template-literals/__snapshots__/jsfmt.spec.js.snap
@@ -231,6 +231,190 @@ throw new Error(
 ================================================================================
 `;
 
+exports[`indention.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+[
+  \`
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  \`,
+  \`
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  \`,
+  \`
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  \`,
+  \`
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  \`,
+  \`
+          1. Go to "-{chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}" \${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  \`,
+  \`
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+          2. Go to "\${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}" \${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}
+  \`,
+\`
+# blabla \${a} \${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+
+    2. Go to "\${chalk.green.underline(
+      "https://www.example.com/drupedalKangarooTransformer",
+    )}"
+
+# blabla \${a} \${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+\`,
+  \`
+  # blabla \${a} \${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}"
+
+  # blabla \${a} \${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+  \`,
+]
+
+=====================================output=====================================
+[
+  \`
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+  \`,
+  \`
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+  \`,
+  \`
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+  \`,
+  \`
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+  \`,
+  \`
+          1. Go to "-{chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}" \${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer",
+          )}
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+  \`,
+  \`
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" \${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}
+          2. Go to "\${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer",
+          )}" \${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer",
+          )}
+  \`,
+  \`
+# blabla \${a} \${chalk.green.underline(
+    "https://www.example.com/drupedalKangarooTransformer",
+  )}
+
+    2. Go to "\${chalk.green.underline(
+      "https://www.example.com/drupedalKangarooTransformer",
+    )}"
+
+# blabla \${a} \${chalk.green.underline(
+    "https://www.example.com/drupedalKangarooTransformer",
+  )}
+\`,
+  \`
+  # blabla \${a} \${chalk.green.underline(
+    "https://www.example.com/drupedalKangarooTransformer",
+  )}
+
+      2. Go to "\${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}"
+
+  # blabla \${a} \${chalk.green.underline(
+    "https://www.example.com/drupedalKangarooTransformer",
+  )}
+  \`,
+];
+
+================================================================================
+`;
+
 exports[`logical-expressions.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "flow", "typescript"]
diff --git a/tests/format/js/template-literals/indention.js b/tests/format/js/template-literals/indention.js
new file mode 100644
--- /dev/null
+++ b/tests/format/js/template-literals/indention.js
@@ -0,0 +1,82 @@
+[
+  `
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  `,
+  `
+      2. Go to "${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  `,
+  `
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+      2. Go to "${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  `,
+  `
+      2. Go to "${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  `,
+  `
+          1. Go to "-{chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}" ${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}
+      2. Go to "${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+  `,
+  `
+      1. Go to "-{chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}" ${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer"
+      )}
+          2. Go to "${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}" ${chalk.green.underline(
+            "https://www.example.com/drupedalKangarooTransformer"
+          )}
+  `,
+`
+# blabla ${a} ${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+
+    2. Go to "${chalk.green.underline(
+      "https://www.example.com/drupedalKangarooTransformer",
+    )}"
+
+# blabla ${a} ${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+`,
+  `
+  # blabla ${a} ${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+
+      2. Go to "${chalk.green.underline(
+        "https://www.example.com/drupedalKangarooTransformer",
+      )}"
+
+  # blabla ${a} ${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
+  `,
+]