Fix unstable comment print (#18395)

fisker · web-flow · commit ca02b3748987 · 2025-12-02T03:24:17.000+08:00
diff --git a/changelog_unreleased/typescript/18395.md b/changelog_unreleased/typescript/18395.md
@@ -0,0 +1,27 @@
+#### Fix unstable comment print in union type comments (#18395 by @fisker)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+type X = (A | B) & (
+  // comment
+  A | B
+);
+
+// Prettier stable (first format)
+type X = (A | B) &
+  (// comment
+  A | B);
+
+// Prettier stable (second format)
+type X = (
+  | A
+  | B // comment
+) &
+  (A | B);
+
+// Prettier main
+type X = (A | B) &
+  // comment
+  (A | B);
+```
diff --git a/src/language-js/comments/will-print-own-comments.js b/src/language-js/comments/will-print-own-comments.js
@@ -3,6 +3,7 @@ import {
   hasNodeIgnoreComment,
   isJsxElement,
   isUnionType,
+  shouldUnionTypePrintOwnComments,
 } from "../utilities/index.js";
 
 /**
@@ -47,7 +48,15 @@ function willPrintOwnComments(path) {
     return false;
   }
 
-  return isJsxElement(node) || isUnionType(node);
+  if (isUnionType(node)) {
+    return shouldUnionTypePrintOwnComments(path);
+  }
+
+  if (isJsxElement(node)) {
+    return true;
+  }
+
+  return false;
 }
 
 export default willPrintOwnComments;
diff --git a/src/language-js/print/union-type.js b/src/language-js/print/union-type.js
@@ -19,9 +19,13 @@ import {
   hasLeadingOwnLineComment,
   isConditionalType,
   isTypeAlias,
-  isUnionType,
+  shouldUnionTypePrintOwnComments,
 } from "../utilities/index.js";
 
+/**
+@import {Doc} from "../../document/index.js";
+*/
+
 // `TSUnionType` and `UnionTypeAnnotation`
 function printUnionType(path, options, print) {
   const { node } = path;
@@ -78,11 +82,13 @@ function printUnionType(path, options, print) {
     return printComments(path, printedType, options);
   }, "types");
 
-  const { leading, trailing } =
-    // If it's `types` of union type, parent will print comment for us
-    path.key === "types" && isUnionType(path.parent)
-      ? { leading: "", trailing: "" }
-      : printCommentsSeparately(path, options);
+  /** @type {Doc} */
+  let leading = "";
+  /** @type {Doc} */
+  let trailing = "";
+  if (shouldUnionTypePrintOwnComments(path)) {
+    ({ leading, trailing } = printCommentsSeparately(path, options));
+  }
 
   if (shouldHug) {
     return [leading, join(" | ", printed), trailing];
diff --git a/src/language-js/utilities/index.js b/src/language-js/utilities/index.js
@@ -1085,6 +1085,19 @@ const isTypeAlias = createTypeCheckFunction([
   "TypeAlias",
 ]);
 
+function shouldUnionTypePrintOwnComments({ key, parent }) {
+  if (
+    // If it's `types` of union type, parent will print comment for it
+    (key === "types" && isUnionType(parent)) ||
+    // Inside intersection type let the comment print outside of parentheses
+    (key === "types" && isIntersectionType(parent))
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
 export {
   CommentCheckFlags,
   createTypeCheckFunction,
@@ -1145,6 +1158,7 @@ export {
   needsHardlineAfterDanglingComment,
   shouldFlatten,
   shouldPrintComma,
+  shouldUnionTypePrintOwnComments,
   startsWithNoLookaheadToken,
 };
 export { default as isMeaningfulEmptyStatement } from "./is-meaningful-empty-statement.js";
diff --git a/src/main/comments/print.js b/src/main/comments/print.js
@@ -155,6 +155,9 @@ function printDanglingComments(
   return shouldIndent ? indent([hardline, doc]) : doc;
 }
 
+/**
+@returns {{leading?: Doc, trailing?: Doc}}
+*/
 function printCommentsSeparately(path, options) {
   const value = path.node;
   if (!value) {
diff --git a/tests/format/typescript/union/comments/18379.ts b/tests/format/typescript/union/comments/18379.ts
@@ -0,0 +1,31 @@
+type A1 =
+  (
+    A | B // comment 1
+  ) & (
+    // comment2
+    A | B
+  )
+
+type A2 =
+  (
+  	A | B // prettier-ignore
+  ) & (
+  	// prettier-ignore
+    A | B
+  )
+
+type A1 =
+  // comment 1
+  (A | B)
+  & (
+  	// comment2
+    A | B
+  )
+
+type A1 =
+  // prettier-ignore
+  (A | B)
+  & (
+  	// prettier-ignore
+    A | B
+  )
diff --git a/tests/format/typescript/union/comments/__snapshots__/format.test.js.snap b/tests/format/typescript/union/comments/__snapshots__/format.test.js.snap
@@ -96,6 +96,76 @@ type A3 =
 ================================================================================
 `;
 
+exports[`18379.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+type A1 =
+  (
+    A | B // comment 1
+  ) & (
+    // comment2
+    A | B
+  )
+
+type A2 =
+  (
+  	A | B // prettier-ignore
+  ) & (
+  	// prettier-ignore
+    A | B
+  )
+
+type A1 =
+  // comment 1
+  (A | B)
+  & (
+  	// comment2
+    A | B
+  )
+
+type A1 =
+  // prettier-ignore
+  (A | B)
+  & (
+  	// prettier-ignore
+    A | B
+  )
+
+=====================================output=====================================
+type A1 = (
+  | A
+  | B // comment 1
+) &
+  // comment2
+  (A | B);
+
+type A2 = (
+  | A
+  | B // prettier-ignore
+) &
+  // prettier-ignore
+  (A | B);
+
+type A1 =
+  // comment 1
+  (A | B) &
+    // comment2
+    (A | B);
+
+type A1 =
+  // prettier-ignore
+  (A | B)
+  & (
+  	// prettier-ignore
+    A | B
+  );
+
+================================================================================
+`;
+
 exports[`18389.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript", "flow"]

Original file line number	Diff line number	Diff line change
`@@ -155,6 +155,9 @@ function printDanglingComments(`
`155`	`155`	`return shouldIndent ? indent([hardline, doc]) : doc;`
`156`	`156`	`}`
`157`	`157`
	`158`	`+/**`
	`159`	`+@returns {{leading?: Doc, trailing?: Doc}}`
	`160`	`+*/`
`158`	`161`	`function printCommentsSeparately(path, options) {`
`159`	`162`	`const value = path.node;`
`160`	`163`	`if (!value) {`