Add 2.5 blog (#11823)

* Mark highlights * Update intro * Draft * Update changelog * Update changelog * Regenerate draft * Update TS 4.5 blog URL * Regenerate draft * Fix by prettier * Fix * Remove changelogs released already * Address review * Update * Regenerate draft * Regenerate draft * Regenerate * Update changelog_unreleased/typescript/11515.md Co-authored-by: Jed Fox <git@jedfox.com> * Update changelog_unreleased/typescript/11721.md Co-authored-by: Jed Fox <git@jedfox.com> * Update changelog_unreleased/mdx/11563.md Co-authored-by: Jed Fox <git@jedfox.com> * Update changelog_unreleased/mdx/11563.md Co-authored-by: Jed Fox <git@jedfox.com> * Update website/blog/2021-11-21-2.5.0.md Co-authored-by: Jed Fox <git@jedfox.com> * Update website/blog/2021-11-21-2.5.0.md Co-authored-by: Jed Fox <git@jedfox.com> * Regenerate * Address reviews * Regenerate * Use examples * Regenerate * Address review * Renegrate * Address review * Regenerate * MDX 2 comments => MDX v2 comment syntax * Fix * Update changelog_unreleased/blog-post-intro.md Co-authored-by: Lucas Azzola <derflatulator@gmail.com> * Update changelog_unreleased/typescript/11721.md Co-authored-by: Lucas Azzola <derflatulator@gmail.com> * Regenerate * Update changelog_unreleased/typescript/11515.md Co-authored-by: Jed Fox <git@jedfox.com> * Regenerate * Address review * Regenerate * Address review * Regenerate Co-authored-by: Jed Fox <git@jedfox.com> Co-authored-by: Lucas Azzola <derflatulator@gmail.com>
prettier · Nov 25, 2021 · 04aa850 · 04aa850
1 parent 255d389
commit 04aa850
Show file tree

Hide file tree

Showing 14 changed files with 419 additions and 103 deletions.
diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md
@@ -0,0 +1,9 @@
+---
+author: "Sosuke Suzuki (@sosukesuzuki)"
+authorURL: "https://github.com/sosukesuzuki"
+title: "Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax!"
+---
+
+This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/)'s new syntax and [MDX v2](https://mdxjs.com/blog/v2/) comment syntax!
+
+If you enjoy Prettier and would like to support our work, consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, including [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel).
diff --git a/changelog_unreleased/cli/11514.md b/changelog_unreleased/cli/11514.md
diff --git a/changelog_unreleased/html/11827.md b/changelog_unreleased/html/11827.md
@@ -1 +1,30 @@
-#### Reverts #7865, keeping class names on the same line (#11827 by @jlongster)
+#### [HIGHLIGHT]Collapse HTML `class` attributes onto one line (#11827 by @jlongster)
+
+Reverts [#7865](https://github.com/prettier/prettier/pull/7865).
+
+While this was intended to be useful for users of CSS libraries like Tailwind that tend to result in large numbers of classes on elements, it became clear that our heuristics for where to split the class list on to multiple lines were unable to consistently produce good results. We’re still considering better ways to format HTML with lots of classes — consider [discussing with us](https://github.com/prettier/prettier/issues/7863).
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div
+  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
+></div>
+
+<!-- Prettier stable -->
+<div
+  class="
+    SomeComponent__heading-row
+    d-flex
+    flex-column flex-lg-row
+    justify-content-start justify-content-lg-between
+    align-items-start align-items-lg-center
+  "
+></div>
+
+<!-- Prettier main -->
+<div
+  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
+></div>
+
+```
diff --git a/changelog_unreleased/javascript/11593.md b/changelog_unreleased/javascript/11593.md
@@ -1,6 +1,6 @@
 #### Fix parentheses around sequence expression as body of arrow chain (#11593 by @bakkot)
 
-The required parentheses around sequence expressions as the body of arrow functions were dropped for chained arrows, causing incorrect code to be generated. Now they are included.
+The required parentheses around sequence expressions as the body of arrow functions are now preserved for chained arrows. Previously, Prettier removed them, which resulted in invalid syntax.
 
 <!-- prettier-ignore -->
 ```jsx

diff --git a/changelog_unreleased/javascript/11750.md b/changelog_unreleased/javascript/11750.md
@@ -1,5 +1,7 @@
 #### Ignore errors for sloppy mode syntax (#11750 by @fisker, #11778 by @sosukesuzuki)
 
+JavaScript’s [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) adds several useful errors to prevent mistakes. Some of these errors are syntax errors that occur at parse time. Since Prettier’s goal is to format all syntactically valid JavaScript code regardless of whether it will actually run, we’ve opted to leave this error checking to linters, compilers, and the runtime.
+
 <!-- prettier-ignore -->
 ```jsx
 // Input

diff --git a/changelog_unreleased/javascript/11800.md b/changelog_unreleased/javascript/11800.md
@@ -1,22 +1,23 @@
 #### Respect spacing for between expressions and parentheses in embedded CSS (#11800 by @sosukesuzuki)
 
-<!-- Optional description if it makes sense. -->
-
 <!-- prettier-ignore -->
 ```jsx
 // Input
 const paragraph2 = css`
-  transform: ${expr}(30px);
+  transform1: ${expr}(30px);
+  transform2: ${expr} (30px);
 `;
 
-// Prettier stable
+// Prettier 2.4
 const paragraph2 = css`
-  transform: ${expr} (30px);
+  transform1: ${expr} (30px);
+  transform2: ${expr} (30px);
 `;
 
-// Prettier main
+// Prettier 2.5
 const paragraph2 = css`
-  transform: ${expr}(30px);
+  transform1: ${expr}(30px);
+  transform2: ${expr} (30px);
 `;
 
 ```
diff --git a/changelog_unreleased/javascript/11835.md b/changelog_unreleased/javascript/11835.md
@@ -2,28 +2,12 @@
 
 <!-- prettier-ignore -->
 ```jsx
-// Input
+// Example
 class Foo {
   #brand;
   static isC(obj) {
     return #brand in Foo;
   }
 }
 
-// Prettier stable
-SyntaxError: Unexpected token #brand (4:12)
-  2 |   #brand;
-  3 |   static isC(obj) {
-> 4 |     return #brand in Foo;
-    |            ^
-  5 |   }
-  6 | }
-
-// Prettier main
-class Foo {
-  #brand;
-  static isC(obj) {
-    return #brand in Foo;
-  }
-}
 ```
diff --git a/changelog_unreleased/markdown/11685.md b/changelog_unreleased/markdown/11685.md
@@ -1,6 +1,6 @@
 #### Keep trailing commas for type parameters in embedded TSX (#11685 by @sosukesuzuki)
 
-<!-- Optional description if it makes sense. -->
+The trailing comma is necessary to prevent TypeScript from treating the `<T>` as the beginning of a JSX expression.
 
 <!-- prettier-ignore -->
 ````md
@@ -11,11 +11,11 @@ const test = <T,>(value: T) => {};
 
 <!-- Prettier stable -->
 ```tsx
-const test = <T,>(value: T) => {};
+const test = <T>(value: T) => {};
 ```
 
 <!-- Prettier main -->
 ```tsx
-const test = <T>(value: T) => {};
+const test = <T,>(value: T) => {};
 ```
 ````
diff --git a/changelog_unreleased/mdx/11563.md b/changelog_unreleased/mdx/11563.md
@@ -1,21 +1,15 @@
-#### Add support for MDX 2 comments (#11563 by @wooorm)
+#### [HIGHLIGHT]Add support for MDX v2 comment syntax (#11563 by @wooorm)
 
-This adds basic support for MDX 2 comments (JavaScript-style comments) in
-addition to existing MDX 1 comments (HTML-style comments).
+This adds basic support for MDX v2 comment syntax (JavaScript-style comments) in addition to the existing support MDX v1 comment syntax (HTML-style comments).
 
-Note that in MDX 2, more complex comments and whole expressions can be used
-inside braces.
-This currently only supports a single comment on one line so that
-`{/* prettier-ignore */}` can be used, but doesn’t support most of MDX 2.
+**Note**: Prettier currently only supports the new comment syntax for single-line comments (so that `{/* prettier-ignore */}` can be used), and doesn’t support the rest of MDX v2.
 
 <!-- prettier-ignore -->
 ```mdx
 Input:
-
 {/*A comment*/}
 
 Prettier stable:
-
 {/_A comment_/}
 
 Prettier main:

diff --git a/changelog_unreleased/scss/11487.md b/changelog_unreleased/scss/11487.md
diff --git a/changelog_unreleased/scss/11637.md b/changelog_unreleased/scss/11637.md
@@ -1,21 +1,23 @@
-#### Improve `with (...)` formatting (#11637 by @sosukesuzuki)
+#### Improve `@use with` formatting (#11637 by @sosukesuzuki)
 
 <!-- prettier-ignore -->
 ```scss
 // Input
 @use 'library' with (
   $black: #222,
-  $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif'
+  $border-radius: 0.1rem,
+  $font-family: 'Helvetica, sans-serif'
 );
 
 // Prettier stable
-@use 'library' with
-  ($black: #222, $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif');
+@use "library" with
+  ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");
 
 // Prettier main
 @use 'library' with (
   $black: #222,
-  $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif'
+  $border-radius: 0.1rem,
+  $font-family: 'Helvetica, sans-serif'
 );
 
 ```
diff --git a/changelog_unreleased/typescript/11515.md b/changelog_unreleased/typescript/11515.md
@@ -1,6 +1,7 @@
-#### Avoid extra offset in arrow function body when using long types (#11515 by @kachkaev and @thorn0)
+#### [HIGHLIGHT]Avoid extra offset in arrow function body when using long types (#11515 by @kachkaev and @thorn0)
 
-Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body offset. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.
+Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.<br>
+**Note**: This change may affect a large number of lines in your codebase.
 
 <!-- prettier-ignore -->
 ```tsx

diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md
@@ -1,45 +1,21 @@
-#### Support TypeScript 4.5 (#11721, #11723, #11813 by @sosukesuzuki)
+#### [HIGHLIGHT]Support TypeScript 4.5 (#11721, #11723, #11813 by @sosukesuzuki)
 
-Support new TypeScript 4.5 features.
+We’ve added support for TypeScript 4.5’s new syntax features:
 
-##### [`type` Modifiers on Import Names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#type-on-import-names)
+##### [`type` Modifiers on Import Names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names)
 
 <!-- prettier-ignore -->
 ```ts
-// Input
-import { type A } from "mod";
-
-// Prettier stable
-SyntaxError: ',' expected. (1:15)
-
-// Prettier main
+// Example
 import { type A } from "mod";
 
 ```
 
-##### [Private Field Presence Checks](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#private-field-presence-checks)
+##### [Private Field Presence Checks](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#private-field-presence-checks)
 
 <!-- prettier-ignore -->
 ```ts
-// Input
-class Foo {
-  #prop1;
-  method() {
-    return #prop1 in this;
-  }
-}
-
-// Prettier stable
-SyntaxError: Private identifiers are not allowed outside class bodies. (4:12)
-  2 |   #prop1;
-  3 |   method() {
-> 4 |     return #prop1 in this;
-    |            ^
-  5 |   }
-  6 | }
-  7 |
-
-// Prettier main
+// Example
 class Foo {
   #prop1;
   method() {
@@ -49,24 +25,15 @@ class Foo {
 
 ```
 
-##### [Import Assertions](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#import-assertions)
+##### [Import Assertions](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#import-assertions)
 
 <!-- prettier-ignore -->
 ```ts
-// Input
-import obj from "./something.json" assert { type: "json" };
-
-// Prettier stable
-SyntaxError: ';' expected. (1:36)
-> 1 | import obj from "./something.json" assert { type: "json" };
-    |                                    ^
-  2 |
-
-// Prettier main
+// Example
 import obj from "./something.json" assert { type: "json" };
 
 ```
 
 ##### Handle `.mts` and `.cts`
 
-Handle new file extensions `.mts` and `.cts`.
+Prettier will now format files with `.mts` and `.cts` extensions as TypeScript.