From 6f62918f8a43ac540502b7a3d682d4a286b5a351 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Wed, 17 Nov 2021 16:59:35 +0900 Subject: [PATCH 01/42] Mark highlights --- changelog_unreleased/mdx/11563.md | 11 ++++------- changelog_unreleased/typescript/11721.md | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/changelog_unreleased/mdx/11563.md b/changelog_unreleased/mdx/11563.md index 71fc9684d007..e684acfc0a2c 100644 --- a/changelog_unreleased/mdx/11563.md +++ b/changelog_unreleased/mdx/11563.md @@ -1,12 +1,9 @@ -#### Add support for MDX 2 comments (#11563 by @wooorm) +#### [HIGHLIGHT]Add support for MDX 2 comments (#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 2 comments (JavaScript-style comments) in addition to existing MDX 1 comments (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 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. ```mdx diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md index 5159197bbcb0..88bcb6f96a76 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -1,4 +1,4 @@ -#### 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. From a7ce132cda7e68e219e3af349dd7af9179f8d33f Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Wed, 17 Nov 2021 16:59:45 +0900 Subject: [PATCH 02/42] Update intro --- changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md | 10 ++++++---- changelog_unreleased/blog-post-intro.md | 9 +++++++++ 2 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 changelog_unreleased/blog-post-intro.md diff --git a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md index 726b44873a4c..f98f4343061f 100644 --- a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md +++ b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md @@ -1,7 +1,9 @@ --- -author: "🚧" -authorURL: "https://github.com/🚧" -title: "Prettier 🚧" +author: "Sosuke Suzuki (@sosukesuzuki)" +authorURL: "https://github.com/sosukesuzuki" +title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -🚧 Write an introduction here. +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! + +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/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md new file mode 100644 index 000000000000..3f8c1666a474 --- /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 2 comments!" +--- + +This release adds support for [TypeScript 4.5]() new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! + +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). From 936a8e014d0654001b2d30fcc25337849962173e Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Wed, 17 Nov 2021 16:59:50 +0900 Subject: [PATCH 03/42] Draft --- website/blog/2021-11-17-2.5.0.md | 337 +++++++++++++++++++++++++++++++ 1 file changed, 337 insertions(+) create mode 100644 website/blog/2021-11-17-2.5.0.md diff --git a/website/blog/2021-11-17-2.5.0.md b/website/blog/2021-11-17-2.5.0.md new file mode 100644 index 000000000000..4b0794c18abc --- /dev/null +++ b/website/blog/2021-11-17-2.5.0.md @@ -0,0 +1,337 @@ +--- +author: "Sosuke Suzuki (@sosukesuzuki)" +authorURL: "https://github.com/sosukesuzuki" +title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" +--- + +This release adds support for [TypeScript 4.5]() new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! + +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 + +#### 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)) + +Support new TypeScript 4.5 features. + +##### [`type` Modifiers on Import Names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#type-on-import-names) + + +```ts +// Input +import { type A } from "mod"; + +// Prettier 2.4 +SyntaxError: ',' expected. (1:15) + +// Prettier 2.5 +import { type A } from "mod"; + +``` + +##### [Private Field Presence Checks](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#private-field-presence-checks) + + +```ts +// Input +class Foo { + #prop1; + method() { + return #prop1 in this; + } +} + +// Prettier 2.4 +SyntaxError: Private identifiers are not allowed outside class bodies. (4:12) + 2 | #prop1; + 3 | method() { +> 4 | return #prop1 in this; + | ^ + 5 | } + 6 | } + 7 | + +// Prettier 2.5 +class Foo { + #prop1; + method() { + return #prop1 in this; + } +} + +``` + +##### [Import Assertions](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#import-assertions) + + +```ts +// Input +import obj from "./something.json" assert { type: "json" }; + +// Prettier 2.4 +SyntaxError: ';' expected. (1:36) +> 1 | import obj from "./something.json" assert { type: "json" }; + | ^ + 2 | + +// Prettier 2.5 +import obj from "./something.json" assert { type: "json" }; + +``` + +##### Handle `.mts` and `.cts` + +Handle new file extensions `.mts` and `.cts`. + +### MDX + +#### Add support for MDX 2 comments ([#11563](https://github.com/prettier/prettier/pull/11563) by [@wooorm](https://github.com/wooorm)) + +This adds basic support for MDX 2 comments (JavaScript-style comments) in addition to existing MDX 1 comments (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. + + +```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 were dropped for chained arrows, causing incorrect code to be generated. Now they are included. + + +```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)) + + +```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` + transform: ${expr}(30px); +`; + +// Prettier 2.4 +const paragraph2 = css` + transform: ${expr} (30px); +`; + +// Prettier 2.5 +const paragraph2 = css` + transform: ${expr}(30px); +`; + +``` + +### 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 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. + + +```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}
; +}; +``` + +#### Fix formatting for tagged template decorators ([#11717](https://github.com/prettier/prettier/pull/11717) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + + +```tsx +// Input +class Test { + @foo`bar` + test: string = "test" +} + +// Prettier 2.4 +class Test { + @(foo`bar`) + test: string = "test" +} + +// Prettier 2.5 +class Test { + @foo`bar` + test: string = "test" +} +``` + +### SCSS + +#### Fix wildcard syntax in `@forward` ([#11482](https://github.com/prettier/prettier/pull/11482)) ([#11487](https://github.com/prettier/prettier/pull/11487) by [@niksy](https://github.com/niksy)) + + +```scss +// Input +@forward "library" as btn-*; + +// Prettier 2.4 +@forward "library" as btn- *; + +// Prettier 2.5 +@forward "library" as btn-*; +``` + +#### Improve `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)) + + + + +````md + +```tsx +const test = (value: T) => {}; +``` + + +```tsx +const test = (value: T) => {}; +``` + + +```tsx +const test = (value: T) => {}; +``` +```` + +### CLI + +#### Add new CLI option `debug-print-ast` ([#11514](https://github.com/prettier/prettier/pull/11514) by [@sosukesuzuki](https://github.com/sosukesuzuki)) + +A new `--debug-print-ast` CLI flag for debugging. From 293f68c12e9b0412cc8bb46cd8e9bf8e8886307c Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 16:14:08 +0900 Subject: [PATCH 04/42] Update changelog --- changelog_unreleased/markdown/11685.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/changelog_unreleased/markdown/11685.md b/changelog_unreleased/markdown/11685.md index be3d2301251d..bdf49b77e604 100644 --- a/changelog_unreleased/markdown/11685.md +++ b/changelog_unreleased/markdown/11685.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) => {}; ``` ```` From f78efa58fc2c4ed305d1d9218b292273d3f17cc7 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 16:18:23 +0900 Subject: [PATCH 05/42] Update changelog --- changelog_unreleased/html/11827.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/changelog_unreleased/html/11827.md b/changelog_unreleased/html/11827.md index 64380852e4c7..d3b744409ef5 100644 --- a/changelog_unreleased/html/11827.md +++ b/changelog_unreleased/html/11827.md @@ -1 +1,26 @@ #### Reverts #7865, keeping class names on the same line (#11827 by @jlongster) + + +```html + +
+ + +
+ + +
+ +``` \ No newline at end of file From eec36bd81e1a22d242f3244c2625461f6a242e91 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 16:18:41 +0900 Subject: [PATCH 06/42] Regenerate draft --- ...021-11-17-2.5.0.md => 2021-11-18-2.5.0.md} | 33 +++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) rename website/blog/{2021-11-17-2.5.0.md => 2021-11-18-2.5.0.md} (91%) diff --git a/website/blog/2021-11-17-2.5.0.md b/website/blog/2021-11-18-2.5.0.md similarity index 91% rename from website/blog/2021-11-17-2.5.0.md rename to website/blog/2021-11-18-2.5.0.md index 4b0794c18abc..86fd6166a960 100644 --- a/website/blog/2021-11-17-2.5.0.md +++ b/website/blog/2021-11-18-2.5.0.md @@ -289,6 +289,35 @@ TypeError: Cannot read properties of undefined (reading 'type') ``` +### HTML + +#### Reverts [#7865](https://github.com/prettier/prettier/pull/7865), keeping class names on the same line ([#11827](https://github.com/prettier/prettier/pull/11827) by [@jlongster](https://github.com/jlongster)) + + +```html + +
+ + +
+ + +
+ +``` + ### 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)) @@ -321,12 +350,12 @@ const test = (value: T) => {}; ```tsx -const test = (value: T) => {}; +const test = (value: T) => {}; ``` ```tsx -const test = (value: T) => {}; +const test = (value: T) => {}; ``` ```` From 7c57fb7547ab3790ff75642e6987114cf72df24d Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 16:23:20 +0900 Subject: [PATCH 07/42] Update TS 4.5 blog URL --- changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md | 2 +- changelog_unreleased/typescript/11721.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md index f98f4343061f..b5eb0321fea3 100644 --- a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md +++ b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md @@ -4,6 +4,6 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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/typescript/11721.md b/changelog_unreleased/typescript/11721.md index 88bcb6f96a76..164fab3ec425 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -2,7 +2,7 @@ Support new TypeScript 4.5 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 @@ -17,7 +17,7 @@ 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 @@ -49,7 +49,7 @@ 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 From f9005f435cd00237ce7249216d3da5a10d813a8e Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 16:26:02 +0900 Subject: [PATCH 08/42] Regenerate draft --- changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md | 2 +- changelog_unreleased/blog-post-intro.md | 2 +- website/blog/2021-11-18-2.5.0.md | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md index b5eb0321fea3..f98f4343061f 100644 --- a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md +++ b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md @@ -4,6 +4,6 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md index 3f8c1666a474..f98f4343061f 100644 --- a/changelog_unreleased/blog-post-intro.md +++ b/changelog_unreleased/blog-post-intro.md @@ -4,6 +4,6 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5]() new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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/website/blog/2021-11-18-2.5.0.md b/website/blog/2021-11-18-2.5.0.md index 86fd6166a960..46255a0fa868 100644 --- a/website/blog/2021-11-18-2.5.0.md +++ b/website/blog/2021-11-18-2.5.0.md @@ -4,7 +4,7 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5]() new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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). @@ -18,7 +18,7 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us Support new TypeScript 4.5 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 @@ -33,7 +33,7 @@ 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 @@ -65,7 +65,7 @@ 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 From 3f9814c69b724ec104d67f16455b85bd069e7b1b Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 16:35:42 +0900 Subject: [PATCH 09/42] Fix by prettier --- changelog_unreleased/html/11827.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/html/11827.md b/changelog_unreleased/html/11827.md index d3b744409ef5..9ccb3ee7a6c3 100644 --- a/changelog_unreleased/html/11827.md +++ b/changelog_unreleased/html/11827.md @@ -23,4 +23,4 @@ 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" >
-``` \ No newline at end of file +``` From 3be34546c68ab24518fd42e2b82be01cb009bbfd Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 18 Nov 2021 18:13:02 +0900 Subject: [PATCH 10/42] Fix --- changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md | 2 +- changelog_unreleased/blog-post-intro.md | 2 +- website/blog/2021-11-18-2.5.0.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md index f98f4343061f..b5eb0321fea3 100644 --- a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md +++ b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md @@ -4,6 +4,6 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md index f98f4343061f..b5eb0321fea3 100644 --- a/changelog_unreleased/blog-post-intro.md +++ b/changelog_unreleased/blog-post-intro.md @@ -4,6 +4,6 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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/website/blog/2021-11-18-2.5.0.md b/website/blog/2021-11-18-2.5.0.md index 46255a0fa868..8ac9750b010e 100644 --- a/website/blog/2021-11-18-2.5.0.md +++ b/website/blog/2021-11-18-2.5.0.md @@ -4,7 +4,7 @@ authorURL: "https://github.com/sosukesuzuki" title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" --- -This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! 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). From ba8db16c56aaae736c210fed5dc98696a072c863 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Fri, 19 Nov 2021 02:09:21 +0900 Subject: [PATCH 11/42] Remove changelogs released already --- changelog_unreleased/cli/11514.md | 3 --- changelog_unreleased/scss/11487.md | 13 ------------- website/blog/2021-11-18-2.5.0.md | 20 -------------------- 3 files changed, 36 deletions(-) delete mode 100644 changelog_unreleased/cli/11514.md delete mode 100644 changelog_unreleased/scss/11487.md 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/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/website/blog/2021-11-18-2.5.0.md b/website/blog/2021-11-18-2.5.0.md index 8ac9750b010e..01468f4ac6c2 100644 --- a/website/blog/2021-11-18-2.5.0.md +++ b/website/blog/2021-11-18-2.5.0.md @@ -236,20 +236,6 @@ class Test { ### SCSS -#### Fix wildcard syntax in `@forward` ([#11482](https://github.com/prettier/prettier/pull/11482)) ([#11487](https://github.com/prettier/prettier/pull/11487) by [@niksy](https://github.com/niksy)) - - -```scss -// Input -@forward "library" as btn-*; - -// Prettier 2.4 -@forward "library" as btn- *; - -// Prettier 2.5 -@forward "library" as btn-*; -``` - #### Improve `with (...)` formatting ([#11637](https://github.com/prettier/prettier/pull/11637) by [@sosukesuzuki](https://github.com/sosukesuzuki)) @@ -358,9 +344,3 @@ const test = (value: T) => {}; const test = (value: T) => {}; ``` ```` - -### CLI - -#### Add new CLI option `debug-print-ast` ([#11514](https://github.com/prettier/prettier/pull/11514) by [@sosukesuzuki](https://github.com/sosukesuzuki)) - -A new `--debug-print-ast` CLI flag for debugging. From cccaed96e78893a456d1b1bed5a5be90fdbf30d9 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Fri, 19 Nov 2021 02:10:41 +0900 Subject: [PATCH 12/42] Address review --- changelog_unreleased/mdx/11563.md | 2 -- website/blog/2021-11-18-2.5.0.md | 2 -- 2 files changed, 4 deletions(-) diff --git a/changelog_unreleased/mdx/11563.md b/changelog_unreleased/mdx/11563.md index e684acfc0a2c..0a6f9c9196bb 100644 --- a/changelog_unreleased/mdx/11563.md +++ b/changelog_unreleased/mdx/11563.md @@ -8,11 +8,9 @@ This currently only supports a single comment on one line so that `{/* prettier- ```mdx Input: - {/*A comment*/} Prettier stable: - {/_A comment_/} Prettier main: diff --git a/website/blog/2021-11-18-2.5.0.md b/website/blog/2021-11-18-2.5.0.md index 01468f4ac6c2..efcde701479d 100644 --- a/website/blog/2021-11-18-2.5.0.md +++ b/website/blog/2021-11-18-2.5.0.md @@ -99,11 +99,9 @@ This currently only supports a single comment on one line so that `{/* prettier- ```mdx Input: - {/*A comment*/} Prettier 2.4: - {/_A comment_/} Prettier 2.5: From ed8a27a0ccd23077b80c467126bb0a283e28fc13 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Sun, 21 Nov 2021 15:47:39 +0900 Subject: [PATCH 13/42] Update --- changelog_unreleased/typescript/11515.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/changelog_unreleased/typescript/11515.md b/changelog_unreleased/typescript/11515.md index 50edcb0967c5..ba7ae6cdd78a 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. +However, this change can make a big difference from 2.4.1. Please be careful. ```tsx From dea9688941b70aef260d57b3561395e46ba85cdc Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Sun, 21 Nov 2021 15:50:58 +0900 Subject: [PATCH 14/42] Regenerate draft --- ...021-11-18-2.5.0.md => 2021-11-21-2.5.0.md} | 75 ++++++++++--------- 1 file changed, 38 insertions(+), 37 deletions(-) rename website/blog/{2021-11-18-2.5.0.md => 2021-11-21-2.5.0.md} (99%) diff --git a/website/blog/2021-11-18-2.5.0.md b/website/blog/2021-11-21-2.5.0.md similarity index 99% rename from website/blog/2021-11-18-2.5.0.md rename to website/blog/2021-11-21-2.5.0.md index efcde701479d..657923745558 100644 --- a/website/blog/2021-11-18-2.5.0.md +++ b/website/blog/2021-11-21-2.5.0.md @@ -14,6 +14,44 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us ### 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 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. +However, this change can make a big difference from 2.4.1. Please be careful. + + +```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)) Support new TypeScript 4.5 features. @@ -172,43 +210,6 @@ const paragraph2 = css` ### 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 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. - - -```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}
; -}; -``` - #### Fix formatting for tagged template decorators ([#11717](https://github.com/prettier/prettier/pull/11717) by [@sosukesuzuki](https://github.com/sosukesuzuki)) From e9226356f85963845930702331690ea59e6b75dc Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Sun, 21 Nov 2021 15:51:54 +0900 Subject: [PATCH 15/42] Regenerate draft --- website/blog/2021-11-21-2.5.0.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/website/blog/2021-11-21-2.5.0.md b/website/blog/2021-11-21-2.5.0.md index 657923745558..e51f8e82ec9f 100644 --- a/website/blog/2021-11-21-2.5.0.md +++ b/website/blog/2021-11-21-2.5.0.md @@ -208,6 +208,36 @@ const paragraph2 = css` ``` +#### 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 +// Input +class Foo { + #brand; + static isC(obj) { + return #brand in Foo; + } +} + +// Prettier 2.4 +SyntaxError: Unexpected token #brand (4:12) + 2 | #brand; + 3 | static isC(obj) { +> 4 | return #brand in Foo; + | ^ + 5 | } + 6 | } + +// Prettier 2.5 +class Foo { + #brand; + static isC(obj) { + return #brand in Foo; + } +} +``` + ### TypeScript #### Fix formatting for tagged template decorators ([#11717](https://github.com/prettier/prettier/pull/11717) by [@sosukesuzuki](https://github.com/sosukesuzuki)) From 600e060ca138a55f775804ea1ad95a0dcc11d3f7 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Sun, 21 Nov 2021 15:55:19 +0900 Subject: [PATCH 16/42] Regenerate --- website/blog/2021-11-21-2.5.0.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/website/blog/2021-11-21-2.5.0.md b/website/blog/2021-11-21-2.5.0.md index e51f8e82ec9f..d32560a26e04 100644 --- a/website/blog/2021-11-21-2.5.0.md +++ b/website/blog/2021-11-21-2.5.0.md @@ -240,26 +240,35 @@ class Foo { ### TypeScript -#### Fix formatting for tagged template decorators ([#11717](https://github.com/prettier/prettier/pull/11717) by [@sosukesuzuki](https://github.com/sosukesuzuki)) +#### 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` - test: string = "test" + 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"; } ``` From 28aebb77e3c2d63f95738ceb26384259210aaa8d Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Mon, 22 Nov 2021 12:28:47 +0900 Subject: [PATCH 17/42] Update changelog_unreleased/typescript/11515.md Co-authored-by: Jed Fox --- changelog_unreleased/typescript/11515.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/typescript/11515.md b/changelog_unreleased/typescript/11515.md index ba7ae6cdd78a..5f94688dfccc 100644 --- a/changelog_unreleased/typescript/11515.md +++ b/changelog_unreleased/typescript/11515.md @@ -1,7 +1,7 @@ #### [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. -However, this change can make a big difference from 2.4.1. Please be careful. +**Note**: This change may affect a large number of lines in your codebase. ```tsx From 3a489e9060976e200b341ebe51fb9ddff3fd984c Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Mon, 22 Nov 2021 12:28:57 +0900 Subject: [PATCH 18/42] Update changelog_unreleased/typescript/11721.md Co-authored-by: Jed Fox --- changelog_unreleased/typescript/11721.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md index 164fab3ec425..bf9e32adb6e1 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -1,6 +1,6 @@ #### [HIGHLIGHT]Support TypeScript 4.5 (#11721, #11723, #11813 by @sosukesuzuki) -Support new TypeScript 4.5 features. +We’ve added support for new syntax features in TypeScript 4.5: ##### [`type` Modifiers on Import Names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names) From 175de54257fcc239ebb53acc0bac9fc2d5ef1d93 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Mon, 22 Nov 2021 12:29:44 +0900 Subject: [PATCH 19/42] Update changelog_unreleased/mdx/11563.md Co-authored-by: Jed Fox --- changelog_unreleased/mdx/11563.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/mdx/11563.md b/changelog_unreleased/mdx/11563.md index 0a6f9c9196bb..43e21722d5d1 100644 --- a/changelog_unreleased/mdx/11563.md +++ b/changelog_unreleased/mdx/11563.md @@ -1,6 +1,6 @@ #### [HIGHLIGHT]Add support for MDX 2 comments (#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. From a2ba4ffca581f657407091a4b48e6dfcf8b63600 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Mon, 22 Nov 2021 12:30:41 +0900 Subject: [PATCH 20/42] Update changelog_unreleased/mdx/11563.md Co-authored-by: Jed Fox --- changelog_unreleased/mdx/11563.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/changelog_unreleased/mdx/11563.md b/changelog_unreleased/mdx/11563.md index 43e21722d5d1..88d165966d81 100644 --- a/changelog_unreleased/mdx/11563.md +++ b/changelog_unreleased/mdx/11563.md @@ -2,8 +2,7 @@ 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 From e0dc2ad95c6e4cca8b87c896097fda9cc7454c6b Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Mon, 22 Nov 2021 12:30:58 +0900 Subject: [PATCH 21/42] Update website/blog/2021-11-21-2.5.0.md Co-authored-by: Jed Fox --- website/blog/2021-11-21-2.5.0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/blog/2021-11-21-2.5.0.md b/website/blog/2021-11-21-2.5.0.md index d32560a26e04..59e92eff5425 100644 --- a/website/blog/2021-11-21-2.5.0.md +++ b/website/blog/2021-11-21-2.5.0.md @@ -152,7 +152,7 @@ Prettier 2.5: #### 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 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 From 3824a3432163d0b6a444f6f76f91a2b294d37de5 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Mon, 22 Nov 2021 12:32:53 +0900 Subject: [PATCH 22/42] Update website/blog/2021-11-21-2.5.0.md Co-authored-by: Jed Fox --- website/blog/2021-11-21-2.5.0.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/blog/2021-11-21-2.5.0.md b/website/blog/2021-11-21-2.5.0.md index 59e92eff5425..42140fd3c5d2 100644 --- a/website/blog/2021-11-21-2.5.0.md +++ b/website/blog/2021-11-21-2.5.0.md @@ -168,6 +168,8 @@ 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 From a79a8596dc962b798eeff18e9aefc778da62e62d Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:33:53 +0900 Subject: [PATCH 23/42] Regenerate --- .../{2021-11-21-2.5.0.md => 2021-11-22-2.5.0.md} | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) rename website/blog/{2021-11-21-2.5.0.md => 2021-11-22-2.5.0.md} (90%) diff --git a/website/blog/2021-11-21-2.5.0.md b/website/blog/2021-11-22-2.5.0.md similarity index 90% rename from website/blog/2021-11-21-2.5.0.md rename to website/blog/2021-11-22-2.5.0.md index 42140fd3c5d2..0e9bf51c3db7 100644 --- a/website/blog/2021-11-21-2.5.0.md +++ b/website/blog/2021-11-22-2.5.0.md @@ -17,7 +17,7 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us #### 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 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. -However, this change can make a big difference from 2.4.1. Please be careful. +**Note**: This change may affect a large number of lines in your codebase. ```tsx @@ -54,7 +54,7 @@ const MyComponentWithLongName: React.VoidFunctionComponent< #### 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)) -Support new TypeScript 4.5 features. +We’ve added support for new syntax features in TypeScript 4.5: ##### [`type` Modifiers on Import Names](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#type-on-import-names) @@ -129,10 +129,9 @@ Handle new file extensions `.mts` and `.cts`. #### Add support for MDX 2 comments ([#11563](https://github.com/prettier/prettier/pull/11563) by [@wooorm](https://github.com/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 @@ -152,7 +151,7 @@ Prettier 2.5: #### 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. +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. ```jsx @@ -168,8 +167,6 @@ 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 From 2e3d3e983d342da0cdb85a03e3b251e3d35f8f7a Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:37:17 +0900 Subject: [PATCH 24/42] Address reviews --- changelog_unreleased/javascript/11593.md | 2 +- changelog_unreleased/javascript/11750.md | 2 ++ changelog_unreleased/javascript/11800.md | 15 ++++++++------- changelog_unreleased/markdown/11685.md | 2 +- changelog_unreleased/scss/11637.md | 2 +- 5 files changed, 13 insertions(+), 10 deletions(-) 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/markdown/11685.md b/changelog_unreleased/markdown/11685.md index bdf49b77e604..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 diff --git a/changelog_unreleased/scss/11637.md b/changelog_unreleased/scss/11637.md index 424a5534787b..01ca640b413b 100644 --- a/changelog_unreleased/scss/11637.md +++ b/changelog_unreleased/scss/11637.md @@ -1,4 +1,4 @@ -#### Improve `with (...)` formatting (#11637 by @sosukesuzuki) +#### Improve `@use with` formatting (#11637 by @sosukesuzuki) ```scss From 318bfc7726630161d1fff438effab9a3772d4e6f Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:37:26 +0900 Subject: [PATCH 25/42] Regenerate --- website/blog/2021-11-22-2.5.0.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/website/blog/2021-11-22-2.5.0.md b/website/blog/2021-11-22-2.5.0.md index 0e9bf51c3db7..81f4f9b5f288 100644 --- a/website/blog/2021-11-22-2.5.0.md +++ b/website/blog/2021-11-22-2.5.0.md @@ -151,7 +151,7 @@ Prettier 2.5: #### 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 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 @@ -167,6 +167,8 @@ 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 @@ -186,23 +188,24 @@ function foo() { #### 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` - transform: ${expr}(30px); + transform1: ${expr}(30px); + transform2: ${expr} (30px); `; // Prettier 2.4 const paragraph2 = css` - transform: ${expr} (30px); + transform1: ${expr} (30px); + transform2: ${expr} (30px); `; // Prettier 2.5 const paragraph2 = css` - transform: ${expr}(30px); + transform1: ${expr}(30px); + transform2: ${expr} (30px); `; ``` @@ -273,7 +276,7 @@ class Test { ### SCSS -#### Improve `with (...)` formatting ([#11637](https://github.com/prettier/prettier/pull/11637) by [@sosukesuzuki](https://github.com/sosukesuzuki)) +#### Improve `@use with` formatting ([#11637](https://github.com/prettier/prettier/pull/11637) by [@sosukesuzuki](https://github.com/sosukesuzuki)) ```scss @@ -362,7 +365,7 @@ TypeError: Cannot read properties of undefined (reading 'type') #### 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 From b3bc15cc55a715d47831ad73bf701c1d81e3b874 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:40:36 +0900 Subject: [PATCH 26/42] Use examples --- changelog_unreleased/javascript/11835.md | 18 +---------- changelog_unreleased/typescript/11721.md | 39 ++---------------------- 2 files changed, 4 insertions(+), 53 deletions(-) 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/typescript/11721.md b/changelog_unreleased/typescript/11721.md index bf9e32adb6e1..fff0309a8335 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -6,13 +6,7 @@ We’ve added support for new syntax features in TypeScript 4.5: ```ts -// Input -import { type A } from "mod"; - -// Prettier stable -SyntaxError: ',' expected. (1:15) - -// Prettier main +// Example import { type A } from "mod"; ``` @@ -21,25 +15,7 @@ import { type A } from "mod"; ```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() { @@ -53,16 +29,7 @@ class Foo { ```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" }; ``` From 0b34c9f3619d66c38d4943e03b0b9828ef74b2e6 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:40:50 +0900 Subject: [PATCH 27/42] Regenerate --- website/blog/2021-11-22-2.5.0.md | 57 +++----------------------------- 1 file changed, 4 insertions(+), 53 deletions(-) diff --git a/website/blog/2021-11-22-2.5.0.md b/website/blog/2021-11-22-2.5.0.md index 81f4f9b5f288..dc7ca2d0a23f 100644 --- a/website/blog/2021-11-22-2.5.0.md +++ b/website/blog/2021-11-22-2.5.0.md @@ -60,13 +60,7 @@ We’ve added support for new syntax features in TypeScript 4.5: ```ts -// Input -import { type A } from "mod"; - -// Prettier 2.4 -SyntaxError: ',' expected. (1:15) - -// Prettier 2.5 +// Example import { type A } from "mod"; ``` @@ -75,25 +69,7 @@ import { type A } from "mod"; ```ts -// Input -class Foo { - #prop1; - method() { - return #prop1 in this; - } -} - -// Prettier 2.4 -SyntaxError: Private identifiers are not allowed outside class bodies. (4:12) - 2 | #prop1; - 3 | method() { -> 4 | return #prop1 in this; - | ^ - 5 | } - 6 | } - 7 | - -// Prettier 2.5 +// Example class Foo { #prop1; method() { @@ -107,16 +83,7 @@ class Foo { ```ts -// Input -import obj from "./something.json" assert { type: "json" }; - -// Prettier 2.4 -SyntaxError: ';' expected. (1:36) -> 1 | import obj from "./something.json" assert { type: "json" }; - | ^ - 2 | - -// Prettier 2.5 +// Example import obj from "./something.json" assert { type: "json" }; ``` @@ -214,7 +181,7 @@ const paragraph2 = css` ```jsx -// Input +// Example class Foo { #brand; static isC(obj) { @@ -222,22 +189,6 @@ class Foo { } } -// Prettier 2.4 -SyntaxError: Unexpected token #brand (4:12) - 2 | #brand; - 3 | static isC(obj) { -> 4 | return #brand in Foo; - | ^ - 5 | } - 6 | } - -// Prettier 2.5 -class Foo { - #brand; - static isC(obj) { - return #brand in Foo; - } -} ``` ### TypeScript From f0a092ca05f0dfc19a2f6cee76448a59a14029a4 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:45:22 +0900 Subject: [PATCH 28/42] Address review --- changelog_unreleased/html/11827.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/changelog_unreleased/html/11827.md b/changelog_unreleased/html/11827.md index 9ccb3ee7a6c3..035094bdcde0 100644 --- a/changelog_unreleased/html/11827.md +++ b/changelog_unreleased/html/11827.md @@ -1,4 +1,8 @@ -#### 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 From 88c2dfd9bb9deaa802499f9b897c6991959fc29b Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:45:56 +0900 Subject: [PATCH 29/42] Renegrate --- website/blog/2021-11-22-2.5.0.md | 62 +++++++++++++++++--------------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/website/blog/2021-11-22-2.5.0.md b/website/blog/2021-11-22-2.5.0.md index dc7ca2d0a23f..081a7118846b 100644 --- a/website/blog/2021-11-22-2.5.0.md +++ b/website/blog/2021-11-22-2.5.0.md @@ -92,6 +92,39 @@ import obj from "./something.json" assert { type: "json" }; Handle new file extensions `.mts` and `.cts`. +### 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 2 comments ([#11563](https://github.com/prettier/prettier/pull/11563) by [@wooorm](https://github.com/wooorm)) @@ -266,35 +299,6 @@ TypeError: Cannot read properties of undefined (reading 'type') ``` -### HTML - -#### Reverts [#7865](https://github.com/prettier/prettier/pull/7865), keeping class names on the same line ([#11827](https://github.com/prettier/prettier/pull/11827) by [@jlongster](https://github.com/jlongster)) - - -```html - -
- - -
- - -
- -``` - ### 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)) From 756100dbe504126a9fe4cd957ea6a65d1222abdf Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:47:13 +0900 Subject: [PATCH 30/42] Address review --- changelog_unreleased/typescript/11721.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md index fff0309a8335..7ed8bb88fafe 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -36,4 +36,4 @@ 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. From 20e5d2455a90d56b3f752289c885a42f76807f64 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:47:27 +0900 Subject: [PATCH 31/42] Regenerate --- website/blog/2021-11-22-2.5.0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/blog/2021-11-22-2.5.0.md b/website/blog/2021-11-22-2.5.0.md index 081a7118846b..f930e35b9e6b 100644 --- a/website/blog/2021-11-22-2.5.0.md +++ b/website/blog/2021-11-22-2.5.0.md @@ -90,7 +90,7 @@ 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. ### HTML From 2d5f96673bb88ce2343ca0a5cbea03224f853288 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Mon, 22 Nov 2021 12:50:02 +0900 Subject: [PATCH 32/42] MDX 2 comments => MDX v2 comment syntax --- changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md | 4 ++-- changelog_unreleased/blog-post-intro.md | 4 ++-- changelog_unreleased/mdx/11563.md | 2 +- website/blog/2021-11-22-2.5.0.md | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md index b5eb0321fea3..8f40b23aef56 100644 --- a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md +++ b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md @@ -1,9 +1,9 @@ --- author: "Sosuke Suzuki (@sosukesuzuki)" authorURL: "https://github.com/sosukesuzuki" -title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" +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/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) 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/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md index b5eb0321fea3..8f40b23aef56 100644 --- a/changelog_unreleased/blog-post-intro.md +++ b/changelog_unreleased/blog-post-intro.md @@ -1,9 +1,9 @@ --- author: "Sosuke Suzuki (@sosukesuzuki)" authorURL: "https://github.com/sosukesuzuki" -title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" +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/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) 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/mdx/11563.md b/changelog_unreleased/mdx/11563.md index 88d165966d81..bd85c2f78e54 100644 --- a/changelog_unreleased/mdx/11563.md +++ b/changelog_unreleased/mdx/11563.md @@ -1,4 +1,4 @@ -#### [HIGHLIGHT]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 v2 comment syntax (JavaScript-style comments) in addition to the existing support MDX v1 comment syntax (HTML-style comments). diff --git a/website/blog/2021-11-22-2.5.0.md b/website/blog/2021-11-22-2.5.0.md index f930e35b9e6b..2af4203bc47a 100644 --- a/website/blog/2021-11-22-2.5.0.md +++ b/website/blog/2021-11-22-2.5.0.md @@ -1,10 +1,10 @@ --- author: "Sosuke Suzuki (@sosukesuzuki)" authorURL: "https://github.com/sosukesuzuki" -title: "Prettier 2.5: TypeScript 4.5 and MDX 2 comments!" +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/) new syntax and [MDX 2](https://mdxjs.com/blog/v2/) comments! +This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) 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). @@ -127,7 +127,7 @@ While this was intended to be useful for users of CSS libraries like Tailwind th ### MDX -#### Add support for MDX 2 comments ([#11563](https://github.com/prettier/prettier/pull/11563) by [@wooorm](https://github.com/wooorm)) +#### 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). From af3304cf77bda9d5170ba9a9275a113034d78a62 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Tue, 23 Nov 2021 17:14:11 +0900 Subject: [PATCH 33/42] Fix --- changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md index 8f40b23aef56..726b44873a4c 100644 --- a/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md +++ b/changelog_unreleased/BLOG_POST_INTRO_TEMPLATE.md @@ -1,9 +1,7 @@ --- -author: "Sosuke Suzuki (@sosukesuzuki)" -authorURL: "https://github.com/sosukesuzuki" -title: "Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax!" +author: "🚧" +authorURL: "https://github.com/🚧" +title: "Prettier 🚧" --- -This release adds support for [TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) 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). +🚧 Write an introduction here. From 0e63efe11b4f90233d384dd5e255fcf57a64e2a8 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Tue, 23 Nov 2021 17:14:21 +0900 Subject: [PATCH 34/42] Update changelog_unreleased/blog-post-intro.md Co-authored-by: Lucas Azzola --- changelog_unreleased/blog-post-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md index 8f40b23aef56..8c7a723296e4 100644 --- a/changelog_unreleased/blog-post-intro.md +++ b/changelog_unreleased/blog-post-intro.md @@ -4,6 +4,6 @@ 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/) new syntax and [MDX v2](https://mdxjs.com/blog/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). From 2669005d589561a13fd93a1e5661a98b313f3016 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Tue, 23 Nov 2021 17:14:35 +0900 Subject: [PATCH 35/42] Update changelog_unreleased/typescript/11721.md Co-authored-by: Lucas Azzola --- changelog_unreleased/typescript/11721.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md index 7ed8bb88fafe..d7f084ea0e5c 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -1,6 +1,6 @@ #### [HIGHLIGHT]Support TypeScript 4.5 (#11721, #11723, #11813 by @sosukesuzuki) -We’ve added support for new syntax features in TypeScript 4.5: +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) From 5b9d79d6bca5c00e38a5d1ae6564c4611888ff19 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Tue, 23 Nov 2021 17:15:20 +0900 Subject: [PATCH 36/42] Regenerate --- website/blog/{2021-11-22-2.5.0.md => 2021-11-23-2.5.0.md} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename website/blog/{2021-11-22-2.5.0.md => 2021-11-23-2.5.0.md} (98%) diff --git a/website/blog/2021-11-22-2.5.0.md b/website/blog/2021-11-23-2.5.0.md similarity index 98% rename from website/blog/2021-11-22-2.5.0.md rename to website/blog/2021-11-23-2.5.0.md index 2af4203bc47a..b234a40de872 100644 --- a/website/blog/2021-11-22-2.5.0.md +++ b/website/blog/2021-11-23-2.5.0.md @@ -4,7 +4,7 @@ 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/) new syntax and [MDX v2](https://mdxjs.com/blog/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). @@ -54,7 +54,7 @@ const MyComponentWithLongName: React.VoidFunctionComponent< #### 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 new syntax features in TypeScript 4.5: +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) From c06fbdf8193935704daef815e7e965d0c883ea9b Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 24 Nov 2021 15:07:12 +0900 Subject: [PATCH 37/42] Update changelog_unreleased/typescript/11515.md Co-authored-by: Jed Fox --- changelog_unreleased/typescript/11515.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog_unreleased/typescript/11515.md b/changelog_unreleased/typescript/11515.md index 5f94688dfccc..4ebfaa4fe9e0 100644 --- a/changelog_unreleased/typescript/11515.md +++ b/changelog_unreleased/typescript/11515.md @@ -1,6 +1,6 @@ #### [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 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.
**Note**: This change may affect a large number of lines in your codebase. From acd68e193027b6e73fe805afcbb3a31d980ea481 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Wed, 24 Nov 2021 15:08:19 +0900 Subject: [PATCH 38/42] Regenerate --- website/blog/{2021-11-23-2.5.0.md => 2021-11-24-2.5.0.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename website/blog/{2021-11-23-2.5.0.md => 2021-11-24-2.5.0.md} (99%) diff --git a/website/blog/2021-11-23-2.5.0.md b/website/blog/2021-11-24-2.5.0.md similarity index 99% rename from website/blog/2021-11-23-2.5.0.md rename to website/blog/2021-11-24-2.5.0.md index b234a40de872..ef062f9c85ad 100644 --- a/website/blog/2021-11-23-2.5.0.md +++ b/website/blog/2021-11-24-2.5.0.md @@ -16,7 +16,7 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us #### 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 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 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.
**Note**: This change may affect a large number of lines in your codebase. From b4aaf35371c2b8349a4b4821e1548c6a3d87c986 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 25 Nov 2021 02:15:08 +0900 Subject: [PATCH 39/42] Address review --- changelog_unreleased/typescript/11515.md | 2 +- changelog_unreleased/typescript/11721.md | 2 +- website/blog/2021-11-24-2.5.0.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/changelog_unreleased/typescript/11515.md b/changelog_unreleased/typescript/11515.md index 4ebfaa4fe9e0..b04f2c23a504 100644 --- a/changelog_unreleased/typescript/11515.md +++ b/changelog_unreleased/typescript/11515.md @@ -1,6 +1,6 @@ #### [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. diff --git a/changelog_unreleased/typescript/11721.md b/changelog_unreleased/typescript/11721.md index d7f084ea0e5c..2c079698510a 100644 --- a/changelog_unreleased/typescript/11721.md +++ b/changelog_unreleased/typescript/11721.md @@ -1,6 +1,6 @@ #### [HIGHLIGHT]Support TypeScript 4.5 (#11721, #11723, #11813 by @sosukesuzuki) -We’ve added support for TypeScript 4.5's new syntax 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/#type-on-import-names) diff --git a/website/blog/2021-11-24-2.5.0.md b/website/blog/2021-11-24-2.5.0.md index ef062f9c85ad..2283502c2459 100644 --- a/website/blog/2021-11-24-2.5.0.md +++ b/website/blog/2021-11-24-2.5.0.md @@ -16,7 +16,7 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us #### 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 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. @@ -54,7 +54,7 @@ const MyComponentWithLongName: React.VoidFunctionComponent< #### 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: +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) From a1152f151a941186e438400bb6d43b2f0b8074e4 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 25 Nov 2021 22:33:02 +0900 Subject: [PATCH 40/42] Regenerate --- website/blog/{2021-11-24-2.5.0.md => 2021-11-25-2.5.0.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename website/blog/{2021-11-24-2.5.0.md => 2021-11-25-2.5.0.md} (100%) diff --git a/website/blog/2021-11-24-2.5.0.md b/website/blog/2021-11-25-2.5.0.md similarity index 100% rename from website/blog/2021-11-24-2.5.0.md rename to website/blog/2021-11-25-2.5.0.md From 62554557f9d147bfe5db2ed5aac734e8da3e178b Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 25 Nov 2021 23:03:13 +0900 Subject: [PATCH 41/42] Address review --- changelog_unreleased/scss/11637.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/changelog_unreleased/scss/11637.md b/changelog_unreleased/scss/11637.md index 01ca640b413b..b3c7b257d761 100644 --- a/changelog_unreleased/scss/11637.md +++ b/changelog_unreleased/scss/11637.md @@ -5,17 +5,19 @@ // 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' ); ``` From 062aeef2a74797ec11ca753a5994b6f88f8c0151 Mon Sep 17 00:00:00 2001 From: sosukesuzuki Date: Thu, 25 Nov 2021 23:03:23 +0900 Subject: [PATCH 42/42] Regenerate --- website/blog/2021-11-25-2.5.0.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/website/blog/2021-11-25-2.5.0.md b/website/blog/2021-11-25-2.5.0.md index 2283502c2459..db69b66a6c47 100644 --- a/website/blog/2021-11-25-2.5.0.md +++ b/website/blog/2021-11-25-2.5.0.md @@ -267,17 +267,19 @@ class Test { // 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 2.4 -@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 2.5 @use 'library' with ( $black: #222, - $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif' + $border-radius: 0.1rem, + $font-family: 'Helvetica, sans-serif' ); ```