diff --git a/changelog_unreleased/javascript/18380-2.md b/changelog_unreleased/javascript/18380-2.md
new file mode 100644
index 000000000..7419a5e75
--- /dev/null
+++ b/changelog_unreleased/javascript/18380-2.md
@@ -0,0 +1,56 @@
+#### Fix alignment in embedded template interpolations (#18380 by @fisker)
+
+
+```jsx
+// Input
+string = `
+ .class {
+ flex-direction: column${
+ long_cond && long_cond && long_cond
+ ? "-reverse" :
+ ""
+ };
+ }
+`;
+css = css`
+ .class {
+ flex-direction: column${
+ long_cond && long_cond && long_cond
+ ? "-reverse" :
+ ""
+ };
+ }
+`;
+
+// Prettier stable
+string = `
+ .class {
+ flex-direction: column${
+ long_cond && long_cond && long_cond ? "-reverse" : ""
+ };
+ }
+`;
+css = css`
+ .class {
+ flex-direction: column${long_cond && long_cond && long_cond
+ ? "-reverse"
+ : ""};
+ }
+`;
+
+// Prettier main
+string = `
+ .class {
+ flex-direction: column${
+ long_cond && long_cond && long_cond ? "-reverse" : ""
+ };
+ }
+`;
+css = css`
+ .class {
+ flex-direction: column${
+ long_cond && long_cond && long_cond ? "-reverse" : ""
+ };
+ }
+`;
+```
diff --git a/changelog_unreleased/javascript/18380.md b/changelog_unreleased/javascript/18380.md
new file mode 100644
index 000000000..ea7c43f5d
--- /dev/null
+++ b/changelog_unreleased/javascript/18380.md
@@ -0,0 +1,34 @@
+#### Avoid linebreaks in embedded template interpolations (#18380 by @fisker)
+
+
+```jsx
+// Input
+string = /* Comment */ `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+html = /* HTML */ `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+
+// Prettier stable
+string = /* Comment */ `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+html = /* HTML */ `
+
+ ${long_cond && long_cond && long_cond && long_cond && long_cond
+ ? "content"
+ : ""}
+
+`;
+
+// Prettier main
+string = /* Comment */ `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+html = /* HTML */ `
+
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+
+`;
+```
diff --git a/src/language-js/embed/css.js b/src/language-js/embed/css.js
index f7a76de3d..5551215c9 100644
--- a/src/language-js/embed/css.js
+++ b/src/language-js/embed/css.js
@@ -11,7 +11,7 @@ import { printTemplateExpressions } from "../print/template-literal.js";
import isNodeMatches from "../utilities/is-node-matches.js";
import { isAngularComponentStyles } from "./utilities.js";
-async function printEmbedCss(textToDoc, print, path /* , options*/) {
+async function printEmbedCss(textToDoc, print, path, options) {
const { node } = path;
// Get full template literal with expressions replaced by placeholders
@@ -26,7 +26,7 @@ async function printEmbedCss(textToDoc, print, path /* , options*/) {
text += raw;
}
const quasisDoc = await textToDoc(text, { parser: "scss" });
- const expressionDocs = printTemplateExpressions(path, print);
+ const expressionDocs = printTemplateExpressions(path, options, print);
const newDoc = replacePlaceholders(quasisDoc, expressionDocs);
/* c8 ignore next 3 */
if (!newDoc) {
diff --git a/src/language-js/embed/graphql.js b/src/language-js/embed/graphql.js
index 74fe61013..1f478a966 100644
--- a/src/language-js/embed/graphql.js
+++ b/src/language-js/embed/graphql.js
@@ -5,12 +5,12 @@ import {
} from "../print/template-literal.js";
import { hasLanguageComment } from "./utilities.js";
-async function printEmbedGraphQL(textToDoc, print, path /* , options*/) {
+async function printEmbedGraphQL(textToDoc, print, path, options) {
const { node } = path;
const numQuasis = node.quasis.length;
- const expressionDocs = printTemplateExpressions(path, print);
+ const expressionDocs = printTemplateExpressions(path, options, print);
const parts = [];
for (let i = 0; i < numQuasis; i++) {
@@ -21,7 +21,6 @@ async function printEmbedGraphQL(textToDoc, print, path /* , options*/) {
const lines = text.split("\n");
const numLines = lines.length;
- const expressionDoc = expressionDocs[i];
const startsWithBlankLine =
numLines > 2 && lines[0].trim() === "" && lines[1].trim() === "";
@@ -60,8 +59,8 @@ async function printEmbedGraphQL(textToDoc, print, path /* , options*/) {
parts.push("");
}
- if (expressionDoc) {
- parts.push(expressionDoc);
+ if (!isLast) {
+ parts.push(expressionDocs[i]);
}
}
diff --git a/src/language-js/embed/html.js b/src/language-js/embed/html.js
index 8d04d30f9..1b45cddad 100644
--- a/src/language-js/embed/html.js
+++ b/src/language-js/embed/html.js
@@ -30,7 +30,7 @@ async function printEmbedHtmlLike(parser, textToDoc, print, path, options) {
)
.join("");
- const expressionDocs = printTemplateExpressions(path, print);
+ const expressionDocs = printTemplateExpressions(path, options, print);
const placeholderRegex = new RegExp(
composePlaceholder(String.raw`(\d+)`),
diff --git a/src/language-js/print/template-literal.js b/src/language-js/print/template-literal.js
index d6e483dba..1e2e2e9e5 100644
--- a/src/language-js/print/template-literal.js
+++ b/src/language-js/print/template-literal.js
@@ -28,104 +28,25 @@ import {
* @import {Doc} from "../../document/index.js"
*/
+/*
+- `TemplateLiteral`
+- `TSTemplateLiteralType` (TypeScript)
+*/
function printTemplateLiteral(path, options, print) {
- const { node } = path;
- const isTemplateLiteral = node.type === "TemplateLiteral";
-
- if (isTemplateLiteral && isJestEachTemplateLiteral(path)) {
+ if (isJestEachTemplateLiteral(path)) {
const printed = printJestEachTemplateLiteral(path, options, print);
if (printed) {
return printed;
}
}
- let expressionsKey = "expressions";
- if (node.type === "TSTemplateLiteralType") {
- expressionsKey = "types";
- }
- const parts = [];
- const expressionDocs = path.map(print, expressionsKey);
+ const expressionDocs = printTemplateExpressions(path, options, print);
+ const parts = path.map(
+ ({ isLast, index }) => [print(), isLast ? "" : expressionDocs[index]],
+ "quasis",
+ );
- parts.push(lineSuffixBoundary, "`");
-
- let previousQuasiIndentSize = 0;
- path.each(({ index, node: quasi }) => {
- parts.push(print());
-
- if (quasi.tail) {
- return;
- }
-
- // For a template literal of the following form:
- // `someQuery {
- // ${call({
- // a,
- // b,
- // })}
- // }`
- // the expression is on its own line (there is a \n in the previous
- // quasi literal), therefore we want to indent the JavaScript
- // expression inside at the beginning of ${ instead of the beginning
- // of the `.
- const { tabWidth } = options;
- const text = quasi.value.raw;
- const indentSize = text.includes("\n")
- ? getIndentSize(text, tabWidth)
- : previousQuasiIndentSize;
- previousQuasiIndentSize = indentSize;
-
- let expressionDoc = expressionDocs[index];
-
- const expression = node[expressionsKey][index];
-
- let interpolationHasNewline = hasNewlineInRange(
- options.originalText,
- locEnd(quasi),
- locStart(node.quasis[index + 1]),
- );
-
- if (!interpolationHasNewline) {
- // Never add a newline to an interpolation which didn't already have one...
- const renderedExpression = printDocToString(expressionDoc, {
- ...options,
- printWidth: Number.POSITIVE_INFINITY,
- }).formatted;
-
- // ... unless one will be introduced anyway, e.g. by a nested function.
- // This case is rare, so we can pay the cost of re-rendering.
- if (renderedExpression.includes("\n")) {
- interpolationHasNewline = true;
- } else {
- expressionDoc = renderedExpression;
- }
- }
-
- // Breaks at the template element boundaries (${ and }) are preferred to breaking
- // in the middle of a MemberExpression
- if (
- interpolationHasNewline &&
- (hasComment(expression) ||
- expression.type === "Identifier" ||
- isMemberExpression(expression) ||
- expression.type === "ConditionalExpression" ||
- expression.type === "SequenceExpression" ||
- isBinaryCastExpression(expression) ||
- isBinaryish(expression))
- ) {
- expressionDoc = [indent([softline, expressionDoc]), softline];
- }
-
- const aligned =
- indentSize === 0 && text.endsWith("\n")
- ? align(Number.NEGATIVE_INFINITY, expressionDoc)
- : addAlignmentToDoc(expressionDoc, indentSize, tabWidth);
-
- parts.push(group(["${", aligned, lineSuffixBoundary, "}"]));
- }, "quasis");
-
- parts.push("`");
-
- return parts;
+ return [lineSuffixBoundary, "`", ...parts, "`"];
}
function printTaggedTemplateExpression(path, options, print) {
@@ -175,17 +96,15 @@ function printJestEachTemplateLiteral(path, options, print) {
headerNames.some((headerName) => headerName.length > 0)
) {
options.__inJestEach = true;
- const expressions = path.map(print, "expressions");
+ const expressions = printTemplateExpressions(path, options, print);
options.__inJestEach = false;
const stringifiedExpressions = expressions.map(
(doc) =>
- "${" +
printDocToString(doc, {
...options,
printWidth: Number.POSITIVE_INFINITY,
endOfLine: "lf",
- }).formatted +
- "}",
+ }).formatted,
);
const tableBody = [{ hasLineBreak: false, cells: [] }];
@@ -248,17 +167,108 @@ function printJestEachTemplateLiteral(path, options, print) {
}
}
-function printTemplateExpression(path, print) {
- const { node } = path;
- let printed = print();
- if (hasComment(node)) {
- printed = group([indent([softline, printed]), softline]);
+const templateLiteralIndentCache = new WeakMap();
+function getTemplateLiteralExpressionIndent(path, options) {
+ const { parent: templateLiteral, index } = path;
+ if (!templateLiteralIndentCache.has(templateLiteral)) {
+ const { tabWidth } = options;
+ let previousQuasiIndentSize = 0;
+ const sizes = templateLiteral.quasis.map((quasi) => {
+ const text = quasi.value.raw;
+ const indentSize = text.includes("\n")
+ ? getIndentSize(text, tabWidth)
+ : previousQuasiIndentSize;
+ previousQuasiIndentSize = indentSize;
+ return { indentSize, previousQuasiText: text };
+ });
+ templateLiteralIndentCache.set(templateLiteral, sizes);
}
- return ["${", printed, lineSuffixBoundary, "}"];
+
+ return templateLiteralIndentCache.get(templateLiteral)[index];
}
-function printTemplateExpressions(path, print) {
- return path.map(() => printTemplateExpression(path, print), "expressions");
+/*
+- `TemplateLiteral`
+- `TSTemplateLiteralType` (TypeScript)
+*/
+function printTemplateExpression(path, options, print) {
+ const { node, index } = path;
+ let expressionDoc = print();
+
+ const templateLiteral = path.parent;
+ const { quasis } = templateLiteral;
+ const start = locEnd(quasis[index]);
+ const end = locStart(quasis[index + 1]);
+
+ let interpolationHasNewline = hasNewlineInRange(
+ options.originalText,
+ start,
+ end,
+ );
+
+ if (!interpolationHasNewline) {
+ // Never add a newline to an interpolation which didn't already have one...
+ const renderedExpression = printDocToString(expressionDoc, {
+ ...options,
+ printWidth: Number.POSITIVE_INFINITY,
+ }).formatted;
+
+ // ... unless one will be introduced anyway, e.g. by a nested function.
+ // This case is rare, so we can pay the cost of re-rendering.
+ if (renderedExpression.includes("\n")) {
+ interpolationHasNewline = true;
+ } else {
+ expressionDoc = renderedExpression;
+ }
+ }
+
+ // Breaks at the template element boundaries (${ and }) are preferred to breaking
+ // in the middle of a MemberExpression
+ if (
+ interpolationHasNewline &&
+ (hasComment(node) ||
+ node.type === "Identifier" ||
+ isMemberExpression(node) ||
+ node.type === "ConditionalExpression" ||
+ node.type === "SequenceExpression" ||
+ isBinaryCastExpression(node) ||
+ isBinaryish(node))
+ ) {
+ expressionDoc = [indent([softline, expressionDoc]), softline];
+ }
+
+ // For a template literal of the following form:
+ // `someQuery {
+ // ${call({
+ // a,
+ // b,
+ // })}
+ // }`
+ // the expression is on its own line (there is a \n in the previous
+ // quasi literal), therefore we want to indent the JavaScript
+ // expression inside at the beginning of ${ instead of the beginning
+ // of the `.
+ let { indentSize, previousQuasiText } = getTemplateLiteralExpressionIndent(
+ path,
+ options,
+ );
+ // In `jest.each`, we know expression will at least indent 2 level
+ if (options.__inJestEach) {
+ indentSize = Math.max(indentSize, options.tabWidth);
+ }
+ expressionDoc =
+ indentSize === 0 && previousQuasiText.endsWith("\n")
+ ? align(Number.NEGATIVE_INFINITY, expressionDoc)
+ : addAlignmentToDoc(expressionDoc, indentSize, options.tabWidth);
+
+ return group(["${", expressionDoc, lineSuffixBoundary, "}"]);
+}
+
+function printTemplateExpressions(path, options, print) {
+ return path.map(
+ () => printTemplateExpression(path, options, print),
+ path.node.type === "TSTemplateLiteralType" ? "types" : "expressions",
+ );
}
function escapeTemplateCharacters(doc, raw) {
@@ -277,19 +287,20 @@ function uncookTemplateElementValue(cookedValue) {
return cookedValue.replaceAll(/([\\`]|\$\{)/gu, String.raw`\$1`);
}
+/**
+ * describe.each`table`(name, fn)
+ * describe.only.each`table`(name, fn)
+ * describe.skip.each`table`(name, fn)
+ * test.each`table`(name, fn)
+ * test.only.each`table`(name, fn)
+ * test.skip.each`table`(name, fn)
+ *
+ * Ref: https://github.com/facebook/jest/pull/6102
+ */
+const jestEachTriggerRegex = /^[fx]?(?:describe|it|test)$/u;
function isJestEachTemplateLiteral({ node, parent }) {
- /**
- * describe.each`table`(name, fn)
- * describe.only.each`table`(name, fn)
- * describe.skip.each`table`(name, fn)
- * test.each`table`(name, fn)
- * test.only.each`table`(name, fn)
- * test.skip.each`table`(name, fn)
- *
- * Ref: https://github.com/facebook/jest/pull/6102
- */
- const jestEachTriggerRegex = /^[fx]?(?:describe|it|test)$/u;
return (
+ node.type === "TemplateLiteral" &&
parent.type === "TaggedTemplateExpression" &&
parent.quasi === node &&
parent.tag.type === "MemberExpression" &&
diff --git a/tests/config/run-format-test.js b/tests/config/run-format-test.js
index c7fab1beb..d50a2b9dd 100644
--- a/tests/config/run-format-test.js
+++ b/tests/config/run-format-test.js
@@ -48,6 +48,8 @@ const unstableTests = new Map(
"typescript/union/consistent-with-flow/single-type.ts",
"js/if/non-block.js",
"typescript/import-type/long-module-name/long-module-name4.ts",
+ // Unstable due to lack of indent information
+ "js/multiparser-comments/comment-inside.js",
].map((fixture) => {
const [file, isUnstable = () => true] = Array.isArray(fixture)
? fixture
diff --git a/tests/format/js/multiparser-comments/__snapshots__/format.test.js.snap b/tests/format/js/multiparser-comments/__snapshots__/format.test.js.snap
index c0e53df9b..6b92a12fc 100644
--- a/tests/format/js/multiparser-comments/__snapshots__/format.test.js.snap
+++ b/tests/format/js/multiparser-comments/__snapshots__/format.test.js.snap
@@ -85,9 +85,9 @@ html\`\${
}\`;
html\`
\${
- foo
- /* comment */
- }
+ foo
+ /* comment */
+}
\`;
graphql\`
@@ -98,9 +98,9 @@ graphql\`
\`;
graphql\`
\${
- foo
- /* comment */
- }
+ foo
+ /* comment */
+}
\`;
css\`
@@ -111,9 +111,9 @@ css\`
\`;
css\`
\${
- foo
- /* comment */
- }
+ foo
+ /* comment */
+}
\`;
markdown\`\${
diff --git a/tests/format/js/multiparser-css/__snapshots__/format.test.js.snap b/tests/format/js/multiparser-css/__snapshots__/format.test.js.snap
index 07f206319..4aa5201ed 100644
--- a/tests/format/js/multiparser-css/__snapshots__/format.test.js.snap
+++ b/tests/format/js/multiparser-css/__snapshots__/format.test.js.snap
@@ -229,8 +229,7 @@ const StyledH1 = styled.div\`
justify-content: center;
text-align: center;\`
: ""}
- @media (max-width: \${(props) =>
- props.noBreakPoint ? "0" : constants.layout.breakpoint.break1}px) {
+ @media (max-width: \${(props) => (props.noBreakPoint ? "0" : constants.layout.breakpoint.break1)}px) {
font-size: 2em;
}
\`;
diff --git a/tests/format/js/strings/__snapshots__/format.test.js.snap b/tests/format/js/strings/__snapshots__/format.test.js.snap
index 06b91c938..569342074 100644
--- a/tests/format/js/strings/__snapshots__/format.test.js.snap
+++ b/tests/format/js/strings/__snapshots__/format.test.js.snap
@@ -439,9 +439,13 @@ const makeBody = (store, assets, html) =>
}\`
// https://github.com/prettier/prettier/issues/1626#issue-229655106
-const Bar = styled.div\`
+_ = styled.div\`
color: \${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important;
\`
+_ = 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\`;
@@ -564,7 +568,10 @@ const makeBody = (store, assets, html) =>
)}\`;
// https://github.com/prettier/prettier/issues/1626#issue-229655106
-const Bar = styled.div\`
+_ = styled.div\`
+ color: \${(props) => (props.highlight.length > 0 ? palette(["text", "dark", "tertiary"])(props) : palette(["text", "dark", "primary"])(props))} !important;
+\`;
+_ = styled.div\`
color: \${(props) =>
props.highlight.length > 0
? palette(["text", "dark", "tertiary"])(props)
@@ -652,9 +659,13 @@ const makeBody = (store, assets, html) =>
}\`
// https://github.com/prettier/prettier/issues/1626#issue-229655106
-const Bar = styled.div\`
+_ = styled.div\`
color: \${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important;
\`
+_ = 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\`;
@@ -777,7 +788,10 @@ const makeBody = (store, assets, html) =>
)}\`;
// https://github.com/prettier/prettier/issues/1626#issue-229655106
-const Bar = styled.div\`
+_ = styled.div\`
+ color: \${(props) => (props.highlight.length > 0 ? palette(["text", "dark", "tertiary"])(props) : palette(["text", "dark", "primary"])(props))} !important;
+\`;
+_ = styled.div\`
color: \${(props) =>
props.highlight.length > 0
? palette(["text", "dark", "tertiary"])(props)
diff --git a/tests/format/js/strings/template-literals.js b/tests/format/js/strings/template-literals.js
index d7c9e71eb..51d6d1680 100644
--- a/tests/format/js/strings/template-literals.js
+++ b/tests/format/js/strings/template-literals.js
@@ -52,9 +52,13 @@ const makeBody = (store, assets, html) =>
}`
// https://github.com/prettier/prettier/issues/1626#issue-229655106
-const Bar = styled.div`
+_ = styled.div`
color: ${props => (props.highlight.length > 0 ? palette(['text', 'dark', 'tertiary'])(props) : palette(['text', 'dark', 'primary'])(props))} !important;
`
+_ = 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`;
diff --git a/tests/format/js/template-literals/__snapshots__/format.test.js.snap b/tests/format/js/template-literals/__snapshots__/format.test.js.snap
index f6376f8c4..f4fa69117 100644
--- a/tests/format/js/template-literals/__snapshots__/format.test.js.snap
+++ b/tests/format/js/template-literals/__snapshots__/format.test.js.snap
@@ -111,6 +111,58 @@ const TestComponent = ({ children, ...props }) => (
================================================================================
`;
+exports[`expression-break.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+ | printWidth
+=====================================input======================================
+// https://github.com/prettier/prettier/issues/18369
+
+_ = \`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+_ = /* comment */ \`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+_ = /* HTML */ \`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+
+_ = unknown\`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+_ = html\`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+
+=====================================output=====================================
+// https://github.com/prettier/prettier/issues/18369
+
+_ = \`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+_ = /* comment */ \`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+_ = /* HTML */ \`
+
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+
+\`;
+
+_ = unknown\`
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+\`;
+_ = html\`
+
+ \${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+
+\`;
+
+================================================================================
+`;
+
exports[`expressions.js format 1`] = `
====================================options=====================================
parsers: ["babel", "flow", "typescript"]
diff --git a/tests/format/js/template-literals/expression-break.js b/tests/format/js/template-literals/expression-break.js
new file mode 100644
index 000000000..37140172a
--- /dev/null
+++ b/tests/format/js/template-literals/expression-break.js
@@ -0,0 +1,18 @@
+// https://github.com/prettier/prettier/issues/18369
+
+_ = `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+_ = /* comment */ `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+_ = /* HTML */ `
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+
+_ = unknown`
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
+_ = html`
+ ${long_cond && long_cond && long_cond && long_cond && long_cond ? "content" : ""}
+`;
diff --git a/tests/format/js/test-declarations/__snapshots__/format.test.js.snap b/tests/format/js/test-declarations/__snapshots__/format.test.js.snap
index fd2757072..a34a95fe3 100644
--- a/tests/format/js/test-declarations/__snapshots__/format.test.js.snap
+++ b/tests/format/js/test-declarations/__snapshots__/format.test.js.snap
@@ -657,9 +657,9 @@ describe.each\`
describe.each\`
a | b | expected
\${11111111111} | \${a()
- .b(x => x)
- .c()
- .d()} | \${2}
+ .b(x => x)
+ .c()
+ .d()} | \${2}
\${1} | \${2} | \${3}
\${2} | \${1} | \${3}
\`;
@@ -801,9 +801,9 @@ describe.each\`
describe.each\`
a | b | expected
\${11111111111} | \${a()
- .b((x) => x)
- .c()
- .d()} | \${2}
+ .b((x) => x)
+ .c()
+ .d()} | \${2}
\${1} | \${2} | \${3}
\${2} | \${1} | \${3}
\`;
diff --git a/tests/format/jsx/template/__snapshots__/format.test.js.snap b/tests/format/jsx/template/__snapshots__/format.test.js.snap
index f9a4fa7b1..1cdf8c237 100644
--- a/tests/format/jsx/template/__snapshots__/format.test.js.snap
+++ b/tests/format/jsx/template/__snapshots__/format.test.js.snap
@@ -2,7 +2,7 @@
exports[`styled-components.js format 1`] = `
====================================options=====================================
-parsers: ["flow"]
+parsers: ["babel", "typescript", "flow"]
printWidth: 80
| printWidth
=====================================input======================================
@@ -33,6 +33,11 @@ printWidth: 80
: ""};
}
\`};
+;
=====================================output=====================================
;
+;
diff --git a/tests/format/jsx/template/format.test.js b/tests/format/jsx/template/format.test.js
index 55c339883..8adc66f60 100644
--- a/tests/format/jsx/template/format.test.js
+++ b/tests/format/jsx/template/format.test.js
@@ -1 +1 @@
-runFormatTest(import.meta, ["flow"]);
+runFormatTest(import.meta, ["babel", "typescript", "flow"]);
diff --git a/tests/format/jsx/template/styled-components.js b/tests/format/jsx/template/styled-components.js
index 0c5e0cd56..d41578c11 100644
--- a/tests/format/jsx/template/styled-components.js
+++ b/tests/format/jsx/template/styled-components.js
@@ -25,3 +25,8 @@
: ""};
}
`};
+;