Avoid introducing linebreaks in template interpolations (#15209)

tests/format/js/strings/__snapshots__/jsfmt.spec.js.snap

@@ -405,11 +405,19 @@ const Bar = styled.div\`
   color: \${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important;
 \`
 
+// https://github.com/prettier/prettier/issues/3368
+let message = \`this is a long message which contains an interpolation: \${format(data)} <- like this\`;
+
+let otherMessage = \`this template contains two interpolations: \${this(one)}, which should be kept on its line,
+and this other one: \${
+  this(long.placeholder.text.goes.here.so.we.get.a.linebreak)
+}
+which already had a linebreak so can be broken up
+\`;
+
 =====================================output=====================================
 foo(
-  \`a long string \${
-    1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3
-  } with expr\`,
+  \`a long string \${1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3} with expr\`,
 );
 
 const x = \`a long string \${
@@ -463,9 +471,7 @@ foo(
 );
 
 pipe.write(
-  \`\\n  \${chalk.dim(
-    \`\\u203A and \${more} more \${more} more \${more} more \${more}\`,
-  )}\`,
+  \`\\n  \${chalk.dim(\`\\u203A and \${more} more \${more} more \${more} more \${more}\`)}\`,
 );
 
 // https://github.com/prettier/prettier/issues/1662#issue-230406820
@@ -521,6 +527,16 @@ const Bar = styled.div\`
       : palette(["text", "dark", "primary"])(props)} !important;
 \`;
 
+// https://github.com/prettier/prettier/issues/3368
+let message = \`this is a long message which contains an interpolation: \${format(data)} <- like this\`;
+
+let otherMessage = \`this template contains two interpolations: \${this(one)}, which should be kept on its line,
+and this other one: \${this(
+  long.placeholder.text.goes.here.so.we.get.a.linebreak,
+)}
+which already had a linebreak so can be broken up
+\`;
+
 ================================================================================
 `;
 
@@ -589,11 +605,19 @@ const Bar = styled.div\`
   color: \${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important;
 \`
 
+// https://github.com/prettier/prettier/issues/3368
+let message = \`this is a long message which contains an interpolation: \${format(data)} <- like this\`;
+
+let otherMessage = \`this template contains two interpolations: \${this(one)}, which should be kept on its line,
+and this other one: \${
+  this(long.placeholder.text.goes.here.so.we.get.a.linebreak)
+}
+which already had a linebreak so can be broken up
+\`;
+
 =====================================output=====================================
 foo(
-  \`a long string \${
-    1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3
-  } with expr\`
+  \`a long string \${1 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3 + 2 + 3} with expr\`
 );
 
 const x = \`a long string \${
@@ -647,9 +671,7 @@ foo(
 );
 
 pipe.write(
-  \`\\n  \${chalk.dim(
-    \`\\u203A and \${more} more \${more} more \${more} more \${more}\`
-  )}\`
+  \`\\n  \${chalk.dim(\`\\u203A and \${more} more \${more} more \${more} more \${more}\`)}\`
 );
 
 // https://github.com/prettier/prettier/issues/1662#issue-230406820
@@ -705,5 +727,15 @@ const Bar = styled.div\`
       : palette(["text", "dark", "primary"])(props)} !important;
 \`;
 
+// https://github.com/prettier/prettier/issues/3368
+let message = \`this is a long message which contains an interpolation: \${format(data)} <- like this\`;
+
+let otherMessage = \`this template contains two interpolations: \${this(one)}, which should be kept on its line,
+and this other one: \${this(
+  long.placeholder.text.goes.here.so.we.get.a.linebreak
+)}
+which already had a linebreak so can be broken up
+\`;
+
 ================================================================================
 `;

tests/format/js/strings/template-literals.js

@@ -55,3 +55,13 @@ const makeBody = (store, assets, html) =>
 const Bar = styled.div`
   color: ${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important;
 `
+
+// https://github.com/prettier/prettier/issues/3368
+let message = `this is a long message which contains an interpolation: ${format(data)} <- like this`;
+
+let otherMessage = `this template contains two interpolations: ${this(one)}, which should be kept on its line,
+and this other one: ${
+  this(long.placeholder.text.goes.here.so.we.get.a.linebreak)
+}
+which already had a linebreak so can be broken up
+`;

tests/format/js/template-literals/__snapshots__/jsfmt.spec.js.snap

@@ -167,9 +167,7 @@ throw new Error(\`pretty-format: Option "theme" has a key "\${key}" whose value
 =====================================output=====================================
 const long1 = \`long \${
   a.b //comment
-} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${
-  a.b.c.d.e
-} long long\`;
+} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long long\`;
 const long2 = \`long \${a.b.c.d.e} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long long\`;
 
 const long3 = \`long long long long long long long long long long long \${a.b.c.d.e} long long long long long long long long long long long long long\`;
@@ -178,9 +176,7 @@ const description = \`The value of the \${cssName} css of the \${this._name} ele
 
 const foo = \`such a long template string \${foo.bar.baz} that prettier will want to wrap it\`;
 
-const shouldWrapForNow = \`such a long template string \${
-  foo().bar.baz
-} that prettier will want to wrap it\`;
+const shouldWrapForNow = \`such a long template string \${foo().bar.baz} that prettier will want to wrap it\`;
 
 const shouldNotWrap = \`simple expressions should not break \${this} \${variable} \${a.b.c} \${this.b.c} \${a[b].c} \${a.b[c]} \${a.b["c"]} \${a?.b?.c}\`;
 
@@ -199,9 +195,9 @@ function testing() {
   // faking some tabs since I can't paste my real code in
   if (true) {
     if (false) {
-      return \`\${
-        process.env.OPENID_URL
-      }/something/something/something?\${Object.keys(p)
+      return \`\${process.env.OPENID_URL}/something/something/something?\${Object.keys(
+        p,
+      )
         .map((k) => \`\${encodeURIComponent(k)}=\${encodeURIComponent(p[k])}\`)
         .join("&")}\`;
     }
@@ -385,30 +381,22 @@ printWidth: 80
           )}
   \`,
   \`
-# 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",
-  )}
+# blabla \${a} \${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",
-  )}
+  # blabla \${a} \${chalk.green.underline("https://www.example.com/drupedalKangarooTransformer")}
   \`,
 ];
 
@@ -451,9 +439,7 @@ printWidth: 80
 \`111111111 222222222 333333333 444444444 555555555 666666666 777777777 \${(1, 2)}\`;
 
 =====================================output=====================================
-\`111111111 222222222 333333333 444444444 555555555 666666666 777777777 \${
-  (1, 2)
-}\`;
+\`111111111 222222222 333333333 444444444 555555555 666666666 777777777 \${(1, 2)}\`;
 
 ================================================================================
 `;

tests/format/jsx/text-wrap/__snapshots__/jsfmt.spec.js.snap

@@ -645,9 +645,7 @@ this_really_should_split_across_lines = (
 unstable_before = (
   <div className="yourScore">
     Your score:{" "}
-    <span className="score">{\`\${mini.crosstable.users[sessionUserId]} - \${
-      mini.crosstable.users[user.id]
-    }\`}</span>
+    <span className="score">{\`\${mini.crosstable.users[sessionUserId]} - \${mini.crosstable.users[user.id]}\`}</span>
   </div>
 );
 

tests/format/typescript/satisfies-operators/__snapshots__/jsfmt.spec.js.snap

@@ -1026,19 +1026,10 @@ const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + veryVe
 
 =====================================output=====================================
 const a = \`\${(foo + bar) satisfies baz}\`
-const b = \`\${
-  (veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + bar) satisfies baz
-}\`
-const b = \`\${
-  (foo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies baz
-}\`
-const b = \`\${
-  (foo + bar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz
-}\`
-const b = \`\${
-  (veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo +
-    veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz
-}\`
+const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + bar) satisfies baz}\`
+const b = \`\${(foo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies baz}\`
+const b = \`\${(foo + bar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz}\`
+const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz}\`
 
 ================================================================================
 `;
@@ -1057,19 +1048,10 @@ const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + veryVe
 
 =====================================output=====================================
 const a = \`\${(foo + bar) satisfies baz}\`;
-const b = \`\${
-  (veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + bar) satisfies baz
-}\`;
-const b = \`\${
-  (foo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies baz
-}\`;
-const b = \`\${
-  (foo + bar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz
-}\`;
-const b = \`\${
-  (veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo +
-    veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz
-}\`;
+const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + bar) satisfies baz}\`;
+const b = \`\${(foo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies baz}\`;
+const b = \`\${(foo + bar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz}\`;
+const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) satisfies veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz}\`;
 
 ================================================================================
 `;

tests/format/typescript/template-literals/__snapshots__/jsfmt.spec.js.snap

@@ -14,19 +14,10 @@ const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + veryVe
 
 =====================================output=====================================
 const a = \`\${(foo + bar) as baz}\`;
-const b = \`\${
-  (veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + bar) as baz
-}\`;
-const b = \`\${
-  (foo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) as baz
-}\`;
-const b = \`\${
-  (foo + bar) as veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz
-}\`;
-const b = \`\${
-  (veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo +
-    veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) as veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz
-}\`;
+const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + bar) as baz}\`;
+const b = \`\${(foo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) as baz}\`;
+const b = \`\${(foo + bar) as veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz}\`;
+const b = \`\${(veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongFoo + veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBar) as veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongBaz}\`;
 
 ================================================================================
 `;

tests/format/vue/vue/__snapshots__/jsfmt.spec.js.snap

@@ -1772,9 +1772,7 @@ semi: false
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${
-      foo + bar
-    } template literal value\`"
+    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
     :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
@@ -1818,9 +1816,7 @@ trailingComma: "es5"
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${
-      foo + bar
-    } template literal value\`"
+    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
     :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
@@ -1864,9 +1860,7 @@ trailingComma: "none"
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${
-      foo + bar
-    } template literal value\`"
+    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
     :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
@@ -1911,9 +1905,7 @@ semi: false
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${
-      foo + bar
-    } template literal value\`"
+    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
     :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
@@ -1959,9 +1951,7 @@ trailingComma: "es5"
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${
-      foo + bar
-    } template literal value\`"
+    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
     :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
@@ -2007,9 +1997,7 @@ trailingComma: "none"
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${
-      foo + bar
-    } template literal value\`"
+    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
     :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +