diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md
new file mode 100644
index 000000000000..8c7a723296e4
--- /dev/null
+++ 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
deleted file mode 100644
index cc6ed95ac4ab..000000000000
--- a/changelog_unreleased/cli/11514.md
+++ /dev/null
@@ -1,3 +0,0 @@
-#### Add new CLI option `debug-print-ast` (#11514 by @sosukesuzuki)
-
-A new `--debug-print-ast` CLI flag for debugging.
diff --git a/changelog_unreleased/html/11827.md b/changelog_unreleased/html/11827.md
index 64380852e4c7..035094bdcde0 100644
--- 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).
+
+
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/changelog_unreleased/javascript/11593.md b/changelog_unreleased/javascript/11593.md
index 2369da27af14..02b9061b26f0 100644
--- 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.
```jsx
diff --git a/changelog_unreleased/javascript/11750.md b/changelog_unreleased/javascript/11750.md
index e36df4ac284b..38164e9228ab 100644
--- 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.
+
```jsx
// Input
diff --git a/changelog_unreleased/javascript/11800.md b/changelog_unreleased/javascript/11800.md
index 8572920c855a..43ffdef4faf9 100644
--- 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)
-
-
```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
index eb7e51eb7e72..aa71cd962bab 100644
--- a/changelog_unreleased/javascript/11835.md
+++ b/changelog_unreleased/javascript/11835.md
@@ -2,7 +2,7 @@
```jsx
-// Input
+// Example
class Foo {
#brand;
static isC(obj) {
@@ -10,20 +10,4 @@ class 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
index be3d2301251d..73d8dd3df89f 100644
--- 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)
-
+The trailing comma is necessary to prevent TypeScript from treating the `` as the beginning of a JSX expression.
````md
@@ -11,11 +11,11 @@ const test = (value: T) => {};
```tsx
-const test = (value: T) => {};
+const test = (value: T) => {};
```
```tsx
-const test = (value: T) => {};
+const test = (value: T) => {};
```
````
diff --git a/changelog_unreleased/mdx/11563.md b/changelog_unreleased/mdx/11563.md
index 71fc9684d007..bd85c2f78e54 100644
--- 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.
```mdx
Input:
-
{/*A comment*/}
Prettier stable:
-
{/_A comment_/}
Prettier main:
diff --git a/changelog_unreleased/scss/11487.md b/changelog_unreleased/scss/11487.md
deleted file mode 100644
index f562cf488cc5..000000000000
--- a/changelog_unreleased/scss/11487.md
+++ /dev/null
@@ -1,13 +0,0 @@
-#### Fix wildcard syntax in `@forward` (#11482) (#11487 by @niksy)
-
-
-```scss
-// Input
-@forward "library" as btn-*;
-
-// Prettier stable
-@forward "library" as btn- *;
-
-// Prettier main
-@forward "library" as btn-*;
-```
diff --git a/changelog_unreleased/scss/11637.md b/changelog_unreleased/scss/11637.md
index 424a5534787b..b3c7b257d761 100644
--- 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)
```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
index 50edcb0967c5..b04f2c23a504 100644
--- 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.
+**Note**: This change may affect a large number of lines in your codebase.
```tsx
diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md
index 5159197bbcb0..2c079698510a 100644
--- 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)
```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)
```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)
```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.
diff --git a/website/blog/2021-11-25-2.5.0.md b/website/blog/2021-11-25-2.5.0.md
new file mode 100644
index 000000000000..db69b66a6c47
--- /dev/null
+++ b/website/blog/2021-11-25-2.5.0.md
@@ -0,0 +1,343 @@
+---
+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).
+
+
+
+## Highlights
+
+### TypeScript
+
+#### Avoid extra offset in arrow function body when using long types ([#11515](https://github.com/prettier/prettier/pull/11515) by [@kachkaev](https://github.com/kachkaev) and [@thorn0](https://github.com/thorn0))
+
+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.
+**Note**: This change may affect a large number of lines in your codebase.
+
+
+```tsx
+// Input
+const MyComponentWithLongName: React.VoidFunctionComponent = ({ x, y }) => {
+ const a = useA();
+ return {x + y + a}
;
+};
+
+// Prettier 2.2 and below
+const MyComponentWithLongName: React.VoidFunctionComponent = ({
+ x,
+ y,
+}) => {
+ const a = useA();
+ return {x + y + a}
;
+};
+
+// Prettier 2.4
+const MyComponentWithLongName: React.VoidFunctionComponent =
+ ({ x, y }) => {
+ const a = useA();
+ return {x + y + a}
;
+ };
+
+// Prettier 2.5
+const MyComponentWithLongName: React.VoidFunctionComponent<
+ MyComponentWithLongNameProps
+> = ({ x, y }) => {
+ const a = useA();
+ return {x + y + a}
;
+};
+```
+
+#### Support TypeScript 4.5 ([#11721](https://github.com/prettier/prettier/pull/11721), [#11723](https://github.com/prettier/prettier/pull/11723), [#11813](https://github.com/prettier/prettier/pull/11813) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+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/#type-on-import-names)
+
+
+```ts
+// Example
+import { type A } from "mod";
+
+```
+
+##### [Private Field Presence Checks](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#private-field-presence-checks)
+
+
+```ts
+// Example
+class Foo {
+ #prop1;
+ method() {
+ return #prop1 in this;
+ }
+}
+
+```
+
+##### [Import Assertions](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#import-assertions)
+
+
+```ts
+// Example
+import obj from "./something.json" assert { type: "json" };
+
+```
+
+##### Handle `.mts` and `.cts`
+
+Prettier will now format files with `.mts` and `.cts` extensions as TypeScript.
+
+### HTML
+
+#### Collapse HTML `class` attributes onto one line ([#11827](https://github.com/prettier/prettier/pull/11827) by [@jlongster](https://github.com/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).
+
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+### MDX
+
+#### Add support for MDX v2 comment syntax ([#11563](https://github.com/prettier/prettier/pull/11563) by [@wooorm](https://github.com/wooorm))
+
+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**: 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.
+
+
+```mdx
+Input:
+{/*A comment*/}
+
+Prettier 2.4:
+{/_A comment_/}
+
+Prettier 2.5:
+{/*A comment*/}
+```
+
+## Other Changes
+
+### JavaScript
+
+#### Fix parentheses around sequence expression as body of arrow chain ([#11593](https://github.com/prettier/prettier/pull/11593) by [@bakkot](https://github.com/bakkot))
+
+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.
+
+
+```jsx
+// Input
+const f = () => () => (0, 1);
+
+// Prettier 2.4
+const f = () => () => 0, 1;
+
+// Prettier 2.5
+const f = () => () => (0, 1);
+```
+
+#### Ignore errors for sloppy mode syntax ([#11750](https://github.com/prettier/prettier/pull/11750) by [@fisker](https://github.com/fisker), [#11778](https://github.com/prettier/prettier/pull/11778) by [@sosukesuzuki](https://github.com/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.
+
+
+```jsx
+// Input
+function foo() { var bar = 1; delete bar; }
+
+// Prettier 2.4
+SyntaxError: Deleting local variable in strict mode. (1:31)
+> 1 | function foo() { var bar = 1; delete bar; }
+ | ^
+
+// Prettier 2.5
+function foo() {
+ var bar = 1;
+ delete bar;
+}
+```
+
+#### Respect spacing for between expressions and parentheses in embedded CSS ([#11800](https://github.com/prettier/prettier/pull/11800) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+
+```jsx
+// Input
+const paragraph2 = css`
+ transform1: ${expr}(30px);
+ transform2: ${expr} (30px);
+`;
+
+// Prettier 2.4
+const paragraph2 = css`
+ transform1: ${expr} (30px);
+ transform2: ${expr} (30px);
+`;
+
+// Prettier 2.5
+const paragraph2 = css`
+ transform1: ${expr}(30px);
+ transform2: ${expr} (30px);
+`;
+
+```
+
+#### Support ES2022 class-private-fields-in syntax in `espree` parser ([#11835](https://github.com/prettier/prettier/pull/11835) by [@fisker](https://github.com/fisker))
+
+
+```jsx
+// Example
+class Foo {
+ #brand;
+ static isC(obj) {
+ return #brand in Foo;
+ }
+}
+
+```
+
+### TypeScript
+
+#### Remove unnecessary parentheses for decorators ([#11717](https://github.com/prettier/prettier/pull/11717), [#11849](https://github.com/prettier/prettier/pull/11849) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+
+```tsx
+// Input
+class Test {
+ @foo`bar`
+ test1: string = "test"
+
+ @test().x("global").y()
+ test2: string = "test";
+}
+
+// Prettier 2.4
+class Test {
+ @(foo`bar`)
+ test: string = "test"
+
+ @(test().x("global").y())
+ test2: string = "test";
+}
+
+// Prettier 2.5
+class Test {
+ @foo`bar`
+ test: string = "test"
+
+ @test().x("global").y()
+ test2: string = "test";
+}
+```
+
+### SCSS
+
+#### Improve `@use with` formatting ([#11637](https://github.com/prettier/prettier/pull/11637) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+
+```scss
+// Input
+@use 'library' with (
+ $black: #222,
+ $border-radius: 0.1rem,
+ $font-family: 'Helvetica, sans-serif'
+);
+
+// Prettier 2.4
+@use "library" with
+ ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");
+
+// Prettier 2.5
+@use 'library' with (
+ $black: #222,
+ $border-radius: 0.1rem,
+ $font-family: 'Helvetica, sans-serif'
+);
+
+```
+
+#### Fix `@forward with` formatting error ([#11683](https://github.com/prettier/prettier/pull/11683) by [@sriramarul](https://github.com/sriramarul), [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+
+```scss
+// Input
+@forward 'foo.scss' with ($components: red);
+
+// Prettier 2.4
+TypeError: Cannot read properties of undefined (reading 'type')
+
+// Prettier 2.5
+@forward "foo.scss" with (
+ $components: red
+);
+
+```
+
+### Ember / Handlebars
+
+#### Uses the opposite quote type for quotes inside mustache statements in attributes ([#11524](https://github.com/prettier/prettier/pull/11524) by [@bmaehr](https://github.com/bmaehr))
+
+
+```hbs
+{{!-- Input --}}
+
+
+{{!-- Prettier 2.5 --}}
+
+
+{{!-- Prettier 2.4 --}}
+
+
+```
+
+### Markdown
+
+#### Keep trailing commas for type parameters in embedded TSX ([#11685](https://github.com/prettier/prettier/pull/11685) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+The trailing comma is necessary to prevent TypeScript from treating the `` as the beginning of a JSX expression.
+
+
+````md
+
+```tsx
+const test = (value: T) => {};
+```
+
+
+```tsx
+const test = (value: T) => {};
+```
+
+
+```tsx
+const test = (value: T) => {};
+```
+````