Fix comments after directive

changelog_unreleased/javascript/14081.md

@@ -0,0 +1,13 @@
+#### Fix comments after directive (#14081 by @fisker)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+"use strict" /* comment */;
+
+// Prettier stable (with other js parsers except `babel`)
+Error: Comment "comment" was not printed. Please report this error!
+
+// Prettier main
+<Same as input>
+```

src/language-js/print/literal.js

@@ -1,6 +1,7 @@
 "use strict";
 const { printString, printNumber } = require("../../common/util.js");
 const { replaceTextEndOfLine } = require("../../document/doc-utils.js");
+const { printDirective } = require("./misc.js");
 
 function printLiteral(path, options /*, print*/) {
   const node = path.getNode();
@@ -41,14 +42,25 @@ function printLiteral(path, options /*, print*/) {
       }
 
       if (typeof value === "string") {
-        return replaceTextEndOfLine(printString(node.raw, options));
+        return isDirective(path)
+          ? printDirective(node.raw, options)
+          : replaceTextEndOfLine(printString(node.raw, options));
       }
 
       return String(value);
     }
   }
 }
 
+function isDirective(path) {
+  if (path.getName() !== "expression") {
+    return;
+  }
+
+  const parent = path.getParentNode();
+  return parent.type === "ExpressionStatement" && parent.directive;
+}
+
 function printBigInt(raw) {
   return raw.toLowerCase();
 }

src/language-js/print/misc.js

@@ -93,6 +93,24 @@ function printRestSpread(path, options, print) {
   return ["...", print("argument"), printTypeAnnotation(path, options, print)];
 }
 
+function printDirective(rawText, options) {
+  const rawContent = rawText.slice(1, -1);
+
+  // Check for the alternate quote, to determine if we're allowed to swap
+  // the quotes on a DirectiveLiteral.
+  if (rawContent.includes('"') || rawContent.includes("'")) {
+    return rawText;
+  }
+
+  const enclosingQuote = options.singleQuote ? "'" : '"';
+
+  // Directives are exact code unit sequences, which means that you can't
+  // change the escape sequences they use.
+  // See https://github.com/prettier/prettier/issues/1555
+  // and https://tc39.github.io/ecma262/#directive-prologue
+  return enclosingQuote + rawContent + enclosingQuote;
+}
+
 module.exports = {
   printOptionalToken,
   printDefiniteToken,
@@ -102,4 +120,5 @@ module.exports = {
   printTypeAnnotation,
   printRestSpread,
   adjustClause,
+  printDirective,
 };

src/language-js/printer-estree.js

@@ -23,7 +23,6 @@ const {
   isLineComment,
   isNextLineEmpty,
   needsHardlineAfterDanglingComment,
-  rawText,
   hasIgnoreComment,
   isCallExpression,
   isMemberExpression,
@@ -47,6 +46,7 @@ const {
   adjustClause,
   printRestSpread,
   printDefiniteToken,
+  printDirective,
 } = require("./print/misc.js");
 const {
   printImportDeclaration,
@@ -215,11 +215,6 @@ function printPathNoParens(path, options, print, args) {
     case "EmptyStatement":
       return "";
     case "ExpressionStatement": {
-      // Detect Flow and TypeScript directives
-      if (node.directive) {
-        return [printDirective(node.expression, options), semi];
-      }
-
       if (
         options.parser === "__vue_event_binding" ||
         options.parser === "__vue_ts_event_binding"
@@ -429,7 +424,7 @@ function printPathNoParens(path, options, print, args) {
     case "Directive":
       return [print("value"), semi]; // Babel 6
     case "DirectiveLiteral":
-      return printDirective(node, options);
+      return printDirective(node.extra.raw, options);
     case "UnaryExpression":
       parts.push(node.operator);
 
@@ -813,25 +808,6 @@ function printPathNoParens(path, options, print, args) {
   }
 }
 
-function printDirective(node, options) {
-  const raw = rawText(node);
-  const rawContent = raw.slice(1, -1);
-
-  // Check for the alternate quote, to determine if we're allowed to swap
-  // the quotes on a DirectiveLiteral.
-  if (rawContent.includes('"') || rawContent.includes("'")) {
-    return raw;
-  }
-
-  const enclosingQuote = options.singleQuote ? "'" : '"';
-
-  // Directives are exact code unit sequences, which means that you can't
-  // change the escape sequences they use.
-  // See https://github.com/prettier/prettier/issues/1555
-  // and https://tc39.github.io/ecma262/#directive-prologue
-  return enclosingQuote + rawContent + enclosingQuote;
-}
-
 function canAttachComment(node) {
   return (
     node.type &&