diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 06d45266f..c2cebf0ac 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -5,6 +5,8 @@
 # See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
 
 # Prettier bump after release
+# 2.8.1
+b87de09bcf9a523fe3da31394ba0e6f5d107cf3e
 # 2.8.0
 4049e49fe2a939facd6f46be338a3be9c1c0489e
 # 2.7.1
diff --git a/.github/ISSUE_TEMPLATE/formatting.md b/.github/ISSUE_TEMPLATE/formatting.md
index d18cacd6a..4299ace0e 100644
--- a/.github/ISSUE_TEMPLATE/formatting.md
+++ b/.github/ISSUE_TEMPLATE/formatting.md
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
 
 -->
 
-**Prettier 2.8.0**
+**Prettier 2.8.1**
 [Playground link](https://prettier.io/playground/#.....)
 
 ```sh
diff --git a/.github/ISSUE_TEMPLATE/integration.md b/.github/ISSUE_TEMPLATE/integration.md
index d310b9699..a7477dbe9 100644
--- a/.github/ISSUE_TEMPLATE/integration.md
+++ b/.github/ISSUE_TEMPLATE/integration.md
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
 
 **Environments:**
 
-- Prettier Version: 2.8.0
+- Prettier Version: 2.8.1
 - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
 - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
 - Operating System: <!-- Windows, Linux, macOS, etc. -->
diff --git a/.node-version b/.node-version
new file mode 100644
index 000000000..b460d6f2d
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+18.12.1
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2b90c496..5b9bd9142 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,56 @@
+# 2.8.1
+
+[diff](https://github.com/prettier/prettier/compare/2.8.0...2.8.1)
+
+#### Fix SCSS map in arguments ([#9184](https://github.com/prettier/prettier/pull/9184) by [@agamkrbit](https://github.com/agamkrbit))
+
+<!-- prettier-ignore -->
+```scss
+// Input
+$display-breakpoints: map-deep-merge(
+  (
+    "print-only": "only print",
+    "screen-only": "only screen",
+    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
+  ),
+  $display-breakpoints
+);
+
+// Prettier 2.8.0
+$display-breakpoints: map-deep-merge(
+  (
+    "print-only": "only print",
+    "screen-only": "only screen",
+    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm
+      ")-1})",
+  ),
+  $display-breakpoints
+);
+
+// Prettier 2.8.1
+$display-breakpoints: map-deep-merge(
+  (
+    "print-only": "only print",
+    "screen-only": "only screen",
+    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
+  ),
+  $display-breakpoints
+);
+```
+
+#### Support auto accessors syntax ([#13919](https://github.com/prettier/prettier/pull/13919) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+Support for [Auto Accessors Syntax](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#auto-accessors-in-classes) landed in TypeScript 4.9.
+
+(Doesn't work well with `babel-ts` parser)
+
+<!-- prettier-ignore -->
+```tsx
+class Foo {
+  accessor foo: number = 3;
+}
+```
+
 # 2.8.0
 
 [diff](https://github.com/prettier/prettier/compare/2.7.1...2.8.0)
diff --git a/changelog_unreleased/scss/9184.md b/changelog_unreleased/scss/9184.md
deleted file mode 100644
index de3cace7d..000000000
--- a/changelog_unreleased/scss/9184.md
+++ /dev/null
@@ -1,35 +0,0 @@
-#### Fix SCSS map in arguments (#9184 by @agamkrbit)
-
-<!-- prettier-ignore -->
-```scss
-// Input
-$display-breakpoints: map-deep-merge(
-  (
-    "print-only": "only print",
-    "screen-only": "only screen",
-    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
-  ),
-  $display-breakpoints
-);
-
-// Prettier stable
-$display-breakpoints: map-deep-merge(
-  (
-    "print-only": "only print",
-    "screen-only": "only screen",
-    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm
-      ")-1})",
-  ),
-  $display-breakpoints
-);
-
-// Prettier main
-$display-breakpoints: map-deep-merge(
-  (
-    "print-only": "only print",
-    "screen-only": "only screen",
-    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
-  ),
-  $display-breakpoints
-);
-```
diff --git a/docs/browser.md b/docs/browser.md
index 38d7df95a..0c03e728e 100644
--- a/docs/browser.md
+++ b/docs/browser.md
@@ -29,8 +29,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.8.0/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.8.0/plugins/graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.8.1/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.8.1/plugins/graphql.js"></script>
 <script>
   (async () => {
     const formatted = await prettier.format("type Query { hello: String }", {
@@ -47,8 +47,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@2.8.0/standalone.mjs";
-  import pluginGraphql from "https://unpkg.com/prettier@2.8.0/plugins/graphql.mjs";
+  import * as prettier from "https://unpkg.com/prettier@2.8.1/standalone.mjs";
+  import pluginGraphql from "https://unpkg.com/prettier@2.8.1/plugins/graphql.mjs";
 
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.8.0/standalone.js",
-  "https://unpkg.com/prettier@2.8.0/plugins/graphql.js",
+  "https://unpkg.com/prettier@2.8.1/standalone.js",
+  "https://unpkg.com/prettier@2.8.1/plugins/graphql.js",
 ], async (prettier, ...plugins) => {
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.8.0/standalone.js");
-importScripts("https://unpkg.com/prettier@2.8.0/plugins/graphql.js");
+importScripts("https://unpkg.com/prettier@2.8.1/standalone.js");
+importScripts("https://unpkg.com/prettier@2.8.1/plugins/graphql.js");
 (async () => {
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -105,8 +105,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@2.8.0/standalone.mjs";
-  import pluginBabel from "https://unpkg.com/prettier@2.8.0/plugins/babel.mjs";
+  import * as prettier from "https://unpkg.com/prettier@2.8.1/standalone.mjs";
+  import pluginBabel from "https://unpkg.com/prettier@2.8.1/plugins/babel.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -122,9 +122,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@2.8.0/standalone.mjs";
-  import pluginBabel from "https://unpkg.com/prettier@2.8.0/plugins/babel.mjs";
-  import pluginHtml from "https://unpkg.com/prettier@2.8.0/plugins/html.mjs";
+  import * as prettier from "https://unpkg.com/prettier@2.8.1/standalone.mjs";
+  import pluginBabel from "https://unpkg.com/prettier@2.8.1/plugins/babel.mjs";
+  import pluginHtml from "https://unpkg.com/prettier@2.8.1/plugins/html.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/package.json b/package.json
index dd8a6947e..15e754473 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,8 @@
     "@iarna/toml": "2.2.5",
     "@prettier/is-es5-identifier-name": "0.1.0",
     "@prettier/parse-srcset": "2.0.2",
-    "@typescript-eslint/typescript-estree": "5.44.0",
-    "@typescript-eslint/visitor-keys": "5.44.0",
+    "@typescript-eslint/typescript-estree": "5.45.0",
+    "@typescript-eslint/visitor-keys": "5.45.0",
     "acorn": "8.8.1",
     "acorn-jsx": "5.3.2",
     "angular-estree-parser": "5.0.1",
@@ -141,7 +141,7 @@
     "magic-string": "0.27.0",
     "npm-run-all": "4.1.5",
     "path-browserify": "1.0.1",
-    "prettier": "2.8.0",
+    "prettier": "2.8.1",
     "pretty-bytes": "6.0.0",
     "rollup-plugin-license": "3.0.1",
     "semver": "7.3.8",
diff --git a/src/language-js/print/class.js b/src/language-js/print/class.js
index 5dd0bd0e8..2a45b017b 100644
--- a/src/language-js/print/class.js
+++ b/src/language-js/print/class.js
@@ -198,7 +198,11 @@ function printClassProperty(path, options, print) {
   if (node.static) {
     parts.push("static ");
   }
-  if (node.type === "TSAbstractPropertyDefinition" || node.abstract) {
+  if (
+    node.type === "TSAbstractPropertyDefinition" ||
+    node.type === "TSAbstractAccessorProperty" ||
+    node.abstract
+  ) {
     parts.push("abstract ");
   }
   if (node.override) {
@@ -210,7 +214,11 @@ function printClassProperty(path, options, print) {
   if (node.variance) {
     parts.push(print("variance"));
   }
-  if (node.type === "ClassAccessorProperty") {
+  if (
+    node.type === "ClassAccessorProperty" ||
+    node.type === "AccessorProperty" ||
+    node.type === "TSAbstractAccessorProperty"
+  ) {
     parts.push("accessor ");
   }
   parts.push(
@@ -220,6 +228,10 @@ function printClassProperty(path, options, print) {
     printTypeAnnotation(path, options, print)
   );
 
+  const isAbstractProperty =
+    node.type === "TSAbstractPropertyDefinition" ||
+    node.type === "TSAbstractAccessorProperty";
+
   return [
     printAssignment(
       path,
@@ -227,7 +239,7 @@ function printClassProperty(path, options, print) {
       print,
       parts,
       " =",
-      node.type === "TSAbstractPropertyDefinition" ? undefined : "value"
+      isAbstractProperty ? undefined : "value"
     ),
     semi,
   ];
diff --git a/src/language-js/print/statement.js b/src/language-js/print/statement.js
index 51b76cd64..ae552de5f 100644
--- a/src/language-js/print/statement.js
+++ b/src/language-js/print/statement.js
@@ -161,14 +161,21 @@ const isClassProperty = ({ type }) =>
   type === "ClassProperty" ||
   type === "PropertyDefinition" ||
   type === "ClassPrivateProperty" ||
-  type === "ClassAccessorProperty";
+  type === "ClassAccessorProperty" ||
+  type === "AccessorProperty" ||
+  type === "TSAbstractPropertyDefinition" ||
+  type === "TSAbstractAccessorProperty";
 /**
  * @returns {boolean}
  */
 function shouldPrintSemicolonAfterClassProperty(node, nextNode) {
-  const name = node.key?.name;
+  const { name } = node.key;
   if (
-    (name === "static" || name === "get" || name === "set") &&
+    (name === "static" ||
+      name === "get" ||
+      name === "set" ||
+      // TODO: Remove this https://github.com/microsoft/TypeScript/issues/51707 is fixed
+      name === "accessor") &&
     !node.value &&
     !node.typeAnnotation
   ) {
diff --git a/src/language-js/print/typescript.js b/src/language-js/print/typescript.js
index 65813cb50..d64d0b371 100644
--- a/src/language-js/print/typescript.js
+++ b/src/language-js/print/typescript.js
@@ -108,6 +108,7 @@ function printTypescript(path, options, print) {
     case "TSAbstractMethodDefinition":
     case "TSDeclareMethod":
       return printClassMethod(path, options, print);
+    case "TSAbstractAccessorProperty":
     case "TSAbstractPropertyDefinition":
       return printClassProperty(path, options, print);
     case "TSInterfaceHeritage":
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 757ec1611..54667277f 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -103,6 +103,8 @@ function genericPrint(path, options, print, args) {
     type === "ClassPrivateMethod" ||
     type === "ClassProperty" ||
     type === "ClassAccessorProperty" ||
+    type === "AccessorProperty" ||
+    type === "TSAbstractAccessorProperty" ||
     type === "PropertyDefinition" ||
     type === "TSAbstractPropertyDefinition" ||
     type === "ClassPrivateProperty" ||
@@ -742,6 +744,7 @@ function printPathNoParens(path, options, print, args) {
     case "PropertyDefinition":
     case "ClassPrivateProperty":
     case "ClassAccessorProperty":
+    case "AccessorProperty":
       return printClassProperty(path, options, print);
     case "TemplateElement":
       return replaceEndOfLine(node.value.raw);
diff --git a/tests/format/js/conditional/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/conditional/__snapshots__/jsfmt.spec.js.snap
index db35ac17f..048bbc0cc 100644
--- a/tests/format/js/conditional/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/js/conditional/__snapshots__/jsfmt.spec.js.snap
@@ -94,6 +94,7 @@ test
          comment
      comment
            comment
+      A newline will be added after this comment, unfortunately – but it can be removed manually, see next statement.
     */
   test
   ? foo
@@ -103,6 +104,23 @@ test
    */
     bar;
 
+
+// It is at least possible to delete the extra newline that was
+// unfortunately added before the second condition above:
+test ?
+  foo :/* comment
+         comment
+     comment
+           comment
+    */
+test ?
+  foo :
+  /* comment
+  comment
+    comment
+   */
+  bar;
+
 test
   ? foo
   : /* comment */
@@ -200,6 +218,7 @@ test
          comment
      comment
            comment
+      A newline will be added after this comment, unfortunately – but it can be removed manually, see next statement.
     */
   test
   ? foo
@@ -209,6 +228,22 @@ test
    */
     bar;
 
+// It is at least possible to delete the extra newline that was
+// unfortunately added before the second condition above:
+test
+  ? foo /* comment
+         comment
+     comment
+           comment
+    */
+  : test
+  ? foo
+  : /* comment
+  comment
+    comment
+   */
+    bar;
+
 test ? foo : /* comment */ bar;
 
 test
@@ -239,6 +274,699 @@ const testConsole = new TestConsole(
 ================================================================================
 `;
 
+exports[`new-ternary-examples.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// from https://gist.github.com/rattrayalex/dacbf5838571a47f22d0ae1f8b960268
+// Input and output should match (for 2-space indent formatting).
+// TypeScript is here: prettier/tests/format/typescript/conditional-types/new-ternary-spec.ts
+// EXAMPLES
+//  mostly taken from https://github.com/prettier/prettier/issues/9561
+
+const message =
+  i % 3 === 0 && i % 5 === 0 ? "fizzbuzz"
+  : i % 3 === 0 ? "fizz"
+  : i % 5 === 0 ? "buzz"
+  : String(i);
+
+const paymentMessageShort =
+  state == "success" ? "Payment completed successfully"
+  : state == "processing" ? "Payment processing"
+  : state == "invalid_cvc" ? "There was an issue with your CVC number"
+  : state == "invalid_expiry" ? "Expiry must be sometime in the past."
+  : "There was an issue with the payment.  Please contact support.";
+
+const paymentMessageWithABreak =
+  state == "success" ? "Payment completed successfully"
+  : state == "processing" ? "Payment processing"
+  : state == "invalid_cvc" ?
+    "There was an issue with your CVC number, and you need to take a prompt action on it."
+  : state == "invalid_expiry" ? "Expiry must be sometime in the past."
+  : "There was an issue with the payment.  Please contact support.";
+
+const typeofExample =
+  definition.encode ?
+    definition.encode(
+      typeof row[field] !== "undefined" ? row[field]
+      : typeof definition.default !== "undefined" ? definition.default
+      : null
+    )
+  : typeof row[field] !== "undefined" ? row[field]
+  : typeof definition.default !== "undefined" ? definition.default
+  : null
+
+// (the following is semantically equivalent to the above, but written in a more-confusing style – it'd be hard to grok no matter the formatting)
+const typeofExampleFlipped =
+  definition.encode ?
+    definition.encode(
+      typeof row[field] === "undefined" ?
+        typeof definition.default === "undefined" ? null
+        : definition.default
+      : row[field]
+    )
+  : typeof row[field] === "undefined" ?
+    typeof definition.default === "undefined" ? null
+    : definition.default
+  : row[field];
+
+
+// JSX Examples:
+
+const typicalLongConsequentWithNullAlternate = (
+  <div>
+    {children && !isEmptyChildren(children) ?
+      <FooComponent
+        className="a bunch of css classes might go here, wow so many"
+        foo={foo}
+        bar={includeBar ? bar : null}
+      />
+    : null}
+  </div>
+);
+
+const reactRouterExampleJSX = (
+  <div>
+    {children && !isEmptyChildren(children) ?
+      children
+    : props.match ?
+      component ? React.createElement(component, props)
+      : render ? render(props)
+      : null
+    : null}
+  </div>
+);
+
+const reactRouterExampleNonJSX =
+  children && !isEmptyChildren(children) ? children
+  : props.match ?
+    component ? React.createElement(component, props)
+    : render ? render(props)
+    : null
+  : null;
+
+inJSXExpressionContainer.withLongConditionals.example = (
+  <div>
+    {(
+      isACat() &&
+      (someReallyLongCondition ||
+        moreInThisLongCondition)
+    ) ?
+      someReallyLargeExpression
+        .toMakeMeowNoise()
+        .willCauseParens()
+    : (
+      someReallyLongCondition ||
+        moreInThisLongCondition
+    ) ?
+      bark()
+    : someReallyLargeExpression
+        .toMakeMeowNoise()
+        .willCauseParens()
+    }
+  </div>
+);
+
+inJSXExpressionContainer.withLoops.orBooleans.example = (
+  <div>
+    {items ?
+      items.map((item) => (
+        item.display ?
+          <Item item={item} attr="breaks ternary but not consequent" />
+        : <Blank />
+      ))
+    : null}
+
+    {showTheStuff && (
+      foo ?
+        <Thing thing={foooooooooooooooooooooooooo} bar="bazzzzzz" />
+      : <OtherThing />
+    )}
+  </div>
+);
+
+inJSXExpressionContainer.withNullConditional = (
+  <div>
+    {isACat() ? null : <Foo />}
+    {isACat() && (someReallyLongCondition || moreInThisLongCondition) ? null : (
+      <Foo />
+    )}
+    {isACat() && (someReallyLongCondition || moreInThisLongCondition || evenMoreInThisExtraLongConditional) ? null : (
+      <Foo />
+    )}
+  </div>
+);
+
+=====================================output=====================================
+// from https://gist.github.com/rattrayalex/dacbf5838571a47f22d0ae1f8b960268
+// Input and output should match (for 2-space indent formatting).
+// TypeScript is here: prettier/tests/format/typescript/conditional-types/new-ternary-spec.ts
+// EXAMPLES
+//  mostly taken from https://github.com/prettier/prettier/issues/9561
+
+const message =
+  i % 3 === 0 && i % 5 === 0
+    ? "fizzbuzz"
+    : i % 3 === 0
+    ? "fizz"
+    : i % 5 === 0
+    ? "buzz"
+    : String(i);
+
+const paymentMessageShort =
+  state == "success"
+    ? "Payment completed successfully"
+    : state == "processing"
+    ? "Payment processing"
+    : state == "invalid_cvc"
+    ? "There was an issue with your CVC number"
+    : state == "invalid_expiry"
+    ? "Expiry must be sometime in the past."
+    : "There was an issue with the payment.  Please contact support.";
+
+const paymentMessageWithABreak =
+  state == "success"
+    ? "Payment completed successfully"
+    : state == "processing"
+    ? "Payment processing"
+    : state == "invalid_cvc"
+    ? "There was an issue with your CVC number, and you need to take a prompt action on it."
+    : state == "invalid_expiry"
+    ? "Expiry must be sometime in the past."
+    : "There was an issue with the payment.  Please contact support.";
+
+const typeofExample = definition.encode
+  ? definition.encode(
+      typeof row[field] !== "undefined"
+        ? row[field]
+        : typeof definition.default !== "undefined"
+        ? definition.default
+        : null,
+    )
+  : typeof row[field] !== "undefined"
+  ? row[field]
+  : typeof definition.default !== "undefined"
+  ? definition.default
+  : null;
+
+// (the following is semantically equivalent to the above, but written in a more-confusing style – it'd be hard to grok no matter the formatting)
+const typeofExampleFlipped = definition.encode
+  ? definition.encode(
+      typeof row[field] === "undefined"
+        ? typeof definition.default === "undefined"
+          ? null
+          : definition.default
+        : row[field],
+    )
+  : typeof row[field] === "undefined"
+  ? typeof definition.default === "undefined"
+    ? null
+    : definition.default
+  : row[field];
+
+// JSX Examples:
+
+const typicalLongConsequentWithNullAlternate = (
+  <div>
+    {children && !isEmptyChildren(children) ? (
+      <FooComponent
+        className="a bunch of css classes might go here, wow so many"
+        foo={foo}
+        bar={includeBar ? bar : null}
+      />
+    ) : null}
+  </div>
+);
+
+const reactRouterExampleJSX = (
+  <div>
+    {children && !isEmptyChildren(children)
+      ? children
+      : props.match
+      ? component
+        ? React.createElement(component, props)
+        : render
+        ? render(props)
+        : null
+      : null}
+  </div>
+);
+
+const reactRouterExampleNonJSX =
+  children && !isEmptyChildren(children)
+    ? children
+    : props.match
+    ? component
+      ? React.createElement(component, props)
+      : render
+      ? render(props)
+      : null
+    : null;
+
+inJSXExpressionContainer.withLongConditionals.example = (
+  <div>
+    {isACat() && (someReallyLongCondition || moreInThisLongCondition)
+      ? someReallyLargeExpression.toMakeMeowNoise().willCauseParens()
+      : someReallyLongCondition || moreInThisLongCondition
+      ? bark()
+      : someReallyLargeExpression.toMakeMeowNoise().willCauseParens()}
+  </div>
+);
+
+inJSXExpressionContainer.withLoops.orBooleans.example = (
+  <div>
+    {items
+      ? items.map((item) =>
+          item.display ? (
+            <Item item={item} attr="breaks ternary but not consequent" />
+          ) : (
+            <Blank />
+          ),
+        )
+      : null}
+
+    {showTheStuff &&
+      (foo ? (
+        <Thing thing={foooooooooooooooooooooooooo} bar="bazzzzzz" />
+      ) : (
+        <OtherThing />
+      ))}
+  </div>
+);
+
+inJSXExpressionContainer.withNullConditional = (
+  <div>
+    {isACat() ? null : <Foo />}
+    {isACat() && (someReallyLongCondition || moreInThisLongCondition) ? null : (
+      <Foo />
+    )}
+    {isACat() &&
+    (someReallyLongCondition ||
+      moreInThisLongCondition ||
+      evenMoreInThisExtraLongConditional) ? null : (
+      <Foo />
+    )}
+  </div>
+);
+
+================================================================================
+`;
+
+exports[`new-ternary-spec.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// from https://gist.github.com/rattrayalex/dacbf5838571a47f22d0ae1f8b960268
+// Input and output should match (for 2-space indent formatting).
+// TypeScript is here: prettier/tests/format/typescript/conditional-types/new-ternary-spec.ts
+
+// remain on one line if possible:
+const short = isLoud() ? makeNoise() : silent();
+
+// next, put everything after the =
+const lessShort =
+  isLoudReallyLoud() ? makeNoiseReallyLoudly.omgSoLoud() : silent();
+
+// next, indent the consequent:
+const andIndented = isLoudReallyReallyReallyReallyLoud() ?
+    makeNoiseReallyReallyReallyReallyReallyLoudly.omgSoLoud()
+  : silent();
+
+// unless the consequent is short (less than ten characters long):
+const shortSoCase = isLoudReallyReallyReallyReallyLoud() ? silent()
+  : makeNoiseReallyReallyReallyReallyReallyLoudly.omgSoLoud();
+
+// if chained, always break and put after the =
+const chainedShort =
+  isCat() ? meow()
+  : isDog() ? bark()
+  : silent();
+
+// when a consequent breaks in a chain:
+const chainedWithLongConsequent =
+  isCat() ?
+    someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : isDog() ? bark()
+  : silent();
+
+// nested ternary in consequent always breaks:
+const chainedWithTernaryConsequent =
+  isCat() ?
+    aNestedCondition ? theResult()
+    : theAlternate()
+  : isDog() ? bark()
+  : silent();
+
+// consequent and terminal alternate break:
+const consequentAndTerminalAlternateBreak =
+  isCat() ?
+    someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : isDog() ? bark()
+  : someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens();
+
+// multiline conditions and consequents/alternates:
+const multilineConditionsConsequentsAndAlternates =
+  (
+    isAnAdorableKittyCat() &&
+    (someReallyLongCondition || moreInThisLongCondition)
+  ) ?
+    someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : (
+    isNotAnAdorableKittyCat() &&
+    (someReallyLongCondition || moreInThisLongCondition)
+  ) ?
+    bark()
+  : shortCondition() ? shortConsequent()
+  : someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens();
+
+// illustrating case of mostly short conditionals
+const mostlyShort =
+  x === 1 ? "one"
+  : x === 2 ? "two"
+  : x === 3 ? "three"
+  : (
+    x === 5 &&
+    y === 7 &&
+    someOtherThing.thatIsSoLong.thatItBreaksTheTestCondition()
+  ) ?
+    "four"
+  : x === 6 ? "six"
+  : "idk";
+
+// long conditional, short consequent/alternate, not chained - do indent after ?
+const longConditional = (
+    bifornCringerMoshedPerplexSawder === 2 / askTrovenaBeenaDependsRowans &&
+    glimseGlyphsHazardNoopsTieTie >=
+      averredBathersBoxroomBuggyNurl().anodyneCondosMalateOverateRetinol()
+  ) ?
+    "foo"
+  : "bar";
+
+// long conditional, short consequent/alternate, chained
+// (break on short consequents iff in chained ternary and its conditional broke)
+const longConditionalChained =
+  (
+    bifornCringerMoshedPerplexSawder === 2 / askTrovenaBeenaDependsRowans &&
+    glimseGlyphsHazardNoopsTieTie >=
+      averredBathersBoxroomBuggyNurl().anodyneCondosMalateOverateRetinol()
+  ) ?
+    "foo"
+  : anotherCondition ? "bar"
+  : "baz";
+
+// As a function parameter, don't add an extra indent:
+definition.encode(
+  typeof row[field] !== "undefined" ? row[field]
+  : typeof definition.default !== "undefined" ? definition.default
+  : null,
+  typeof row[field] === "undefined" ?
+    typeof definition.default === "undefined" ? null
+    : definition.default
+  : row[field]
+);
+
+// In a return, break and over-indent:
+const inReturn = () => {
+  if (short) {
+    return foo ? 1 : 2;
+  }
+  return typeof row[aVeryLongFieldName] !== "undefined" ?
+      row[aVeryLongFieldName]
+    : null;
+};
+
+// Remove current JSX Mode, and replace it with this algorithm:
+// When a ternary's parent is a JSXExpressionContainer which is not in a JSXAttribute,
+// force the consequent to break,
+// and if the alternate breaks,
+// add a newline before the closing curly brace.
+// Special case when the consequent is \`null\`:
+// do not add a line before or after it,
+// and wrap the alternate in parens.
+
+const someJSX = (
+  <div>
+    Typical jsx case:
+    {showFoo ?
+      <Foo attribute="such and such stuff here" />
+    : <Bar short />}
+    Nested, and with a non-jsx consequent is the same:
+    {component ?
+      React.createElement(component, props)
+    : render ?
+      <div>{render(props)}</div>
+    : <div>Nothing is here</div>}
+    As is a non-jsx consequent:
+    {showTheJSXElement ?
+      <div>the stuff</div>
+    : renderOtherStuff()}
+    But if the alternate breaks, add a newline before the closing curly brace:
+    {showTheThing || pleaseShowTheThing ?
+      <Foo attribute="such and such stuff here" />
+    : <Bar
+        attribute="such and such stuff here"
+        another="more stuff here"
+        third="and even more, hooray!"
+      />
+    }
+    When the consequent is \`null\` and the alternate breaks,
+    hug it with parens to match boolean behavior:
+    {!thing ? null : (
+      <TheThing
+        thing={thing}
+        someVeryLongPropertyThatBreaksTheAlternate="hello"
+      />
+    )}
+  </div>
+);
+
+ternaryWithJSXElements.hasNoSpecialCasing =
+  component ? <div>{React.createElement(component, props)}</div>
+  : render ? <div>{render(props)}</div>
+  : <div>Nothing is here</div>;
+
+jsxExpressionContainer.inJSXAttribute.hasNoSpecialCasing = (
+  <Foo
+    withJSX={isRed ? <RedColorThing /> : <GreenColorThing />}
+    withJSXBroken={
+      isRed || isSomeOtherLongCondition.thatBreaksTheLine() ?
+        <RedColorThing />
+      : <GreenColorThing />
+    }
+  />
+);
+
+=====================================output=====================================
+// from https://gist.github.com/rattrayalex/dacbf5838571a47f22d0ae1f8b960268
+// Input and output should match (for 2-space indent formatting).
+// TypeScript is here: prettier/tests/format/typescript/conditional-types/new-ternary-spec.ts
+
+// remain on one line if possible:
+const short = isLoud() ? makeNoise() : silent();
+
+// next, put everything after the =
+const lessShort = isLoudReallyLoud()
+  ? makeNoiseReallyLoudly.omgSoLoud()
+  : silent();
+
+// next, indent the consequent:
+const andIndented = isLoudReallyReallyReallyReallyLoud()
+  ? makeNoiseReallyReallyReallyReallyReallyLoudly.omgSoLoud()
+  : silent();
+
+// unless the consequent is short (less than ten characters long):
+const shortSoCase = isLoudReallyReallyReallyReallyLoud()
+  ? silent()
+  : makeNoiseReallyReallyReallyReallyReallyLoudly.omgSoLoud();
+
+// if chained, always break and put after the =
+const chainedShort = isCat() ? meow() : isDog() ? bark() : silent();
+
+// when a consequent breaks in a chain:
+const chainedWithLongConsequent = isCat()
+  ? someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : isDog()
+  ? bark()
+  : silent();
+
+// nested ternary in consequent always breaks:
+const chainedWithTernaryConsequent = isCat()
+  ? aNestedCondition
+    ? theResult()
+    : theAlternate()
+  : isDog()
+  ? bark()
+  : silent();
+
+// consequent and terminal alternate break:
+const consequentAndTerminalAlternateBreak = isCat()
+  ? someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : isDog()
+  ? bark()
+  : someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens();
+
+// multiline conditions and consequents/alternates:
+const multilineConditionsConsequentsAndAlternates =
+  isAnAdorableKittyCat() && (someReallyLongCondition || moreInThisLongCondition)
+    ? someReallyLargeExpression
+        .thatWouldCauseALineBreak()
+        .willCauseAnIndentButNotParens()
+    : isNotAnAdorableKittyCat() &&
+      (someReallyLongCondition || moreInThisLongCondition)
+    ? bark()
+    : shortCondition()
+    ? shortConsequent()
+    : someReallyLargeExpression
+        .thatWouldCauseALineBreak()
+        .willCauseAnIndentButNotParens();
+
+// illustrating case of mostly short conditionals
+const mostlyShort =
+  x === 1
+    ? "one"
+    : x === 2
+    ? "two"
+    : x === 3
+    ? "three"
+    : x === 5 &&
+      y === 7 &&
+      someOtherThing.thatIsSoLong.thatItBreaksTheTestCondition()
+    ? "four"
+    : x === 6
+    ? "six"
+    : "idk";
+
+// long conditional, short consequent/alternate, not chained - do indent after ?
+const longConditional =
+  bifornCringerMoshedPerplexSawder === 2 / askTrovenaBeenaDependsRowans &&
+  glimseGlyphsHazardNoopsTieTie >=
+    averredBathersBoxroomBuggyNurl().anodyneCondosMalateOverateRetinol()
+    ? "foo"
+    : "bar";
+
+// long conditional, short consequent/alternate, chained
+// (break on short consequents iff in chained ternary and its conditional broke)
+const longConditionalChained =
+  bifornCringerMoshedPerplexSawder === 2 / askTrovenaBeenaDependsRowans &&
+  glimseGlyphsHazardNoopsTieTie >=
+    averredBathersBoxroomBuggyNurl().anodyneCondosMalateOverateRetinol()
+    ? "foo"
+    : anotherCondition
+    ? "bar"
+    : "baz";
+
+// As a function parameter, don't add an extra indent:
+definition.encode(
+  typeof row[field] !== "undefined"
+    ? row[field]
+    : typeof definition.default !== "undefined"
+    ? definition.default
+    : null,
+  typeof row[field] === "undefined"
+    ? typeof definition.default === "undefined"
+      ? null
+      : definition.default
+    : row[field],
+);
+
+// In a return, break and over-indent:
+const inReturn = () => {
+  if (short) {
+    return foo ? 1 : 2;
+  }
+  return typeof row[aVeryLongFieldName] !== "undefined"
+    ? row[aVeryLongFieldName]
+    : null;
+};
+
+// Remove current JSX Mode, and replace it with this algorithm:
+// When a ternary's parent is a JSXExpressionContainer which is not in a JSXAttribute,
+// force the consequent to break,
+// and if the alternate breaks,
+// add a newline before the closing curly brace.
+// Special case when the consequent is \`null\`:
+// do not add a line before or after it,
+// and wrap the alternate in parens.
+
+const someJSX = (
+  <div>
+    Typical jsx case:
+    {showFoo ? <Foo attribute="such and such stuff here" /> : <Bar short />}
+    Nested, and with a non-jsx consequent is the same:
+    {component ? (
+      React.createElement(component, props)
+    ) : render ? (
+      <div>{render(props)}</div>
+    ) : (
+      <div>Nothing is here</div>
+    )}
+    As is a non-jsx consequent:
+    {showTheJSXElement ? <div>the stuff</div> : renderOtherStuff()}
+    But if the alternate breaks, add a newline before the closing curly brace:
+    {showTheThing || pleaseShowTheThing ? (
+      <Foo attribute="such and such stuff here" />
+    ) : (
+      <Bar
+        attribute="such and such stuff here"
+        another="more stuff here"
+        third="and even more, hooray!"
+      />
+    )}
+    When the consequent is \`null\` and the alternate breaks, hug it with parens
+    to match boolean behavior:
+    {!thing ? null : (
+      <TheThing
+        thing={thing}
+        someVeryLongPropertyThatBreaksTheAlternate="hello"
+      />
+    )}
+  </div>
+);
+
+ternaryWithJSXElements.hasNoSpecialCasing = component ? (
+  <div>{React.createElement(component, props)}</div>
+) : render ? (
+  <div>{render(props)}</div>
+) : (
+  <div>Nothing is here</div>
+);
+
+jsxExpressionContainer.inJSXAttribute.hasNoSpecialCasing = (
+  <Foo
+    withJSX={isRed ? <RedColorThing /> : <GreenColorThing />}
+    withJSXBroken={
+      isRed || isSomeOtherLongCondition.thatBreaksTheLine() ? (
+        <RedColorThing />
+      ) : (
+        <GreenColorThing />
+      )
+    }
+  />
+);
+
+================================================================================
+`;
+
 exports[`no-confusing-arrow.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "flow", "typescript"]
@@ -256,3 +984,304 @@ var x = a <= 1 ? 2 : 3;
 
 ================================================================================
 `;
+
+exports[`postfix-ternary-regressions.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+
+// concatened string in consequent should be visually distinguishable from alternate
+// … or maybe this is okay, because the colon is enough?
+const avatar = has_ordered ?
+    'https://marmelab.com/posters/avatar/longer-word-that-breaks-consequent-' +
+    numberOfCustomers +
+    '.jpeg'
+  : undefined;
+
+// Similarly, in the alternate:
+const redirectUrl = pathName ?
+    pathName
+  : nextPathName + nextSearch ||
+    defaultAuthParams.afterLoginUrl.makeThisLongerSoItBreaks;
+
+// And another, more pathological case of the above:
+const isEmpty = obj =>
+  obj instanceof Date ?
+    false
+  : obj === '' ||
+    obj === null ||
+    obj === undefined ||
+    obj === somethingThatIsLonger ||
+    shallowEqual(obj, {});
+
+
+// Again, this case is a bit hard to distinguish the alternate.
+const eventsFromOrders =
+  orderIds && orders ?
+    orderIds.map(id => ({
+        type: 'order',
+        date: orders[id].date,
+        data: orders[id],
+    }))
+  : [];
+
+// Kinda weird to have dedents to the level of "return" in a function.
+function foo() {
+  return !linkTo ?
+      false
+    : typeof linkTo === 'function'
+      ? linkTo(record, reference)
+      : linkToRecord(rootPath, sourceId, linkTo_as_string);
+}
+function foo2() {
+  return React.isValidElement(emptyText)
+    ? React.cloneElement(emptyText)
+    : emptyText === ''
+      ? ' ' // em space, forces the display of an empty line of normal height
+      : translate(emptyText, { _: emptyText });
+}
+
+// Function call ideally wouldnt break break
+const matchingReferencesError = isMatchingReferencesError(
+  matchingReferences
+)
+  ? translate(matchingReferences.error, {
+      _: matchingReferences.error,
+    })
+  : null;
+
+// This one is kinda confusing any way you slice it…
+const obj = {
+  error:
+    matchingReferencesError &&
+    (!input.value ||
+      (input.value &&
+        selectedReferencesDataStatus === REFERENCES_STATUS_EMPTY))
+      ? translate('ra.input.references.all_missing', {
+          _: 'ra.input.references.all_missing',
+        })
+      : null,
+}
+
+// I think we should indent after the inner || on this, and do better wtih the parens around the &&
+const obj2 = {
+  warning:
+    matchingReferencesError ||
+    (input.value && selectedReferencesDataStatus !== REFERENCES_STATUS_READY)
+      ? matchingReferencesError ||
+          translate('ra.input.references.many_missing', {
+              _: 'ra.input.references.many_missing',
+          })
+      : null,
+}
+
+// The boolean conditions in the test should look cohesive.
+const selectedReferencesDataStatus =
+  !isEmpty(value) && typeof value === 'string' && !pattern.test(value)
+      ? getMessage(message, { pattern }, value, values)
+      : undefined
+
+
+// Would be nice if these two nested ternaries didn't look like a single one.
+resolveRedirectTo(
+  redirectTo,
+  basePath,
+  payload
+    ? payload.id || (payload.data ? payload.data.id : null)
+    : requestPayload
+      ? requestPayload.id
+      : null,
+  payload && payload.data
+    ? payload.data
+    : requestPayload && requestPayload.data
+      ? requestPayload.data
+      : null
+)
+
+const delayedDataProvider = new Proxy(restProvider, {
+  get: (target, name, self) =>
+      name === 'then' ? // as we await for the dataProvider, JS calls then on it. We must trap that call or else the dataProvider will be called with the then method
+           self
+          : (
+          (resource, params) =>
+              new Promise(resolve =>
+                  setTimeout(
+                      () =>
+                          resolve(
+                              restProvider[name](resource, params)
+                          ),
+                      500
+                  )
+              )
+      ),
+});
+
+function foo4() {
+  return !match || match.length < 5 ? line : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+function foo5() {
+  return !match || match.length < 5 ? foo(line) : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+function foo6() {
+  return !match || match.length < 5 ? linethatisverylongandbreaksthelinehooray : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+function foo7() {
+  return !match || match.length < 5 ? linethatisverylongandbreaksthelinehoorayjustabitlonger : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+=====================================output=====================================
+// concatened string in consequent should be visually distinguishable from alternate
+// … or maybe this is okay, because the colon is enough?
+const avatar = has_ordered
+  ? "https://marmelab.com/posters/avatar/longer-word-that-breaks-consequent-" +
+    numberOfCustomers +
+    ".jpeg"
+  : undefined;
+
+// Similarly, in the alternate:
+const redirectUrl = pathName
+  ? pathName
+  : nextPathName + nextSearch ||
+    defaultAuthParams.afterLoginUrl.makeThisLongerSoItBreaks;
+
+// And another, more pathological case of the above:
+const isEmpty = (obj) =>
+  obj instanceof Date
+    ? false
+    : obj === "" ||
+      obj === null ||
+      obj === undefined ||
+      obj === somethingThatIsLonger ||
+      shallowEqual(obj, {});
+
+// Again, this case is a bit hard to distinguish the alternate.
+const eventsFromOrders =
+  orderIds && orders
+    ? orderIds.map((id) => ({
+        type: "order",
+        date: orders[id].date,
+        data: orders[id],
+      }))
+    : [];
+
+// Kinda weird to have dedents to the level of "return" in a function.
+function foo() {
+  return !linkTo
+    ? false
+    : typeof linkTo === "function"
+    ? linkTo(record, reference)
+    : linkToRecord(rootPath, sourceId, linkTo_as_string);
+}
+function foo2() {
+  return React.isValidElement(emptyText)
+    ? React.cloneElement(emptyText)
+    : emptyText === ""
+    ? " " // em space, forces the display of an empty line of normal height
+    : translate(emptyText, { _: emptyText });
+}
+
+// Function call ideally wouldnt break break
+const matchingReferencesError = isMatchingReferencesError(matchingReferences)
+  ? translate(matchingReferences.error, {
+      _: matchingReferences.error,
+    })
+  : null;
+
+// This one is kinda confusing any way you slice it…
+const obj = {
+  error:
+    matchingReferencesError &&
+    (!input.value ||
+      (input.value && selectedReferencesDataStatus === REFERENCES_STATUS_EMPTY))
+      ? translate("ra.input.references.all_missing", {
+          _: "ra.input.references.all_missing",
+        })
+      : null,
+};
+
+// I think we should indent after the inner || on this, and do better wtih the parens around the &&
+const obj2 = {
+  warning:
+    matchingReferencesError ||
+    (input.value && selectedReferencesDataStatus !== REFERENCES_STATUS_READY)
+      ? matchingReferencesError ||
+        translate("ra.input.references.many_missing", {
+          _: "ra.input.references.many_missing",
+        })
+      : null,
+};
+
+// The boolean conditions in the test should look cohesive.
+const selectedReferencesDataStatus =
+  !isEmpty(value) && typeof value === "string" && !pattern.test(value)
+    ? getMessage(message, { pattern }, value, values)
+    : undefined;
+
+// Would be nice if these two nested ternaries didn't look like a single one.
+resolveRedirectTo(
+  redirectTo,
+  basePath,
+  payload
+    ? payload.id || (payload.data ? payload.data.id : null)
+    : requestPayload
+    ? requestPayload.id
+    : null,
+  payload && payload.data
+    ? payload.data
+    : requestPayload && requestPayload.data
+    ? requestPayload.data
+    : null,
+);
+
+const delayedDataProvider = new Proxy(restProvider, {
+  get: (target, name, self) =>
+    name === "then" // as we await for the dataProvider, JS calls then on it. We must trap that call or else the dataProvider will be called with the then method
+      ? self
+      : (resource, params) =>
+          new Promise((resolve) =>
+            setTimeout(
+              () => resolve(restProvider[name](resource, params)),
+              500,
+            ),
+          ),
+});
+
+function foo4() {
+  return !match || match.length < 5
+    ? line
+    : match[1] + match[2] + match[3] + match[4];
+}
+
+function foo5() {
+  return !match || match.length < 5
+    ? foo(line)
+    : match[1] + match[2] + match[3] + match[4];
+}
+
+function foo6() {
+  return !match || match.length < 5
+    ? linethatisverylongandbreaksthelinehooray
+    : match[1] + match[2] + match[3] + match[4];
+}
+
+function foo7() {
+  return !match || match.length < 5
+    ? linethatisverylongandbreaksthelinehoorayjustabitlonger
+    : match[1] + match[2] + match[3] + match[4];
+}
+
+================================================================================
+`;
diff --git a/tests/format/js/conditional/comments.js b/tests/format/js/conditional/comments.js
index 84d735742..d6cdc984d 100644
--- a/tests/format/js/conditional/comments.js
+++ b/tests/format/js/conditional/comments.js
@@ -86,6 +86,7 @@ test
          comment
      comment
            comment
+      A newline will be added after this comment, unfortunately – but it can be removed manually, see next statement.
     */
   test
   ? foo
@@ -95,6 +96,23 @@ test
    */
     bar;
 
+
+// It is at least possible to delete the extra newline that was
+// unfortunately added before the second condition above:
+test ?
+  foo :/* comment
+         comment
+     comment
+           comment
+    */
+test ?
+  foo :
+  /* comment
+  comment
+    comment
+   */
+  bar;
+
 test
   ? foo
   : /* comment */
diff --git a/tests/format/js/conditional/new-ternary-examples.js b/tests/format/js/conditional/new-ternary-examples.js
new file mode 100644
index 000000000..8c319faf9
--- /dev/null
+++ b/tests/format/js/conditional/new-ternary-examples.js
@@ -0,0 +1,138 @@
+// from https://gist.github.com/rattrayalex/dacbf5838571a47f22d0ae1f8b960268
+// Input and output should match (for 2-space indent formatting).
+// TypeScript is here: prettier/tests/format/typescript/conditional-types/new-ternary-spec.ts
+// EXAMPLES
+//  mostly taken from https://github.com/prettier/prettier/issues/9561
+
+const message =
+  i % 3 === 0 && i % 5 === 0 ? "fizzbuzz"
+  : i % 3 === 0 ? "fizz"
+  : i % 5 === 0 ? "buzz"
+  : String(i);
+
+const paymentMessageShort =
+  state == "success" ? "Payment completed successfully"
+  : state == "processing" ? "Payment processing"
+  : state == "invalid_cvc" ? "There was an issue with your CVC number"
+  : state == "invalid_expiry" ? "Expiry must be sometime in the past."
+  : "There was an issue with the payment.  Please contact support.";
+
+const paymentMessageWithABreak =
+  state == "success" ? "Payment completed successfully"
+  : state == "processing" ? "Payment processing"
+  : state == "invalid_cvc" ?
+    "There was an issue with your CVC number, and you need to take a prompt action on it."
+  : state == "invalid_expiry" ? "Expiry must be sometime in the past."
+  : "There was an issue with the payment.  Please contact support.";
+
+const typeofExample =
+  definition.encode ?
+    definition.encode(
+      typeof row[field] !== "undefined" ? row[field]
+      : typeof definition.default !== "undefined" ? definition.default
+      : null
+    )
+  : typeof row[field] !== "undefined" ? row[field]
+  : typeof definition.default !== "undefined" ? definition.default
+  : null
+
+// (the following is semantically equivalent to the above, but written in a more-confusing style – it'd be hard to grok no matter the formatting)
+const typeofExampleFlipped =
+  definition.encode ?
+    definition.encode(
+      typeof row[field] === "undefined" ?
+        typeof definition.default === "undefined" ? null
+        : definition.default
+      : row[field]
+    )
+  : typeof row[field] === "undefined" ?
+    typeof definition.default === "undefined" ? null
+    : definition.default
+  : row[field];
+
+
+// JSX Examples:
+
+const typicalLongConsequentWithNullAlternate = (
+  <div>
+    {children && !isEmptyChildren(children) ?
+      <FooComponent
+        className="a bunch of css classes might go here, wow so many"
+        foo={foo}
+        bar={includeBar ? bar : null}
+      />
+    : null}
+  </div>
+);
+
+const reactRouterExampleJSX = (
+  <div>
+    {children && !isEmptyChildren(children) ?
+      children
+    : props.match ?
+      component ? React.createElement(component, props)
+      : render ? render(props)
+      : null
+    : null}
+  </div>
+);
+
+const reactRouterExampleNonJSX =
+  children && !isEmptyChildren(children) ? children
+  : props.match ?
+    component ? React.createElement(component, props)
+    : render ? render(props)
+    : null
+  : null;
+
+inJSXExpressionContainer.withLongConditionals.example = (
+  <div>
+    {(
+      isACat() &&
+      (someReallyLongCondition ||
+        moreInThisLongCondition)
+    ) ?
+      someReallyLargeExpression
+        .toMakeMeowNoise()
+        .willCauseParens()
+    : (
+      someReallyLongCondition ||
+        moreInThisLongCondition
+    ) ?
+      bark()
+    : someReallyLargeExpression
+        .toMakeMeowNoise()
+        .willCauseParens()
+    }
+  </div>
+);
+
+inJSXExpressionContainer.withLoops.orBooleans.example = (
+  <div>
+    {items ?
+      items.map((item) => (
+        item.display ?
+          <Item item={item} attr="breaks ternary but not consequent" />
+        : <Blank />
+      ))
+    : null}
+
+    {showTheStuff && (
+      foo ?
+        <Thing thing={foooooooooooooooooooooooooo} bar="bazzzzzz" />
+      : <OtherThing />
+    )}
+  </div>
+);
+
+inJSXExpressionContainer.withNullConditional = (
+  <div>
+    {isACat() ? null : <Foo />}
+    {isACat() && (someReallyLongCondition || moreInThisLongCondition) ? null : (
+      <Foo />
+    )}
+    {isACat() && (someReallyLongCondition || moreInThisLongCondition || evenMoreInThisExtraLongConditional) ? null : (
+      <Foo />
+    )}
+  </div>
+);
diff --git a/tests/format/js/conditional/new-ternary-spec.js b/tests/format/js/conditional/new-ternary-spec.js
new file mode 100644
index 000000000..74e7a362a
--- /dev/null
+++ b/tests/format/js/conditional/new-ternary-spec.js
@@ -0,0 +1,189 @@
+// from https://gist.github.com/rattrayalex/dacbf5838571a47f22d0ae1f8b960268
+// Input and output should match (for 2-space indent formatting).
+// TypeScript is here: prettier/tests/format/typescript/conditional-types/new-ternary-spec.ts
+
+// remain on one line if possible:
+const short = isLoud() ? makeNoise() : silent();
+
+// next, put everything after the =
+const lessShort =
+  isLoudReallyLoud() ? makeNoiseReallyLoudly.omgSoLoud() : silent();
+
+// next, indent the consequent:
+const andIndented = isLoudReallyReallyReallyReallyLoud() ?
+    makeNoiseReallyReallyReallyReallyReallyLoudly.omgSoLoud()
+  : silent();
+
+// unless the consequent is short (less than ten characters long):
+const shortSoCase = isLoudReallyReallyReallyReallyLoud() ? silent()
+  : makeNoiseReallyReallyReallyReallyReallyLoudly.omgSoLoud();
+
+// if chained, always break and put after the =
+const chainedShort =
+  isCat() ? meow()
+  : isDog() ? bark()
+  : silent();
+
+// when a consequent breaks in a chain:
+const chainedWithLongConsequent =
+  isCat() ?
+    someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : isDog() ? bark()
+  : silent();
+
+// nested ternary in consequent always breaks:
+const chainedWithTernaryConsequent =
+  isCat() ?
+    aNestedCondition ? theResult()
+    : theAlternate()
+  : isDog() ? bark()
+  : silent();
+
+// consequent and terminal alternate break:
+const consequentAndTerminalAlternateBreak =
+  isCat() ?
+    someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : isDog() ? bark()
+  : someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens();
+
+// multiline conditions and consequents/alternates:
+const multilineConditionsConsequentsAndAlternates =
+  (
+    isAnAdorableKittyCat() &&
+    (someReallyLongCondition || moreInThisLongCondition)
+  ) ?
+    someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens()
+  : (
+    isNotAnAdorableKittyCat() &&
+    (someReallyLongCondition || moreInThisLongCondition)
+  ) ?
+    bark()
+  : shortCondition() ? shortConsequent()
+  : someReallyLargeExpression
+      .thatWouldCauseALineBreak()
+      .willCauseAnIndentButNotParens();
+
+// illustrating case of mostly short conditionals
+const mostlyShort =
+  x === 1 ? "one"
+  : x === 2 ? "two"
+  : x === 3 ? "three"
+  : (
+    x === 5 &&
+    y === 7 &&
+    someOtherThing.thatIsSoLong.thatItBreaksTheTestCondition()
+  ) ?
+    "four"
+  : x === 6 ? "six"
+  : "idk";
+
+// long conditional, short consequent/alternate, not chained - do indent after ?
+const longConditional = (
+    bifornCringerMoshedPerplexSawder === 2 / askTrovenaBeenaDependsRowans &&
+    glimseGlyphsHazardNoopsTieTie >=
+      averredBathersBoxroomBuggyNurl().anodyneCondosMalateOverateRetinol()
+  ) ?
+    "foo"
+  : "bar";
+
+// long conditional, short consequent/alternate, chained
+// (break on short consequents iff in chained ternary and its conditional broke)
+const longConditionalChained =
+  (
+    bifornCringerMoshedPerplexSawder === 2 / askTrovenaBeenaDependsRowans &&
+    glimseGlyphsHazardNoopsTieTie >=
+      averredBathersBoxroomBuggyNurl().anodyneCondosMalateOverateRetinol()
+  ) ?
+    "foo"
+  : anotherCondition ? "bar"
+  : "baz";
+
+// As a function parameter, don't add an extra indent:
+definition.encode(
+  typeof row[field] !== "undefined" ? row[field]
+  : typeof definition.default !== "undefined" ? definition.default
+  : null,
+  typeof row[field] === "undefined" ?
+    typeof definition.default === "undefined" ? null
+    : definition.default
+  : row[field]
+);
+
+// In a return, break and over-indent:
+const inReturn = () => {
+  if (short) {
+    return foo ? 1 : 2;
+  }
+  return typeof row[aVeryLongFieldName] !== "undefined" ?
+      row[aVeryLongFieldName]
+    : null;
+};
+
+// Remove current JSX Mode, and replace it with this algorithm:
+// When a ternary's parent is a JSXExpressionContainer which is not in a JSXAttribute,
+// force the consequent to break,
+// and if the alternate breaks,
+// add a newline before the closing curly brace.
+// Special case when the consequent is `null`:
+// do not add a line before or after it,
+// and wrap the alternate in parens.
+
+const someJSX = (
+  <div>
+    Typical jsx case:
+    {showFoo ?
+      <Foo attribute="such and such stuff here" />
+    : <Bar short />}
+    Nested, and with a non-jsx consequent is the same:
+    {component ?
+      React.createElement(component, props)
+    : render ?
+      <div>{render(props)}</div>
+    : <div>Nothing is here</div>}
+    As is a non-jsx consequent:
+    {showTheJSXElement ?
+      <div>the stuff</div>
+    : renderOtherStuff()}
+    But if the alternate breaks, add a newline before the closing curly brace:
+    {showTheThing || pleaseShowTheThing ?
+      <Foo attribute="such and such stuff here" />
+    : <Bar
+        attribute="such and such stuff here"
+        another="more stuff here"
+        third="and even more, hooray!"
+      />
+    }
+    When the consequent is `null` and the alternate breaks,
+    hug it with parens to match boolean behavior:
+    {!thing ? null : (
+      <TheThing
+        thing={thing}
+        someVeryLongPropertyThatBreaksTheAlternate="hello"
+      />
+    )}
+  </div>
+);
+
+ternaryWithJSXElements.hasNoSpecialCasing =
+  component ? <div>{React.createElement(component, props)}</div>
+  : render ? <div>{render(props)}</div>
+  : <div>Nothing is here</div>;
+
+jsxExpressionContainer.inJSXAttribute.hasNoSpecialCasing = (
+  <Foo
+    withJSX={isRed ? <RedColorThing /> : <GreenColorThing />}
+    withJSXBroken={
+      isRed || isSomeOtherLongCondition.thatBreaksTheLine() ?
+        <RedColorThing />
+      : <GreenColorThing />
+    }
+  />
+);
diff --git a/tests/format/js/conditional/postfix-ternary-regressions.js b/tests/format/js/conditional/postfix-ternary-regressions.js
new file mode 100644
index 000000000..3d1f9ce7e
--- /dev/null
+++ b/tests/format/js/conditional/postfix-ternary-regressions.js
@@ -0,0 +1,150 @@
+
+// concatened string in consequent should be visually distinguishable from alternate
+// … or maybe this is okay, because the colon is enough?
+const avatar = has_ordered ?
+    'https://marmelab.com/posters/avatar/longer-word-that-breaks-consequent-' +
+    numberOfCustomers +
+    '.jpeg'
+  : undefined;
+
+// Similarly, in the alternate:
+const redirectUrl = pathName ?
+    pathName
+  : nextPathName + nextSearch ||
+    defaultAuthParams.afterLoginUrl.makeThisLongerSoItBreaks;
+
+// And another, more pathological case of the above:
+const isEmpty = obj =>
+  obj instanceof Date ?
+    false
+  : obj === '' ||
+    obj === null ||
+    obj === undefined ||
+    obj === somethingThatIsLonger ||
+    shallowEqual(obj, {});
+
+
+// Again, this case is a bit hard to distinguish the alternate.
+const eventsFromOrders =
+  orderIds && orders ?
+    orderIds.map(id => ({
+        type: 'order',
+        date: orders[id].date,
+        data: orders[id],
+    }))
+  : [];
+
+// Kinda weird to have dedents to the level of "return" in a function.
+function foo() {
+  return !linkTo ?
+      false
+    : typeof linkTo === 'function'
+      ? linkTo(record, reference)
+      : linkToRecord(rootPath, sourceId, linkTo_as_string);
+}
+function foo2() {
+  return React.isValidElement(emptyText)
+    ? React.cloneElement(emptyText)
+    : emptyText === ''
+      ? ' ' // em space, forces the display of an empty line of normal height
+      : translate(emptyText, { _: emptyText });
+}
+
+// Function call ideally wouldnt break break
+const matchingReferencesError = isMatchingReferencesError(
+  matchingReferences
+)
+  ? translate(matchingReferences.error, {
+      _: matchingReferences.error,
+    })
+  : null;
+
+// This one is kinda confusing any way you slice it…
+const obj = {
+  error:
+    matchingReferencesError &&
+    (!input.value ||
+      (input.value &&
+        selectedReferencesDataStatus === REFERENCES_STATUS_EMPTY))
+      ? translate('ra.input.references.all_missing', {
+          _: 'ra.input.references.all_missing',
+        })
+      : null,
+}
+
+// I think we should indent after the inner || on this, and do better wtih the parens around the &&
+const obj2 = {
+  warning:
+    matchingReferencesError ||
+    (input.value && selectedReferencesDataStatus !== REFERENCES_STATUS_READY)
+      ? matchingReferencesError ||
+          translate('ra.input.references.many_missing', {
+              _: 'ra.input.references.many_missing',
+          })
+      : null,
+}
+
+// The boolean conditions in the test should look cohesive.
+const selectedReferencesDataStatus =
+  !isEmpty(value) && typeof value === 'string' && !pattern.test(value)
+      ? getMessage(message, { pattern }, value, values)
+      : undefined
+
+
+// Would be nice if these two nested ternaries didn't look like a single one.
+resolveRedirectTo(
+  redirectTo,
+  basePath,
+  payload
+    ? payload.id || (payload.data ? payload.data.id : null)
+    : requestPayload
+      ? requestPayload.id
+      : null,
+  payload && payload.data
+    ? payload.data
+    : requestPayload && requestPayload.data
+      ? requestPayload.data
+      : null
+)
+
+const delayedDataProvider = new Proxy(restProvider, {
+  get: (target, name, self) =>
+      name === 'then' ? // as we await for the dataProvider, JS calls then on it. We must trap that call or else the dataProvider will be called with the then method
+           self
+          : (
+          (resource, params) =>
+              new Promise(resolve =>
+                  setTimeout(
+                      () =>
+                          resolve(
+                              restProvider[name](resource, params)
+                          ),
+                      500
+                  )
+              )
+      ),
+});
+
+function foo4() {
+  return !match || match.length < 5 ? line : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+function foo5() {
+  return !match || match.length < 5 ? foo(line) : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+function foo6() {
+  return !match || match.length < 5 ? linethatisverylongandbreaksthelinehooray : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
+
+function foo7() {
+  return !match || match.length < 5 ? linethatisverylongandbreaksthelinehoorayjustabitlonger : (
+    match[1] + match[2] + match[3] + match[4]
+  )
+}
diff --git a/tests/format/js/decorator-auto-accessors/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/decorator-auto-accessors/__snapshots__/jsfmt.spec.js.snap
index c8cbc76bb..a6850f56f 100644
--- a/tests/format/js/decorator-auto-accessors/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/js/decorator-auto-accessors/__snapshots__/jsfmt.spec.js.snap
@@ -38,7 +38,7 @@ exports[`basic.js - {"semi":false} [espree] format 1`] = `
 
 exports[`basic.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -57,7 +57,7 @@ class Foo {
 
 exports[`basic.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -111,7 +111,7 @@ exports[`computed.js - {"semi":false} [espree] format 1`] = `
 
 exports[`computed.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -130,7 +130,7 @@ class Foo {
 
 exports[`computed.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -146,50 +146,9 @@ class Foo {
 ================================================================================
 `;
 
-exports[`computed-with-newline.js - {"semi":false} format 1`] = `
-====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
-printWidth: 80
-semi: false
-                                                                                | printWidth
-=====================================input======================================
-class Foo {
-  accessor
-  ["bar"];
-}
-
-=====================================output=====================================
-class Foo {
-  accessor;
-  ["bar"]
-}
-
-================================================================================
-`;
-
-exports[`computed-with-newline.js format 1`] = `
-====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-class Foo {
-  accessor
-  ["bar"];
-}
-
-=====================================output=====================================
-class Foo {
-  accessor;
-  ["bar"];
-}
-
-================================================================================
-`;
-
 exports[`not-accessor-method.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -208,7 +167,7 @@ class Foo {
 
 exports[`not-accessor-method.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -226,7 +185,7 @@ class Foo {
 
 exports[`not-accessor-property.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -245,7 +204,7 @@ class Foo {
 
 exports[`not-accessor-property.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -299,7 +258,7 @@ exports[`private.js - {"semi":false} [espree] format 1`] = `
 
 exports[`private.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -318,7 +277,7 @@ class Foo {
 
 exports[`private.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -372,7 +331,7 @@ exports[`static.js - {"semi":false} [espree] format 1`] = `
 
 exports[`static.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -391,7 +350,7 @@ class Foo {
 
 exports[`static.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -445,7 +404,7 @@ exports[`static-computed.js - {"semi":false} [espree] format 1`] = `
 
 exports[`static-computed.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -464,7 +423,7 @@ class Foo {
 
 exports[`static-computed.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -518,7 +477,7 @@ exports[`static-private.js - {"semi":false} [espree] format 1`] = `
 
 exports[`static-private.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -537,7 +496,7 @@ class Foo {
 
 exports[`static-private.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -553,88 +512,6 @@ class Foo {
 ================================================================================
 `;
 
-exports[`static-with-newline.js - {"semi":false} format 1`] = `
-====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
-printWidth: 80
-semi: false
-                                                                                | printWidth
-=====================================input======================================
-class Foo {
-  static accessor
-  bar;
-}
-
-=====================================output=====================================
-class Foo {
-  static accessor
-  bar
-}
-
-================================================================================
-`;
-
-exports[`static-with-newline.js format 1`] = `
-====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-class Foo {
-  static accessor
-  bar;
-}
-
-=====================================output=====================================
-class Foo {
-  static accessor;
-  bar;
-}
-
-================================================================================
-`;
-
-exports[`with-newline.js - {"semi":false} format 1`] = `
-====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
-printWidth: 80
-semi: false
-                                                                                | printWidth
-=====================================input======================================
-class Foo {
-  accessor
-  bar;
-}
-
-=====================================output=====================================
-class Foo {
-  accessor
-  bar
-}
-
-================================================================================
-`;
-
-exports[`with-newline.js format 1`] = `
-====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
-printWidth: 80
-                                                                                | printWidth
-=====================================input======================================
-class Foo {
-  accessor
-  bar;
-}
-
-=====================================output=====================================
-class Foo {
-  accessor;
-  bar;
-}
-
-================================================================================
-`;
-
 exports[`with-semicolon-1.js [acorn] format 1`] = `
 "Unexpected token (2:12)
   1 | class C {
@@ -677,7 +554,7 @@ exports[`with-semicolon-1.js - {"semi":false} [espree] format 1`] = `
 
 exports[`with-semicolon-1.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -698,7 +575,7 @@ class C {
 
 exports[`with-semicolon-1.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
@@ -758,7 +635,7 @@ exports[`with-semicolon-2.js - {"semi":false} [espree] format 1`] = `
 
 exports[`with-semicolon-2.js - {"semi":false} format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
 semi: false
                                                                                 | printWidth
@@ -779,7 +656,7 @@ class C {
 
 exports[`with-semicolon-2.js format 1`] = `
 ====================================options=====================================
-parsers: ["babel", "babel-ts", "babel-flow"]
+parsers: ["babel", "typescript", "babel-flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
diff --git a/tests/format/js/decorator-auto-accessors/computed-with-newline.js b/tests/format/js/decorator-auto-accessors/computed-with-newline.js
deleted file mode 100644
index a067c2ad5..000000000
--- a/tests/format/js/decorator-auto-accessors/computed-with-newline.js
+++ /dev/null
@@ -1,4 +0,0 @@
-class Foo {
-  accessor
-  ["bar"];
-}
diff --git a/tests/format/js/decorator-auto-accessors/jsfmt.spec.js b/tests/format/js/decorator-auto-accessors/jsfmt.spec.js
index 24bae9a3b..a718887d6 100644
--- a/tests/format/js/decorator-auto-accessors/jsfmt.spec.js
+++ b/tests/format/js/decorator-auto-accessors/jsfmt.spec.js
@@ -1,4 +1,4 @@
-const parsers = ["babel", "babel-ts", "babel-flow"];
+const parsers = ["babel", "typescript", "babel-flow"];
 const errors = {
   espree: [
     "basic.js",
diff --git a/tests/format/js/decorator-auto-accessors/static-with-newline.js b/tests/format/js/decorator-auto-accessors/static-with-newline.js
deleted file mode 100644
index e297f3f66..000000000
--- a/tests/format/js/decorator-auto-accessors/static-with-newline.js
+++ /dev/null
@@ -1,4 +0,0 @@
-class Foo {
-  static accessor
-  bar;
-}
diff --git a/tests/format/js/decorator-auto-accessors/with-newline.js b/tests/format/js/decorator-auto-accessors/with-newline.js
deleted file mode 100644
index 30bf86a73..000000000
--- a/tests/format/js/decorator-auto-accessors/with-newline.js
+++ /dev/null
@@ -1,4 +0,0 @@
-class Foo {
-  accessor
-  bar;
-}
diff --git a/tests/format/js/ternaries/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/ternaries/__snapshots__/jsfmt.spec.js.snap
index fb0478183..017ac514c 100644
--- a/tests/format/js/ternaries/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/js/ternaries/__snapshots__/jsfmt.spec.js.snap
@@ -179,10 +179,11 @@ fn(
   bifornCringerMoshedPerplexSawder,
   askTrovenaBeenaDependsRowans,
   glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
-    anodyneCondosMalateOverateRetinol 
-      ? annularCooeedSplicesWalksWayWay 
-      : kochabCooieGameOnOboleUnweave 
+    anodyneCondosMalateOverateRetinol
+      ? annularCooeedSplicesWalksWayWay
+      : kochabCooieGameOnOboleUnweave
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 =====================================output=====================================
 fn(
@@ -193,6 +194,7 @@ fn(
         ? annularCooeedSplicesWalksWayWay
         : kochabCooieGameOnOboleUnweave,
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 ================================================================================
 `;
@@ -209,10 +211,11 @@ fn(
   bifornCringerMoshedPerplexSawder,
   askTrovenaBeenaDependsRowans,
   glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
-    anodyneCondosMalateOverateRetinol 
-      ? annularCooeedSplicesWalksWayWay 
-      : kochabCooieGameOnOboleUnweave 
+    anodyneCondosMalateOverateRetinol
+      ? annularCooeedSplicesWalksWayWay
+      : kochabCooieGameOnOboleUnweave
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 =====================================output=====================================
 fn(
@@ -223,6 +226,7 @@ fn(
 		? annularCooeedSplicesWalksWayWay
 		: kochabCooieGameOnOboleUnweave,
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 ================================================================================
 `;
@@ -238,10 +242,11 @@ fn(
   bifornCringerMoshedPerplexSawder,
   askTrovenaBeenaDependsRowans,
   glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
-    anodyneCondosMalateOverateRetinol 
-      ? annularCooeedSplicesWalksWayWay 
-      : kochabCooieGameOnOboleUnweave 
+    anodyneCondosMalateOverateRetinol
+      ? annularCooeedSplicesWalksWayWay
+      : kochabCooieGameOnOboleUnweave
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 =====================================output=====================================
 fn(
@@ -252,6 +257,7 @@ fn(
 		? annularCooeedSplicesWalksWayWay
 		: kochabCooieGameOnOboleUnweave,
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 ================================================================================
 `;
@@ -266,10 +272,11 @@ fn(
   bifornCringerMoshedPerplexSawder,
   askTrovenaBeenaDependsRowans,
   glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
-    anodyneCondosMalateOverateRetinol 
-      ? annularCooeedSplicesWalksWayWay 
-      : kochabCooieGameOnOboleUnweave 
+    anodyneCondosMalateOverateRetinol
+      ? annularCooeedSplicesWalksWayWay
+      : kochabCooieGameOnOboleUnweave
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 =====================================output=====================================
 fn(
@@ -280,6 +287,7 @@ fn(
     ? annularCooeedSplicesWalksWayWay
     : kochabCooieGameOnOboleUnweave,
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
 
 ================================================================================
 `;
@@ -1816,6 +1824,7 @@ bifornCringerMoshedPerplexSawder =
     kochabCooieGameOnOboleUnweave === Math.PI
       ? averredBathersBoxroomBuggyNurl
       : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo));
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
   glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -2160,6 +2169,7 @@ bifornCringerMoshedPerplexSawder =
         kochabCooieGameOnOboleUnweave === Math.PI
         ? averredBathersBoxroomBuggyNurl
         : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo);
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
     glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -2468,6 +2478,7 @@ bifornCringerMoshedPerplexSawder =
     kochabCooieGameOnOboleUnweave === Math.PI
       ? averredBathersBoxroomBuggyNurl
       : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo));
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
   glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -2812,6 +2823,7 @@ bifornCringerMoshedPerplexSawder =
 		kochabCooieGameOnOboleUnweave === Math.PI
 		? averredBathersBoxroomBuggyNurl
 		: anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo);
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
 	glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -3119,6 +3131,7 @@ bifornCringerMoshedPerplexSawder =
     kochabCooieGameOnOboleUnweave === Math.PI
       ? averredBathersBoxroomBuggyNurl
       : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo));
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
   glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -3463,6 +3476,7 @@ bifornCringerMoshedPerplexSawder =
 		kochabCooieGameOnOboleUnweave === Math.PI
 		? averredBathersBoxroomBuggyNurl
 		: anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo);
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
 	glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -3769,6 +3783,7 @@ bifornCringerMoshedPerplexSawder =
     kochabCooieGameOnOboleUnweave === Math.PI
       ? averredBathersBoxroomBuggyNurl
       : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo));
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
   glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -4113,6 +4128,7 @@ bifornCringerMoshedPerplexSawder =
     kochabCooieGameOnOboleUnweave === Math.PI
     ? averredBathersBoxroomBuggyNurl
     : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo);
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
   glimseGlyphsHazardNoopsTieTie === 0 &&
@@ -4315,6 +4331,34 @@ a
     ? line
     : softline
 
+const config = {
+    onFailure: onFailure !== undefined ? onFailure :   (
+      error => {
+          notify(
+              typeof error === 'string' ?
+                  error
+              : error.message || 'ra.notification.http_error',
+              'warning',
+              {
+                  _:
+                      typeof error === 'string' ? error
+                      : error && error.message ? error.message
+                      : undefined,
+              }
+          );
+          refresh();
+      }
+    )
+}
+
+showNotification(
+    typeof error === 'string' ? error :   error.message || body,
+    level || 'warning',
+    {
+        messageArgs,
+        undoable: false,
+    }
+)
 =====================================output=====================================
 let icecream =
     what == "cone"
@@ -4413,6 +4457,38 @@ a
     ? line
     : softline;
 
+const config = {
+    onFailure:
+        onFailure !== undefined
+            ? onFailure
+            : (error) => {
+                  notify(
+                      typeof error === "string"
+                          ? error
+                          : error.message || "ra.notification.http_error",
+                      "warning",
+                      {
+                          _:
+                              typeof error === "string"
+                                  ? error
+                                  : error && error.message
+                                  ? error.message
+                                  : undefined,
+                      },
+                  );
+                  refresh();
+              },
+};
+
+showNotification(
+    typeof error === "string" ? error : error.message || body,
+    level || "warning",
+    {
+        messageArgs,
+        undoable: false,
+    },
+);
+
 ================================================================================
 `;
 
@@ -4520,6 +4596,34 @@ a
     ? line
     : softline
 
+const config = {
+    onFailure: onFailure !== undefined ? onFailure :   (
+      error => {
+          notify(
+              typeof error === 'string' ?
+                  error
+              : error.message || 'ra.notification.http_error',
+              'warning',
+              {
+                  _:
+                      typeof error === 'string' ? error
+                      : error && error.message ? error.message
+                      : undefined,
+              }
+          );
+          refresh();
+      }
+    )
+}
+
+showNotification(
+    typeof error === 'string' ? error :   error.message || body,
+    level || 'warning',
+    {
+        messageArgs,
+        undoable: false,
+    }
+)
 =====================================output=====================================
 let icecream =
 	what == "cone"
@@ -4618,6 +4722,38 @@ a
 	? line
 	: softline;
 
+const config = {
+	onFailure:
+		onFailure !== undefined
+			? onFailure
+			: (error) => {
+					notify(
+						typeof error === "string"
+							? error
+							: error.message || "ra.notification.http_error",
+						"warning",
+						{
+							_:
+								typeof error === "string"
+									? error
+									: error && error.message
+									? error.message
+									: undefined,
+						},
+					);
+					refresh();
+			  },
+};
+
+showNotification(
+	typeof error === "string" ? error : error.message || body,
+	level || "warning",
+	{
+		messageArgs,
+		undoable: false,
+	},
+);
+
 ================================================================================
 `;
 
@@ -4724,6 +4860,34 @@ a
     ? line
     : softline
 
+const config = {
+    onFailure: onFailure !== undefined ? onFailure :   (
+      error => {
+          notify(
+              typeof error === 'string' ?
+                  error
+              : error.message || 'ra.notification.http_error',
+              'warning',
+              {
+                  _:
+                      typeof error === 'string' ? error
+                      : error && error.message ? error.message
+                      : undefined,
+              }
+          );
+          refresh();
+      }
+    )
+}
+
+showNotification(
+    typeof error === 'string' ? error :   error.message || body,
+    level || 'warning',
+    {
+        messageArgs,
+        undoable: false,
+    }
+)
 =====================================output=====================================
 let icecream =
 	what == "cone"
@@ -4822,6 +4986,38 @@ a
 	? line
 	: softline;
 
+const config = {
+	onFailure:
+		onFailure !== undefined
+			? onFailure
+			: (error) => {
+					notify(
+						typeof error === "string"
+							? error
+							: error.message || "ra.notification.http_error",
+						"warning",
+						{
+							_:
+								typeof error === "string"
+									? error
+									: error && error.message
+									? error.message
+									: undefined,
+						},
+					);
+					refresh();
+			  },
+};
+
+showNotification(
+	typeof error === "string" ? error : error.message || body,
+	level || "warning",
+	{
+		messageArgs,
+		undoable: false,
+	},
+);
+
 ================================================================================
 `;
 
@@ -4927,6 +5123,34 @@ a
     ? line
     : softline
 
+const config = {
+    onFailure: onFailure !== undefined ? onFailure :   (
+      error => {
+          notify(
+              typeof error === 'string' ?
+                  error
+              : error.message || 'ra.notification.http_error',
+              'warning',
+              {
+                  _:
+                      typeof error === 'string' ? error
+                      : error && error.message ? error.message
+                      : undefined,
+              }
+          );
+          refresh();
+      }
+    )
+}
+
+showNotification(
+    typeof error === 'string' ? error :   error.message || body,
+    level || 'warning',
+    {
+        messageArgs,
+        undoable: false,
+    }
+)
 =====================================output=====================================
 let icecream =
   what == "cone"
@@ -5025,6 +5249,38 @@ a
   ? line
   : softline;
 
+const config = {
+  onFailure:
+    onFailure !== undefined
+      ? onFailure
+      : (error) => {
+          notify(
+            typeof error === "string"
+              ? error
+              : error.message || "ra.notification.http_error",
+            "warning",
+            {
+              _:
+                typeof error === "string"
+                  ? error
+                  : error && error.message
+                  ? error.message
+                  : undefined,
+            },
+          );
+          refresh();
+        },
+};
+
+showNotification(
+  typeof error === "string" ? error : error.message || body,
+  level || "warning",
+  {
+    messageArgs,
+    undoable: false,
+  },
+);
+
 ================================================================================
 `;
 
diff --git a/tests/format/js/ternaries/func-call.js b/tests/format/js/ternaries/func-call.js
index a87c7289e..527237c7c 100644
--- a/tests/format/js/ternaries/func-call.js
+++ b/tests/format/js/ternaries/func-call.js
@@ -2,7 +2,8 @@ fn(
   bifornCringerMoshedPerplexSawder,
   askTrovenaBeenaDependsRowans,
   glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
-    anodyneCondosMalateOverateRetinol 
-      ? annularCooeedSplicesWalksWayWay 
-      : kochabCooieGameOnOboleUnweave 
+    anodyneCondosMalateOverateRetinol
+      ? annularCooeedSplicesWalksWayWay
+      : kochabCooieGameOnOboleUnweave
 );
+// TODO(rattrayalex): try to indent consequent/alternate here.
diff --git a/tests/format/js/ternaries/indent-after-paren.js b/tests/format/js/ternaries/indent-after-paren.js
index f4c0bdbf9..eacc4a6fa 100644
--- a/tests/format/js/ternaries/indent-after-paren.js
+++ b/tests/format/js/ternaries/indent-after-paren.js
@@ -199,6 +199,7 @@ bifornCringerMoshedPerplexSawder =
     kochabCooieGameOnOboleUnweave === Math.PI
       ? averredBathersBoxroomBuggyNurl
       : anodyneCondosMalateOverateRetinol)(Fooooooooooo.Fooooooooooo));
+// TODO(rattrayalex): try to fix this case
 
 bifornCringerMoshedPerplexSawder = (
   glimseGlyphsHazardNoopsTieTie === 0 &&
diff --git a/tests/format/js/ternaries/nested.js b/tests/format/js/ternaries/nested.js
index bfc1cba44..ce77c6750 100644
--- a/tests/format/js/ternaries/nested.js
+++ b/tests/format/js/ternaries/nested.js
@@ -93,3 +93,32 @@ a
     }
     ? line
     : softline
+
+const config = {
+    onFailure: onFailure !== undefined ? onFailure :   (
+      error => {
+          notify(
+              typeof error === 'string' ?
+                  error
+              : error.message || 'ra.notification.http_error',
+              'warning',
+              {
+                  _:
+                      typeof error === 'string' ? error
+                      : error && error.message ? error.message
+                      : undefined,
+              }
+          );
+          refresh();
+      }
+    )
+}
+
+showNotification(
+    typeof error === 'string' ? error :   error.message || body,
+    level || 'warning',
+    {
+        messageArgs,
+        undoable: false,
+    }
+)
\ No newline at end of file
diff --git a/tests/format/jsx/jsx/__snapshots__/jsfmt.spec.js.snap b/tests/format/jsx/jsx/__snapshots__/jsfmt.spec.js.snap
index e8673fbf8..9b0372fde 100644
--- a/tests/format/jsx/jsx/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/jsx/jsx/__snapshots__/jsfmt.spec.js.snap
@@ -1102,6 +1102,13 @@ jsxModeFromElementBreaking ? (
   {a ? "a" : b ? "b" : "c"}
 </div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo ? "a" : b ? "b" : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id="c" /> : "dun";
@@ -1243,6 +1250,17 @@ jsxModeFromElementBreaking ? (
 // non-breaking.
 <div>{a ? "a" : b ? "b" : "c"}</div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
+    ? "a"
+    : b
+    ? "b"
+    : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id="c" /> : "dun";
@@ -1401,6 +1419,13 @@ jsxModeFromElementBreaking ? (
   {a ? "a" : b ? "b" : "c"}
 </div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo ? "a" : b ? "b" : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id="c" /> : "dun";
@@ -1542,6 +1567,17 @@ jsxModeFromElementBreaking ? (
 // non-breaking.
 <div>{a ? "a" : b ? "b" : "c"}</div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
+    ? "a"
+    : b
+    ? "b"
+    : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id='c' /> : "dun";
@@ -1700,6 +1736,13 @@ jsxModeFromElementBreaking ? (
   {a ? "a" : b ? "b" : "c"}
 </div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo ? "a" : b ? "b" : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id="c" /> : "dun";
@@ -1841,6 +1884,17 @@ jsxModeFromElementBreaking ? (
 // non-breaking.
 <div>{a ? 'a' : b ? 'b' : 'c'}</div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
+    ? 'a'
+    : b
+    ? 'b'
+    : 'c'}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? 'satellite' : isPublic ? 'affairs' : network ? <span id="c" /> : 'dun';
@@ -1999,6 +2053,13 @@ jsxModeFromElementBreaking ? (
   {a ? "a" : b ? "b" : "c"}
 </div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo ? "a" : b ? "b" : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id="c" /> : "dun";
@@ -2140,6 +2201,17 @@ jsxModeFromElementBreaking ? (
 // non-breaking.
 <div>{a ? 'a' : b ? 'b' : 'c'}</div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo
+    ? 'a'
+    : b
+    ? 'b'
+    : 'c'}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? 'satellite' : isPublic ? 'affairs' : network ? <span id='c' /> : 'dun';
diff --git a/tests/format/jsx/jsx/conditional-expression.js b/tests/format/jsx/jsx/conditional-expression.js
index 3283d9c6a..703ce4d95 100644
--- a/tests/format/jsx/jsx/conditional-expression.js
+++ b/tests/format/jsx/jsx/conditional-expression.js
@@ -84,6 +84,13 @@ jsxModeFromElementBreaking ? (
   {a ? "a" : b ? "b" : "c"}
 </div>;
 
+// This chain of ConditionalExpressions prints in JSX mode because the parent of
+// the outermost ConditionalExpression is a JSXExpressionContainer. It is
+// breaking.
+<div>
+  {thisIsASongAboutYourPoorSickPenguinHeHasAFeverAndHisToesAreBlueButIfISingToYourPoorSickPenguinHeWillFeelBetterInADayOrTwo ? "a" : b ? "b" : "c"}
+</div>;
+
 // This chain of ConditionalExpressions prints in JSX mode because there is a
 // JSX element somewhere in the chain. It is non-breaking.
 cable ? "satellite" : isPublic ? "affairs" : network ? <span id="c" /> : "dun";
diff --git a/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap b/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap
index 9eec9daa3..4fd5776ae 100644
--- a/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/misc/typescript-babel-only/__snapshots__/jsfmt.spec.js.snap
@@ -20,6 +20,46 @@ class C {
 ================================================================================
 `;
 
+exports[`decorator-auto-accessors-new-line.ts format 1`] = `
+====================================options=====================================
+parsers: ["babel-ts"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class Foo {
+  accessor
+  ["bar"];
+}
+
+class Foo {
+  static accessor
+  bar;
+}
+
+class Foo {
+  accessor
+  bar;
+}
+
+=====================================output=====================================
+class Foo {
+  accessor;
+  ["bar"];
+}
+
+class Foo {
+  static accessor;
+  bar;
+}
+
+class Foo {
+  accessor;
+  bar;
+}
+
+================================================================================
+`;
+
 exports[`parenthesized-decorators-call-expression.ts format 1`] = `
 ====================================options=====================================
 parsers: ["babel-ts"]
diff --git a/tests/format/misc/typescript-babel-only/decorator-auto-accessors-new-line.ts b/tests/format/misc/typescript-babel-only/decorator-auto-accessors-new-line.ts
new file mode 100644
index 000000000..084a69a60
--- /dev/null
+++ b/tests/format/misc/typescript-babel-only/decorator-auto-accessors-new-line.ts
@@ -0,0 +1,14 @@
+class Foo {
+  accessor
+  ["bar"];
+}
+
+class Foo {
+  static accessor
+  bar;
+}
+
+class Foo {
+  accessor
+  bar;
+}
diff --git a/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap b/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap
index 9bd328a5e..1c1db56ef 100644
--- a/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/misc/typescript-only/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`await-with-parens.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo(promise) { await (promise); }
+
+function a() {
+  return await (1)
+}
+
+() => { await (x) };
+
+function foo() {
+  await
+  (foo);
+}
+
+export class C {
+  p = await (0);
+}
+
+await (0);
+
+=====================================output=====================================
+function foo(promise) {
+  await(promise)
+}
+
+function a() {
+  return await(1)
+}
+
+;() => {
+  await(x)
+}
+
+function foo() {
+  await(foo)
+}
+
+export class C {
+  p = await(0)
+}
+
+await 0
+
+================================================================================
+`;
+
 exports[`await-with-parens.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
@@ -51,6 +103,383 @@ await 0;
 ================================================================================
 `;
 
+exports[`decorator-auto-accessor-like-property-name.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+class C {
+  accessor;
+  bar;
+}
+
+=====================================output=====================================
+class C {
+  accessor;
+  bar
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessor-like-property-name.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class C {
+  accessor;
+  bar;
+}
+
+=====================================output=====================================
+class C {
+  accessor;
+  bar;
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-abstract-class.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+abstract class Foo {
+  declare accessor prop7: number;
+  private accessor #p: any;
+
+  accessor a!;
+  abstract accessor #s;
+  accessor #d?;
+  abstract accessor f;
+  readonly accessor g;
+}
+
+=====================================output=====================================
+abstract class Foo {
+  declare accessor prop7: number
+  private accessor #p: any
+
+  accessor a!
+  abstract accessor #s
+  accessor #d?
+  abstract accessor f
+  readonly accessor g
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-abstract-class.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+abstract class Foo {
+  declare accessor prop7: number;
+  private accessor #p: any;
+
+  accessor a!;
+  abstract accessor #s;
+  accessor #d?;
+  abstract accessor f;
+  readonly accessor g;
+}
+
+=====================================output=====================================
+abstract class Foo {
+  declare accessor prop7: number;
+  private accessor #p: any;
+
+  accessor a!;
+  abstract accessor #s;
+  accessor #d?;
+  abstract accessor f;
+  readonly accessor g;
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-declara-class.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+declare class C {
+  accessor x = 1;
+  #y = 1;
+}
+
+=====================================output=====================================
+declare class C {
+  accessor x = 1
+  #y = 1
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-declara-class.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+declare class C {
+  accessor x = 1;
+  #y = 1;
+}
+
+=====================================output=====================================
+declare class C {
+  accessor x = 1;
+  #y = 1;
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-mixed-modifiers.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+  private accessor #p: any;
+
+  accessor a!: any;
+  accessor aa!: any;
+  abstract accessor #s;
+  readonly accessor g;
+}
+
+=====================================output=====================================
+abstract class Foo {
+  accessor prop: number = 1
+  static accessor prop2: number = 1
+  accessor #prop3: number = 1
+  accessor [prop4]: number = 1
+  private accessor prop5: number = 1
+  abstract accessor prop6: number
+  private accessor #p: any
+
+  accessor a!: any
+  accessor aa!: any
+  abstract accessor #s
+  readonly accessor g
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-mixed-modifiers.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+  private accessor #p: any;
+
+  accessor a!: any;
+  accessor aa!: any;
+  abstract accessor #s;
+  readonly accessor g;
+}
+
+=====================================output=====================================
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+  private accessor #p: any;
+
+  accessor a!: any;
+  accessor aa!: any;
+  abstract accessor #s;
+  readonly accessor g;
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-new-line.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+class Foo {
+  accessor
+  ["bar"];
+}
+
+class Foo {
+  static accessor
+  bar;
+}
+
+class Foo {
+  accessor
+  bar;
+}
+
+=====================================output=====================================
+class Foo {
+  accessor ["bar"]
+}
+
+class Foo {
+  static accessor bar
+}
+
+class Foo {
+  accessor bar
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-new-line.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class Foo {
+  accessor
+  ["bar"];
+}
+
+class Foo {
+  static accessor
+  bar;
+}
+
+class Foo {
+  accessor
+  bar;
+}
+
+=====================================output=====================================
+class Foo {
+  accessor ["bar"];
+}
+
+class Foo {
+  static accessor bar;
+}
+
+class Foo {
+  accessor bar;
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-type-annotations.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+}
+
+=====================================output=====================================
+abstract class Foo {
+  accessor prop: number = 1
+  static accessor prop2: number = 1
+  accessor #prop3: number = 1
+  accessor [prop4]: number = 1
+  private accessor prop5: number = 1
+  abstract accessor prop6: number
+}
+
+================================================================================
+`;
+
+exports[`decorator-auto-accessors-type-annotations.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+}
+
+=====================================output=====================================
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+}
+
+================================================================================
+`;
+
+exports[`parenthesized-decorators-call-expression.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+@(test().x("global").y())
+class X {}
+
+=====================================output=====================================
+@test().x("global").y()
+class X {}
+
+================================================================================
+`;
+
 exports[`parenthesized-decorators-call-expression.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
@@ -67,6 +496,27 @@ class X {}
 ================================================================================
 `;
 
+exports[`parenthesized-decorators-tagged-template.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+class Test {
+  @foo\`bar\`
+  text: string = "text"
+}
+
+=====================================output=====================================
+class Test {
+  @foo\`bar\`
+  text: string = "text"
+}
+
+================================================================================
+`;
+
 exports[`parenthesized-decorators-tagged-template.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
@@ -87,6 +537,27 @@ class Test {
 ================================================================================
 `;
 
+exports[`prettier-ignore-parenthesized-type.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+type Foo =
+  // prettier-ignore
+  (
+    aa
+  );
+
+=====================================output=====================================
+type Foo =
+  // prettier-ignore
+  aa
+
+================================================================================
+`;
+
 exports[`prettier-ignore-parenthesized-type.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]
diff --git a/tests/format/misc/typescript-only/decorator-auto-accessor-like-property-name.ts b/tests/format/misc/typescript-only/decorator-auto-accessor-like-property-name.ts
new file mode 100644
index 000000000..e69e9775a
--- /dev/null
+++ b/tests/format/misc/typescript-only/decorator-auto-accessor-like-property-name.ts
@@ -0,0 +1,4 @@
+class C {
+  accessor;
+  bar;
+}
diff --git a/tests/format/misc/typescript-only/decorator-auto-accessors-abstract-class.ts b/tests/format/misc/typescript-only/decorator-auto-accessors-abstract-class.ts
new file mode 100644
index 000000000..7009742de
--- /dev/null
+++ b/tests/format/misc/typescript-only/decorator-auto-accessors-abstract-class.ts
@@ -0,0 +1,10 @@
+abstract class Foo {
+  declare accessor prop7: number;
+  private accessor #p: any;
+
+  accessor a!;
+  abstract accessor #s;
+  accessor #d?;
+  abstract accessor f;
+  readonly accessor g;
+}
diff --git a/tests/format/misc/typescript-only/decorator-auto-accessors-declara-class.ts b/tests/format/misc/typescript-only/decorator-auto-accessors-declara-class.ts
new file mode 100644
index 000000000..dfd1036fd
--- /dev/null
+++ b/tests/format/misc/typescript-only/decorator-auto-accessors-declara-class.ts
@@ -0,0 +1,4 @@
+declare class C {
+  accessor x = 1;
+  #y = 1;
+}
diff --git a/tests/format/misc/typescript-only/decorator-auto-accessors-mixed-modifiers.ts b/tests/format/misc/typescript-only/decorator-auto-accessors-mixed-modifiers.ts
new file mode 100644
index 000000000..d10849c55
--- /dev/null
+++ b/tests/format/misc/typescript-only/decorator-auto-accessors-mixed-modifiers.ts
@@ -0,0 +1,14 @@
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+  private accessor #p: any;
+
+  accessor a!: any;
+  accessor aa!: any;
+  abstract accessor #s;
+  readonly accessor g;
+}
diff --git a/tests/format/misc/typescript-only/decorator-auto-accessors-new-line.ts b/tests/format/misc/typescript-only/decorator-auto-accessors-new-line.ts
new file mode 100644
index 000000000..084a69a60
--- /dev/null
+++ b/tests/format/misc/typescript-only/decorator-auto-accessors-new-line.ts
@@ -0,0 +1,14 @@
+class Foo {
+  accessor
+  ["bar"];
+}
+
+class Foo {
+  static accessor
+  bar;
+}
+
+class Foo {
+  accessor
+  bar;
+}
diff --git a/tests/format/misc/typescript-only/decorator-auto-accessors-type-annotations.ts b/tests/format/misc/typescript-only/decorator-auto-accessors-type-annotations.ts
new file mode 100644
index 000000000..2099b517a
--- /dev/null
+++ b/tests/format/misc/typescript-only/decorator-auto-accessors-type-annotations.ts
@@ -0,0 +1,8 @@
+abstract class Foo {
+  accessor prop: number = 1;
+  static accessor prop2: number = 1;
+  accessor #prop3: number = 1;
+  accessor [prop4]: number = 1;
+  private accessor prop5: number = 1;
+  abstract accessor prop6: number;
+}
diff --git a/tests/format/misc/typescript-only/jsfmt.spec.js b/tests/format/misc/typescript-only/jsfmt.spec.js
index 29084a9c8..eb4180643 100644
--- a/tests/format/misc/typescript-only/jsfmt.spec.js
+++ b/tests/format/misc/typescript-only/jsfmt.spec.js
@@ -1 +1,2 @@
 run_spec(import.meta, ["typescript"]);
+run_spec(import.meta, ["typescript"], { semi: false });
diff --git a/tests/format/typescript/abstract-property/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/abstract-property/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..57b9dc9fb
--- /dev/null
+++ b/tests/format/typescript/abstract-property/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`semicolon.ts - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+abstract class C {
+  abstract get;
+  x() {}
+}
+
+=====================================output=====================================
+abstract class C {
+  abstract get;
+  x() {}
+}
+
+================================================================================
+`;
+
+exports[`semicolon.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+abstract class C {
+  abstract get;
+  x() {}
+}
+
+=====================================output=====================================
+abstract class C {
+  abstract get;
+  x() {}
+}
+
+================================================================================
+`;
diff --git a/tests/format/typescript/abstract-property/jsfmt.spec.js b/tests/format/typescript/abstract-property/jsfmt.spec.js
new file mode 100644
index 000000000..eb4180643
--- /dev/null
+++ b/tests/format/typescript/abstract-property/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(import.meta, ["typescript"]);
+run_spec(import.meta, ["typescript"], { semi: false });
diff --git a/tests/format/typescript/abstract-property/semicolon.ts b/tests/format/typescript/abstract-property/semicolon.ts
new file mode 100644
index 000000000..e53e3306b
--- /dev/null
+++ b/tests/format/typescript/abstract-property/semicolon.ts
@@ -0,0 +1,4 @@
+abstract class C {
+  abstract get;
+  x() {}
+}
diff --git a/tests/format/typescript/conditional-types/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/conditional-types/__snapshots__/jsfmt.spec.js.snap
index 7231c3da4..e598947c2 100644
--- a/tests/format/typescript/conditional-types/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/typescript/conditional-types/__snapshots__/jsfmt.spec.js.snap
@@ -347,3 +347,87 @@ type Foo3 = (
 
 ================================================================================
 `;
+
+exports[`new-ternary-spec.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// TypeScript has the same behavior, including a line break after =, but no parens around "conditional":
+type KnownKeys<T> =
+  {
+    [K in keyof T]: string extends K ? never
+    : number extends K ? never
+    : K;
+  } extends { [_ in keyof T]: infer U } ?
+    {} extends U ? never
+    : U
+  : never;
+
+type KnownKeysWithLongExtends<T> =
+  {
+    [K in keyof T]: string extends K ? never
+    : number extends K ? never
+    : K;
+  } extends {
+    [_ in keyof T]: SomeReallyLongThingThatBreaksTheLine<infer U>
+  } ? U
+  : never;
+
+// TypeScript examples:
+type TypeName<T> =
+  T extends string ? "string"
+  : T extends number ? "number"
+  : T extends boolean ? "boolean"
+  : T extends undefined ? "undefined"
+  : T extends Function ? "function"
+  : "object";
+
+type Unpacked<T> =
+  T extends (infer U)[] ? U
+  : T extends (...args: any[]) => infer U ?
+    SomeReallyLongThingThatBreaksTheLine<U>
+  : T extends Promise<infer U> ? U
+  : T;
+=====================================output=====================================
+// TypeScript has the same behavior, including a line break after =, but no parens around "conditional":
+type KnownKeys<T> = {
+  [K in keyof T]: string extends K ? never : number extends K ? never : K;
+} extends { [_ in keyof T]: infer U }
+  ? {} extends U
+    ? never
+    : U
+  : never;
+
+type KnownKeysWithLongExtends<T> = {
+  [K in keyof T]: string extends K ? never : number extends K ? never : K;
+} extends {
+  [_ in keyof T]: SomeReallyLongThingThatBreaksTheLine<infer U>;
+}
+  ? U
+  : never;
+
+// TypeScript examples:
+type TypeName<T> = T extends string
+  ? "string"
+  : T extends number
+  ? "number"
+  : T extends boolean
+  ? "boolean"
+  : T extends undefined
+  ? "undefined"
+  : T extends Function
+  ? "function"
+  : "object";
+
+type Unpacked<T> = T extends (infer U)[]
+  ? U
+  : T extends (...args: any[]) => infer U
+  ? SomeReallyLongThingThatBreaksTheLine<U>
+  : T extends Promise<infer U>
+  ? U
+  : T;
+
+================================================================================
+`;
diff --git a/tests/format/typescript/conditional-types/new-ternary-spec.ts b/tests/format/typescript/conditional-types/new-ternary-spec.ts
new file mode 100644
index 000000000..972d3e935
--- /dev/null
+++ b/tests/format/typescript/conditional-types/new-ternary-spec.ts
@@ -0,0 +1,36 @@
+// TypeScript has the same behavior, including a line break after =, but no parens around "conditional":
+type KnownKeys<T> =
+  {
+    [K in keyof T]: string extends K ? never
+    : number extends K ? never
+    : K;
+  } extends { [_ in keyof T]: infer U } ?
+    {} extends U ? never
+    : U
+  : never;
+
+type KnownKeysWithLongExtends<T> =
+  {
+    [K in keyof T]: string extends K ? never
+    : number extends K ? never
+    : K;
+  } extends {
+    [_ in keyof T]: SomeReallyLongThingThatBreaksTheLine<infer U>
+  } ? U
+  : never;
+
+// TypeScript examples:
+type TypeName<T> =
+  T extends string ? "string"
+  : T extends number ? "number"
+  : T extends boolean ? "boolean"
+  : T extends undefined ? "undefined"
+  : T extends Function ? "function"
+  : "object";
+
+type Unpacked<T> =
+  T extends (infer U)[] ? U
+  : T extends (...args: any[]) => infer U ?
+    SomeReallyLongThingThatBreaksTheLine<U>
+  : T extends Promise<infer U> ? U
+  : T;
\ No newline at end of file
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 2948dcb5b..48a3689d5 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -321,7 +321,7 @@ const UsersSection = ({ language }) => {
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
                 More than{" "}
-                <strong data-placeholder="dependent-github">5 million</strong>{" "}
+                <strong data-placeholder="dependent-github">5.1 million</strong>{" "}
                 dependent repositories on GitHub
               </p>
               <Button href="https://github.com/prettier/prettier/network/dependents">
@@ -337,7 +337,7 @@ const UsersSection = ({ language }) => {
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
                 More than{" "}
-                <strong data-placeholder="dependent-npm">12.7k</strong>{" "}
+                <strong data-placeholder="dependent-npm">12.8k</strong>{" "}
                 dependent packages on npm
               </p>
               <Button href="https://www.npmjs.com/browse/depended/prettier">
diff --git a/website/versioned_docs/version-stable/browser.md b/website/versioned_docs/version-stable/browser.md
index 1337717f7..000c70daa 100644
--- a/website/versioned_docs/version-stable/browser.md
+++ b/website/versioned_docs/version-stable/browser.md
@@ -21,8 +21,8 @@ Required options:
 
 - **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files named
 
-  - `parser-*.js` in <https://unpkg.com/browse/prettier@2.8.0/> and
-  - `parser-*.mjs` in <https://unpkg.com/browse/prettier@2.8.0/esm/>
+  - `parser-*.js` in <https://unpkg.com/browse/prettier@2.8.1/> and
+  - `parser-*.mjs` in <https://unpkg.com/browse/prettier@2.8.1/esm/>
 
   You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
 
@@ -33,8 +33,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.8.0/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.8.0/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.8.1/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.8.1/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -49,8 +49,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.8.0/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.8.0/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.8.1/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.8.1/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -63,8 +63,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.8.0/standalone.js",
-  "https://unpkg.com/prettier@2.8.0/parser-graphql.js",
+  "https://unpkg.com/prettier@2.8.1/standalone.js",
+  "https://unpkg.com/prettier@2.8.1/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.8.0/standalone.js");
-importScripts("https://unpkg.com/prettier@2.8.0/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.8.1/standalone.js");
+importScripts("https://unpkg.com/prettier@2.8.1/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -103,8 +103,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.8.0/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.8.0/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.8.1/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.8.1/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -120,9 +120,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.8.0/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.8.0/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.8.0/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.8.1/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.8.1/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.8.1/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {