Merge branch 'main' into next

# Conflicts:
#	docs/browser.md
#	src/language-js/print/literal.js
#	src/language-js/print/misc.js
#	src/language-js/printer-estree.js
#	tests/format/markdown/auto-link/jsfmt.spec.js
#	yarn.lock

.git-blame-ignore-revs

@@ -5,6 +5,8 @@
 # See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
 
 # Prettier bump after release
+# 2.8.2
+b9c3cd4c7016dfb1bb3539c5b3db15fdd54b9f6f
 # 2.8.1
 b87de09bcf9a523fe3da31394ba0e6f5d107cf3e
 # 2.8.0

.github/ISSUE_TEMPLATE/formatting.md

@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
 
 -->
 
-**Prettier 2.8.1**
+**Prettier 2.8.2**
 [Playground link](https://prettier.io/playground/#.....)
 
 ```sh

.github/ISSUE_TEMPLATE/integration.md

@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
 
 **Environments:**
 
-- Prettier Version: 2.8.1
+- Prettier Version: 2.8.2
 - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
 - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
 - Operating System: <!-- Windows, Linux, macOS, etc. -->

.gitignore

@@ -28,6 +28,7 @@ package-lock.json
 **/.pnp.*
 .nyc_output
 .devcontainer
+.node-version
 # When installing software on gitpod.io, `core.*` files are generated
 /core.*
 

.node-version

@@ -1 +0,0 @@
-18.12.1

CHANGELOG.md

@@ -1,3 +1,464 @@
+# 2.8.2
+
+[diff](https://github.com/prettier/prettier/compare/2.8.1...2.8.2)
+
+#### Don't lowercase link references ([#13155](https://github.com/prettier/prettier/pull/13155) by [@DerekNonGeneric](https://github.com/DerekNonGeneric) & [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```markdown
+<!-- Input -->
+We now don't strictly follow the release notes format suggested by [Keep a Changelog].
+
+[Keep a Changelog]: https://example.com/
+
+<!-- Prettier 2.8.1 -->
+We now don't strictly follow the release notes format suggested by [Keep a Changelog].
+
+[keep a changelog]: https://example.com/
+<!--
+^^^^^^^^^^^^^^^^^^ lowercased
+-->
+
+<!-- Prettier 2.8.2 -->
+<Same as input>
+```
+
+#### Preserve self-closing tags ([#13691](https://github.com/prettier/prettier/pull/13691) by [@dcyriller](https://github.com/dcyriller))
+
+<!-- prettier-ignore -->
+```hbs
+{{! Input }}
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component></Component>
+
+{{! Prettier 2.8.1 }}
+<div></div>
+<div></div>
+<custom-component></custom-component>
+<custom-component></custom-component>
+<i></i>
+<i></i>
+<Component />
+<Component />
+
+{{! Prettier 2.8.2 }}
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component />
+```
+
+#### Allow custom "else if"-like blocks with block params ([#13930](https://github.com/prettier/prettier/pull/13930) by [@jamescdavis](https://github.com/jamescdavis))
+
+#13507 added support for custom block keywords used with `else`, but failed to allow block params. This updates printer-glimmer to allow block params with custom "else if"-like blocks.
+
+<!-- prettier-ignore -->
+```hbs
+{{! Input }}
+{{#when isAtWork as |work|}}
+  Ship that
+  {{work}}!
+{{else when isReading as |book|}}
+  You can finish
+  {{book}}
+  eventually...
+{{else}}
+  Go to bed!
+{{/when}}
+
+{{! Prettier 2.8.1 }}
+{{#when isAtWork as |work|}}
+  Ship that
+  {{work}}!
+{{else when isReading}}
+  You can finish
+  {{book}}
+  eventually...
+{{else}}
+  Go to bed!
+{{/when}}
+
+{{! Prettier 2.8.2 }}
+{{#when isAtWork as |work|}}
+  Ship that
+  {{work}}!
+{{else when isReading as |book|}}
+  You can finish
+  {{book}}
+  eventually...
+{{else}}
+  Go to bed!
+{{/when}}
+```
+
+#### Preserve empty lines between nested SCSS maps ([#13931](https://github.com/prettier/prettier/pull/13931) by [@jneander](https://github.com/jneander))
+
+<!-- prettier-ignore -->
+```scss
+/* Input */
+$map: (
+  'one': (
+     'key': 'value',
+  ),
+
+  'two': (
+     'key': 'value',
+  ),
+)
+
+/* Prettier 2.8.1 */
+$map: (
+  'one': (
+     'key': 'value',
+  ),
+  'two': (
+     'key': 'value',
+  ),
+)
+
+/* Prettier 2.8.2 */
+$map: (
+  'one': (
+     'key': 'value',
+  ),
+
+  'two': (
+     'key': 'value',
+  ),
+)
+```
+
+#### Fix missing parentheses when an expression statement starts with `let[` ([#14000](https://github.com/prettier/prettier/pull/14000), [#14044](https://github.com/prettier/prettier/pull/14044) by [@fisker](https://github.com/fisker), [@thorn0](https://github.com/thorn0))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+(let[0] = 2);
+
+// Prettier 2.8.1
+let[0] = 2;
+
+// Prettier 2.8.1 (second format)
+SyntaxError: Unexpected token (1:5)
+> 1 | let[0] = 2;
+    |     ^
+  2 |
+
+// Prettier 2.8.2
+(let)[0] = 2;
+```
+
+#### Fix semicolon duplicated at the end of LESS file ([#14007](https://github.com/prettier/prettier/pull/14007) by [@mvorisek](https://github.com/mvorisek))
+
+<!-- prettier-ignore -->
+```less
+// Input
+@variable: {
+  field: something;
+};
+
+// Prettier 2.8.1
+@variable: {
+  field: something;
+}; ;
+
+// Prettier 2.8.2
+@variable: {
+  field: something;
+};
+```
+
+#### Fix no space after unary minus when followed by opening parenthesis in LESS ([#14008](https://github.com/prettier/prettier/pull/14008) by [@mvorisek](https://github.com/mvorisek))
+
+<!-- prettier-ignore -->
+```less
+// Input
+.unary_minus_single {
+  margin: -(@a);
+}
+
+.unary_minus_multi {
+  margin: 0 -(@a);
+}
+
+.binary_minus {
+  margin: 0 - (@a);
+}
+
+// Prettier 2.8.1
+.unary_minus_single {
+  margin: - (@a);
+}
+
+.unary_minus_multi {
+  margin: 0 - (@a);
+}
+
+.binary_minus {
+  margin: 0 - (@a);
+}
+
+// Prettier 2.8.2
+.unary_minus_single {
+  margin: -(@a);
+}
+
+.unary_minus_multi {
+  margin: 0 -(@a);
+}
+
+.binary_minus {
+  margin: 0 - (@a);
+}
+```
+
+#### Do not change case of property name if inside a variable declaration in LESS ([#14034](https://github.com/prettier/prettier/pull/14034) by [@mvorisek](https://github.com/mvorisek))
+
+<!-- prettier-ignore -->
+```less
+// Input
+@var: {
+  preserveCase: 0;
+};
+
+// Prettier 2.8.1
+@var: {
+  preservecase: 0;
+};
+
+// Prettier 2.8.2
+@var: {
+  preserveCase: 0;
+};
+```
+
+#### Fix formatting for auto-accessors with comments ([#14038](https://github.com/prettier/prettier/pull/14038) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+class A {
+  @dec()
+  // comment
+  accessor b;
+}
+
+// Prettier 2.8.1
+class A {
+  @dec()
+  accessor // comment
+  b;
+}
+
+// Prettier 2.8.1 (second format)
+class A {
+  @dec()
+  accessor; // comment
+  b;
+}
+
+// Prettier 2.8.2
+class A {
+  @dec()
+  // comment
+  accessor b;
+}
+```
+
+#### Add parentheses for TSTypeQuery to improve readability ([#14042](https://github.com/prettier/prettier/pull/14042) by [@onishi-kohei](https://github.com/onishi-kohei))
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+a as (typeof node.children)[number]
+a as (typeof node.children)[]
+a as ((typeof node.children)[number])[]
+
+// Prettier 2.8.1
+a as typeof node.children[number];
+a as typeof node.children[];
+a as typeof node.children[number][];
+
+// Prettier 2.8.2
+a as (typeof node.children)[number];
+a as (typeof node.children)[];
+a as (typeof node.children)[number][];
+```
+
+#### Fix displacing of comments in default switch case ([#14047](https://github.com/prettier/prettier/pull/14047) by [@thorn0](https://github.com/thorn0))
+
+It was a regression in Prettier 2.6.0.
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+switch (state) {
+  default:
+    result = state; // no change
+    break;
+}
+
+// Prettier 2.8.1
+switch (state) {
+  default: // no change
+    result = state;
+    break;
+}
+
+// Prettier 2.8.2
+switch (state) {
+  default:
+    result = state; // no change
+    break;
+}
+```
+
+#### Support type annotations on auto accessors via `babel-ts` ([#14049](https://github.com/prettier/prettier/pull/14049) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+[The bug that `@babel/parser` cannot parse auto accessors with type annotations](https://github.com/babel/babel/issues/15205) has been fixed. So we now support it via `babel-ts` parser.
+
+<!-- prettier-ignore -->
+```tsx
+class Foo {
+  accessor prop: number;
+}
+```
+
+#### Fix formatting of empty type parameters ([#14073](https://github.com/prettier/prettier/pull/14073) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+const foo: bar</* comment */> = () => baz;
+
+// Prettier 2.8.1
+Error: Comment "comment" was not printed. Please report this error!
+
+// Prettier 2.8.2
+const foo: bar</* comment */> = () => baz;
+```
+
+#### Add parentheses to head of `ExpressionStatement` instead of the whole statement ([#14077](https://github.com/prettier/prettier/pull/14077) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+({}).toString.call(foo) === "[object Array]"
+  ? foo.forEach(iterateArray)
+  : iterateObject(foo);
+
+// Prettier 2.8.1
+({}.toString.call(foo) === "[object Array]"
+  ? foo.forEach(iterateArray)
+  : iterateObject(foo));
+
+// Prettier 2.8.2
+({}).toString.call(foo.forEach) === "[object Array]"
+  ? foo.forEach(iterateArray)
+  : iterateObject(foo);
+```
+
+#### Fix comments after directive ([#14081](https://github.com/prettier/prettier/pull/14081) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+"use strict" /* comment */;
+
+// Prettier 2.8.1 (with other js parsers except `babel`)
+Error: Comment "comment" was not printed. Please report this error!
+
+// Prettier 2.8.2
+<Same as input>
+```
+
+#### Fix formatting for comments inside JSX attribute ([#14082](https://github.com/prettier/prettier/pull/14082) with by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+function MyFunctionComponent() {
+  <button label=/*old*/"new">button</button>
+}
+
+// Prettier 2.8.1
+Error: Comment "old" was not printed. Please report this error!
+
+// Prettier 2.8.2
+function MyFunctionComponent() {
+  <button label=/*old*/ "new">button</button>;
+}
+```
+
+#### Quote numeric keys for json-stringify parser ([#14083](https://github.com/prettier/prettier/pull/14083) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+{0: 'value'}
+
+// Prettier 2.8.1
+{
+  0: "value"
+}
+
+// Prettier 2.8.2
+{
+  "0": "value"
+}
+```
+
+#### Fix removing commas from function arguments in maps ([#14089](https://github.com/prettier/prettier/pull/14089) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```scss
+/* Input */
+$foo: map-fn(
+  (
+    "#{prop}": inner-fn($first, $second),
+  )
+);
+
+/* Prettier 2.8.1 */
+$foo: map-fn(("#{prop}": inner-fn($first $second)));
+
+/* Prettier 2.8.2 */
+$foo: map-fn(
+  (
+    "#{prop}": inner-fn($first, $second),
+  )
+);
+
+```
+
+#### Do not insert space in LESS property access ([#14103](https://github.com/prettier/prettier/pull/14103) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```less
+// Input
+a {
+  color: @colors[@white];
+}
+
+// Prettier 2.8.1
+a {
+  color: @colors[ @white];
+}
+
+// Prettier 2.8.2
+<Same as input>
+```
+
 # 2.8.1
 
 [diff](https://github.com/prettier/prettier/compare/2.8.0...2.8.1)

changelog_unreleased/flow/14073.md

@@ -1,13 +0,0 @@
-#### Fix formatting of empty type parameters (#14073 by @fisker)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-const foo: bar</* comment */> = () => baz;
-
-// Prettier stable
-Error: Comment "comment" was not printed. Please report this error!
-
-// Prettier main
-const foo: bar</* comment */> = () => baz;
-```

changelog_unreleased/handlebars/13930.md

@@ -1,42 +0,0 @@
-#### Allow custom "else if"-like blocks with block params (#13930 by @jamescdavis)
-
-#13507 added support for custom block keywords used with `else`, but failed to allow block params. This updates printer-glimmer to allow block params with custom "else if"-like blocks.
-
-<!-- prettier-ignore -->
-```hbs
-{{! Input }}
-{#when isAtWork as |work|}}
-  Ship that
-  {{work}}!
-{{else when isReading as |book|}}
-  You can finish
-  {{book}}
-  eventually...
-{{else}}
-  Go to bed!
-{{/when}}
-
-{{! Prettier stable }}
-{{#when isAtWork as |work|}}
-  Ship that
-  {{work}}!
-{{else when isReading}}
-  You can finish
-  {{book}}
-  eventually...
-{{else}}
-  Go to bed!
-{{/when}}
-
-{{! Prettier main }}
-{#when isAtWork as |work|}}
-  Ship that
-  {{work}}!
-{{else when isReading as |book|}}
-  You can finish
-  {{book}}
-  eventually...
-{{else}}
-  Go to bed!
-{{/when}}
-```

changelog_unreleased/javascript/14000.md

@@ -1,19 +0,0 @@
-#### Fix missing parentheses when an expression statement starts with `let[` (#14000, #14044 by @fisker, @thorn0)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-(let[0] = 2);
-
-// Prettier stable
-let[0] = 2;
-
-// Prettier stable (second format)
-SyntaxError: Unexpected token (1:5)
-> 1 | let[0] = 2;
-    |     ^
-  2 |
-
-// Prettier main
-(let)[0] = 2;
-```

changelog_unreleased/javascript/14038.md

@@ -1,32 +0,0 @@
-#### Fix formatting for auto-accessors with comments (#14038 by @fisker)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-class A {
-  @dec()
-  // comment
-  accessor b;
-}
-
-// Prettier stable
-class A {
-  @dec()
-  accessor // comment
-  b;
-}
-
-// Prettier stable (second format)
-class A {
-  @dec()
-  accessor; // comment
-  b;
-}
-
-// Prettier main
-class A {
-  @dec()
-  // comment
-  accessor b;
-}
-```

changelog_unreleased/javascript/14047.md

@@ -1,27 +0,0 @@
-#### Fix displacing of comments in default switch case (#14047 by @thorn0)
-
-It was a regression in Prettier 2.6.0.
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-switch (state) {
-  default:
-    result = state; // no change
-    break;
-}
-
-// Prettier stable
-switch (state) {
-  default: // no change
-    result = state;
-    break;
-}
-
-// Prettier main
-switch (state) {
-  default:
-    result = state; // no change
-    break;
-}
-```

changelog_unreleased/javascript/14077.md

@@ -1,19 +0,0 @@
-#### Add parentheses to head of `ExpressionStatement` instead of the whole statement (#14077 by @fisker)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-({}).toString.call(foo) === "[object Array]"
-  ? foo.forEach(iterateArray)
-  : iterateObject(foo);
-
-// Prettier stable
-({}.toString.call(foo) === "[object Array]"
-  ? foo.forEach(iterateArray)
-  : iterateObject(foo));
-
-// Prettier main
-({}).toString.call(foo.forEach) === "[object Array]"
-  ? foo.forEach(iterateArray)
-  : iterateObject(foo);
-```

changelog_unreleased/javascript/14082.md

@@ -1,17 +0,0 @@
-#### Fix formatting for comments inside JSX attribute (#14082 with by @fisker)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-function MyFunctionComponent() {
-  <button label=/*old*/"new">button</button>
-}
-
-// Prettier stable
-Error: Comment "old" was not printed. Please report this error!
-
-// Prettier main
-function MyFunctionComponent() {
-  <button label=/*old*/ "new">button</button>;
-}
-```

changelog_unreleased/json/14083.md

@@ -1,17 +0,0 @@
-#### Quote numeric keys for json-stringify parser (#14083 by @fisker)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-{0: 'value'}
-
-// Prettier stable
-{
-  0: "value"
-}
-
-// Prettier main
-{
-  "0": "value"
-}
-```

changelog_unreleased/less/14007.md

@@ -1,19 +0,0 @@
-#### Fix semicolon duplicated at the end of LESS file (#14007 by @mvorisek)
-
-<!-- prettier-ignore -->
-```less
-// Input
-@variable: {
-  field: something;
-};
-
-// Prettier stable
-@variable: {
-  field: something;
-}; ;
-
-// Prettier main
-@variable: {
-  field: something;
-};
-```

changelog_unreleased/less/14008.md

@@ -1,43 +0,0 @@
-#### Fix no space after unary minus when followed by opening parenthesis in LESS (#14008 by @mvorisek)
-
-<!-- prettier-ignore -->
-```less
-// Input
-.unary_minus_single {
-  margin: -(@a);
-}
-
-.unary_minus_multi {
-  margin: 0 -(@a);
-}
-
-.binary_minus {
-  margin: 0 - (@a);
-}
-
-// Prettier stable
-.unary_minus_single {
-  margin: - (@a);
-}
-
-.unary_minus_multi {
-  margin: 0 - (@a);
-}
-
-.binary_minus {
-  margin: 0 - (@a);
-}
-
-// Prettier main
-.unary_minus_single {
-  margin: -(@a);
-}
-
-.unary_minus_multi {
-  margin: 0 -(@a);
-}
-
-.binary_minus {
-  margin: 0 - (@a);
-}
-```

changelog_unreleased/less/14034.md

@@ -1,19 +0,0 @@
-#### Do not change case of property name if inside a variable declaration in LESS (#14034 by @mvorisek)
-
-<!-- prettier-ignore -->
-```less
-// Input
-@var: {
-  preserveCase: 0;
-};
-
-// Prettier stable
-@var: {
-  preservecase: 0;
-};
-
-// Prettier main
-@var: {
-  preserveCase: 0;
-};
-```

changelog_unreleased/markdown/13155.md

@@ -1,20 +0,0 @@
-#### Don't lowercase link references (#13155 by @DerekNonGeneric & @fisker)
-
-<!-- prettier-ignore -->
-```markdown
-<!-- Input -->
-We now don't strictly follow the release notes format suggested by [Keep a Changelog].
-
-[Keep a Changelog]: https://example.com/
-
-<!-- Prettier stable -->
-We now don't strictly follow the release notes format suggested by [Keep a Changelog].
-
-[keep a changelog]: https://example.com/
-<!--
-^^^^^^^^^^^^^^^^^^ lowercased
--->
-
-<!-- Prettier main -->
-<Same as input>
-```

changelog_unreleased/scss/13931.md

@@ -1,36 +0,0 @@
-#### Preserve empty lines between nested SCSS maps (#13931 by @jneander)
-
-<!-- prettier-ignore -->
-```scss
-/* Input */
-$map: (
-  'one': (
-     'key': 'value',
-  ),
-
-  'two': (
-     'key': 'value',
-  ),
-)
-
-/* Prettier stable */
-$map: (
-  'one': (
-     'key': 'value',
-  ),
-  'two': (
-     'key': 'value',
-  ),
-)
-
-/* Prettier main */
-$map: (
-  'one': (
-     'key': 'value',
-  ),
-
-  'two': (
-     'key': 'value',
-  ),
-)
-```

changelog_unreleased/typescript/14042.md

@@ -1,19 +0,0 @@
-#### Add parentheses for TSTypeQuery to improve readability (#14042 by @onishi-kohei)
-
-<!-- prettier-ignore -->
-```tsx
-// Input
-a as (typeof node.children)[number]
-a as (typeof node.children)[]
-a as ((typeof node.children)[number])[]
-
-// Prettier stable
-a as typeof node.children[number];
-a as typeof node.children[];
-a as typeof node.children[number][];
-
-// Prettier main
-a as (typeof node.children)[number];
-a as (typeof node.children)[];
-a as (typeof node.children)[number][];
-```

changelog_unreleased/typescript/14049.md

@@ -1,10 +0,0 @@
-#### Support type annotations on auto accessors via `babel-ts` (#14049 by @sosukesuzuki)
-
-[The bug that `@babel/parser` cannot parse auto accessors with type annotations](https://github.com/babel/babel/issues/15205) has been fixed. So we now support it via `babel-ts` parser.
-
-<!-- prettier-ignore -->
-```tsx
-class Foo {
-  accessor prop: number;
-}
-```

docs/browser.md

@@ -29,8 +29,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.8.1/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.8.1/plugins/graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.8.2/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.8.2/plugins/graphql.js"></script>
 <script>
   (async () => {
     const formatted = await prettier.format("type Query { hello: String }", {
@@ -47,8 +47,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@2.8.1/standalone.mjs";
-  import pluginGraphql from "https://unpkg.com/prettier@2.8.1/plugins/graphql.mjs";
+  import * as prettier from "https://unpkg.com/prettier@2.8.2/standalone.mjs";
+  import pluginGraphql from "https://unpkg.com/prettier@2.8.2/plugins/graphql.mjs";
 
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.8.1/standalone.js",
-  "https://unpkg.com/prettier@2.8.1/plugins/graphql.js",
+  "https://unpkg.com/prettier@2.8.2/standalone.js",
+  "https://unpkg.com/prettier@2.8.2/plugins/graphql.js",
 ], async (prettier, ...plugins) => {
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.8.1/standalone.js");
-importScripts("https://unpkg.com/prettier@2.8.1/plugins/graphql.js");
+importScripts("https://unpkg.com/prettier@2.8.2/standalone.js");
+importScripts("https://unpkg.com/prettier@2.8.2/plugins/graphql.js");
 (async () => {
   const formatted = await prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -105,8 +105,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@2.8.1/standalone.mjs";
-  import pluginBabel from "https://unpkg.com/prettier@2.8.1/plugins/babel.mjs";
+  import * as prettier from "https://unpkg.com/prettier@2.8.2/standalone.mjs";
+  import pluginBabel from "https://unpkg.com/prettier@2.8.2/plugins/babel.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -122,9 +122,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import * as prettier from "https://unpkg.com/prettier@2.8.1/standalone.mjs";
-  import pluginBabel from "https://unpkg.com/prettier@2.8.1/plugins/babel.mjs";
-  import pluginHtml from "https://unpkg.com/prettier@2.8.1/plugins/html.mjs";
+  import * as prettier from "https://unpkg.com/prettier@2.8.2/standalone.mjs";
+  import pluginBabel from "https://unpkg.com/prettier@2.8.2/plugins/babel.mjs";
+  import pluginHtml from "https://unpkg.com/prettier@2.8.2/plugins/html.mjs";
 
   console.log(
     await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {

package.json

@@ -142,7 +142,7 @@
     "magic-string": "0.27.0",
     "npm-run-all": "4.1.5",
     "path-browserify": "1.0.1",
-    "prettier": "2.8.1",
+    "prettier": "2.8.2",
     "pretty-bytes": "6.0.0",
     "rollup-plugin-license": "3.0.1",
     "semver": "7.3.8",

src/language-css/clean.js

@@ -182,6 +182,27 @@ function clean(ast, newObj, parent) {
       });
     }
   }
+
+  // We parse `@var[ foo ]` and `@var[foo]` differently
+  if (
+    ast.type === "value-comma_group" &&
+    ast.groups.some(
+      (node) =>
+        (node.type === "value-atword" && node.value.endsWith("[")) ||
+        (node.type === "value-word" && node.value.startsWith("]"))
+    )
+  ) {
+    return {
+      type: "value-atword",
+      value: ast.groups.map((node) => node.value).join(""),
+      group: {
+        open: null,
+        close: null,
+        groups: [],
+        type: "value-paren_group",
+      },
+    };
+  }
 }
 
 clean.ignoredProperties = ignoredProperties;

src/language-css/parser-postcss.js

@@ -118,23 +118,6 @@ async function parseValueNode(valueNode, options) {
       parenGroupStack.pop();
       parenGroup = parenGroupStack.at(-1);
     } else if (node.type === "comma") {
-      if (commaGroup.groups.length > 1) {
-        for (const group of commaGroup.groups) {
-          // if css interpolation
-          if (
-            group.value &&
-            typeof group.value === "string" &&
-            group.value.includes("#{")
-          ) {
-            commaGroup.groups = [
-              stringifyNode({
-                groups: commaGroup.groups,
-              }).trim(),
-            ];
-            break;
-          }
-        }
-      }
       parenGroup.groups.push(commaGroup);
       commaGroup = {
         groups: [],

src/language-css/printer-postcss.js

@@ -544,6 +544,7 @@ function genericPrint(path, options, print) {
 
       let insideSCSSInterpolationInString = false;
       let didBreak = false;
+
       for (let i = 0; i < node.groups.length; ++i) {
         parts.push(printed[i]);
 
@@ -591,20 +592,20 @@ function genericPrint(path, options, print) {
         }
 
         // Ignore spaces before/after string interpolation (i.e. `"#{my-fn("_")}"`)
-        const isStartSCSSInterpolationInString =
-          iNode.type === "value-string" && iNode.value.startsWith("#{");
-        const isEndingSCSSInterpolationInString =
-          insideSCSSInterpolationInString &&
-          iNextNode.type === "value-string" &&
-          iNextNode.value.endsWith("}");
-
-        if (
-          isStartSCSSInterpolationInString ||
-          isEndingSCSSInterpolationInString
-        ) {
-          insideSCSSInterpolationInString = !insideSCSSInterpolationInString;
-
-          continue;
+        if (iNode.type === "value-string" && iNode.quoted) {
+          const positionOfOpeningInterpolation = iNode.value.lastIndexOf("#{");
+          const positionOfClosingInterpolation = iNode.value.lastIndexOf("}");
+          if (
+            positionOfOpeningInterpolation !== -1 &&
+            positionOfClosingInterpolation !== -1
+          ) {
+            insideSCSSInterpolationInString =
+              positionOfOpeningInterpolation > positionOfClosingInterpolation;
+          } else if (positionOfOpeningInterpolation !== -1) {
+            insideSCSSInterpolationInString = true;
+          } else if (positionOfClosingInterpolation !== -1) {
+            insideSCSSInterpolationInString = false;
+          }
         }
 
         if (insideSCSSInterpolationInString) {
@@ -617,7 +618,26 @@ function genericPrint(path, options, print) {
         }
 
         // Ignore `@` in Less (i.e. `@@var;`)
-        if (iNode.type === "value-atword" && iNode.value === "") {
+        if (
+          iNode.type === "value-atword" &&
+          (iNode.value === "" ||
+            /*
+            @var[ @notVarNested ][notVar]
+            ^^^^^
+            */
+            iNode.value.endsWith("["))
+        ) {
+          continue;
+        }
+
+        /*
+        @var[ @notVarNested ][notVar]
+                            ^^^^^^^^^
+        */
+        if (
+          iNextNode.type === "value-word" &&
+          iNextNode.value.startsWith("]")
+        ) {
           continue;
         }
 

src/language-handlebars/utils.js

@@ -17,6 +17,7 @@ const voidTags = new Set(htmlVoidElements);
 function isVoidElement(node) {
   return (
     voidTags.has(node.tag) ||
+    node.selfClosing === true ||
     (isGlimmerComponent(node) &&
       node.children.every((node) => isWhitespaceNode(node)))
   );

src/language-js/print/literal.js

@@ -1,5 +1,6 @@
 import { printString, printNumber } from "../../common/util.js";
 import { replaceEndOfLine } from "../../document/utils.js";
+import { printDirective } from "./misc.js";
 
 function printLiteral(path, options /*, print*/) {
   const { node } = path;
@@ -39,14 +40,24 @@ function printLiteral(path, options /*, print*/) {
       }
 
       if (typeof value === "string") {
-        return replaceEndOfLine(printString(node.raw, options));
+        return isDirective(path)
+          ? printDirective(node.raw, options)
+          : replaceEndOfLine(printString(node.raw, options));
       }
-
       return String(value);
     }
   }
 }
 
+function isDirective(path) {
+  if (path.getName() !== "expression") {
+    return;
+  }
+
+  const {parent} = path;
+  return parent.type === "ExpressionStatement" && parent.directive;
+}
+
 function printBigInt(raw) {
   return raw.toLowerCase();
 }

src/language-js/print/misc.js

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

src/language-js/printer-estree.js

@@ -25,7 +25,11 @@ import {
   isTheOnlyJsxElementInMarkdown,
   isNextLineEmpty,
   needsHardlineAfterDanglingComment,
+<<<<<<< HEAD
   rawText,
+=======
+  hasIgnoreComment,
+>>>>>>> main
   isCallExpression,
   isMemberExpression,
   markerForIfWithoutBlockAndSameLineComment,
@@ -51,8 +55,14 @@ import {
   adjustClause,
   printRestSpread,
   printDefiniteToken,
+<<<<<<< HEAD
 } from "./print/misc.js";
 import {
+=======
+  printDirective,
+} = require("./print/misc.js");
+const {
+>>>>>>> main
   printImportDeclaration,
   printExportDeclaration,
   printExportAllDeclaration,
@@ -208,11 +218,6 @@ function printPathNoParens(path, options, print, args) {
     case "EmptyStatement":
       return "";
     case "ExpressionStatement": {
-      // Detect Flow and TypeScript directives
-      if (node.directive) {
-        return [printDirective(node.expression, options), semi];
-      }
-
       if (
         options.parser === "__vue_event_binding" ||
         options.parser === "__vue_ts_event_binding"
@@ -419,7 +424,7 @@ function printPathNoParens(path, options, print, args) {
     case "Directive":
       return [print("value"), semi]; // Babel 6
     case "DirectiveLiteral":
-      return printDirective(node, options);
+      return printDirective(node.extra.raw, options);
     case "UnaryExpression":
       parts.push(node.operator);
 
@@ -791,25 +796,6 @@ function printPathNoParens(path, options, print, args) {
   }
 }
 
-function printDirective(node, options) {
-  const raw = rawText(node);
-  const rawContent = raw.slice(1, -1);
-
-  // Check for the alternate quote, to determine if we're allowed to swap
-  // the quotes on a DirectiveLiteral.
-  if (rawContent.includes('"') || rawContent.includes("'")) {
-    return raw;
-  }
-
-  const enclosingQuote = options.singleQuote ? "'" : '"';
-
-  // Directives are exact code unit sequences, which means that you can't
-  // change the escape sequences they use.
-  // See https://github.com/prettier/prettier/issues/1555
-  // and https://tc39.github.io/ecma262/#directive-prologue
-  return enclosingQuote + rawContent + enclosingQuote;
-}
-
 const printer = {
   preprocess,
   print: genericPrint,

tests/format/handlebars/element-node/__snapshots__/jsfmt.spec.js.snap

@@ -45,6 +45,15 @@ printWidth: 80
 
 <MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>
 
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component></Component>
+
 =====================================output=====================================
 <div class="attribute" {{modifier}} {{! comment}}>
   Hello
@@ -91,5 +100,14 @@ printWidth: 80
   @prop4={{true}}
   as |thing|
 />
+
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component />
 ================================================================================
 `;

tests/format/handlebars/element-node/element-node.hbs

@@ -36,3 +36,12 @@
 <img />
 
 <MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>
+
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component></Component>

tests/format/handlebars/html-whitespace-sensitivity/__snapshots__/jsfmt.spec.js.snap

@@ -702,7 +702,7 @@ printWidth: 40
 =====================================input======================================
 <i />   |   <i />
 =====================================output=====================================
-<i></i>   |   <i></i>
+<i />   |   <i />
 ================================================================================
 `;
 

tests/format/handlebars/prettier-ignore/__snapshots__/jsfmt.spec.js.snap

@@ -6,6 +6,27 @@ parsers: ["glimmer"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
+{{! prettier-ignore }}
+{{        ugly}}
+
+{{! prettier-ignore }}{{        ugly}}
+
+{{! prettier-ignore }}
+        ugly
+
+{{! prettier-ignore }}          ugly
+
+{{! prettier-ignore }}
+{{#        ugly}}
+{{/        ugly}}
+
+{{! prettier-ignore }}{{#        ugly}}{{/        ugly}}
+
+{{! prettier-ignore }}
+{{!        ugly}}
+
+{{! prettier-ignore }}{{!        ugly}}
+
 {{! prettier-ignore }}
 <div>
   "hello! my parent was ignored"
@@ -40,7 +61,30 @@ printWidth: 80
 
   {{/another-sibling}}
 </div>
+
 =====================================output=====================================
+{{! prettier-ignore }}
+{{        ugly}}
+
+{{! prettier-ignore }}{{ugly}}
+
+{{! prettier-ignore }}
+ugly
+
+{{! prettier-ignore }}
+ugly
+
+{{! prettier-ignore }}
+{{#        ugly}}
+{{/        ugly}}
+
+{{! prettier-ignore }}{{#ugly}}{{/ugly}}
+
+{{! prettier-ignore }}
+{{!        ugly}}
+
+{{! prettier-ignore }}{{!        ugly}}
+
 {{! prettier-ignore }}
 <div>
   "hello! my parent was ignored"

tests/format/handlebars/prettier-ignore/prettier-ignore.hbs

@@ -1,3 +1,24 @@
+{{! prettier-ignore }}
+{{        ugly}}
+
+{{! prettier-ignore }}{{        ugly}}
+
+{{! prettier-ignore }}
+        ugly
+
+{{! prettier-ignore }}          ugly
+
+{{! prettier-ignore }}
+{{#        ugly}}
+{{/        ugly}}
+
+{{! prettier-ignore }}{{#        ugly}}{{/        ugly}}
+
+{{! prettier-ignore }}
+{{!        ugly}}
+
+{{! prettier-ignore }}{{!        ugly}}
+
 {{! prettier-ignore }}
 <div>
   "hello! my parent was ignored"
@@ -31,4 +52,4 @@
     </div>
 
   {{/another-sibling}}
-</div>
+</div>

tests/format/handlebars/single-quote-option/__snapshots__/jsfmt.spec.js.snap

@@ -99,8 +99,8 @@ singleQuote: false
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
-<div title="{{t 'my.title'}}"></div>
-<div title="{{t 'my.title'}}"></div>
+<div title="{{t 'my.title'}}" />
+<div title="{{t 'my.title'}}" />
 
 <a href="/{{url}}/{{url}}"></a>
 <a href="/{{url}}/{{url}}"></a>
@@ -126,7 +126,7 @@ singleQuote: false
   class="padding
     {{if foo (if fooAgain 'bar' (if fooAgainAgain 'bar' 'foo'))}}
     baz"
-></div>
+/>
 ================================================================================
 `;
 
@@ -161,8 +161,8 @@ singleQuote: true
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
-<div title='{{t "my.title"}}'></div>
-<div title='{{t "my.title"}}'></div>
+<div title='{{t "my.title"}}' />
+<div title='{{t "my.title"}}' />
 
 <a href='/{{url}}/{{url}}'></a>
 <a href='/{{url}}/{{url}}'></a>
@@ -188,7 +188,7 @@ singleQuote: true
   class='padding
     {{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}}
     baz'
-></div>
+/>
 ================================================================================
 `;
 

tests/format/js/directives/comments/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,569 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snippet: #0 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+/* comment */ 'use strict';
+=====================================output=====================================
+/* comment */ "use strict"
+
+================================================================================
+`;
+
+exports[`snippet: #0 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* comment */ 'use strict';
+=====================================output=====================================
+/* comment */ "use strict";
+
+================================================================================
+`;
+
+exports[`snippet: #1 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  /* comment */ 'use strict';
+}
+=====================================output=====================================
+function foo() {
+  /* comment */ "use strict"
+}
+
+================================================================================
+`;
+
+exports[`snippet: #1 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  /* comment */ 'use strict';
+}
+=====================================output=====================================
+function foo() {
+  /* comment */ "use strict";
+}
+
+================================================================================
+`;
+
+exports[`snippet: #2 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+'use strict' /* comment */;
+=====================================output=====================================
+"use strict" /* comment */
+
+================================================================================
+`;
+
+exports[`snippet: #2 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+'use strict' /* comment */;
+=====================================output=====================================
+"use strict" /* comment */;
+
+================================================================================
+`;
+
+exports[`snippet: #3 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict' /* comment */;
+}
+=====================================output=====================================
+function foo() {
+  "use strict" /* comment */
+}
+
+================================================================================
+`;
+
+exports[`snippet: #3 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict' /* comment */;
+}
+=====================================output=====================================
+function foo() {
+  "use strict" /* comment */;
+}
+
+================================================================================
+`;
+
+exports[`snippet: #4 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+// comment
+'use strict';
+=====================================output=====================================
+// comment
+"use strict"
+
+================================================================================
+`;
+
+exports[`snippet: #4 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// comment
+'use strict';
+=====================================output=====================================
+// comment
+"use strict";
+
+================================================================================
+`;
+
+exports[`snippet: #5 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  // comment
+  'use strict';
+}
+=====================================output=====================================
+function foo() {
+  // comment
+  "use strict"
+}
+
+================================================================================
+`;
+
+exports[`snippet: #5 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  // comment
+  'use strict';
+}
+=====================================output=====================================
+function foo() {
+  // comment
+  "use strict";
+}
+
+================================================================================
+`;
+
+exports[`snippet: #6 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+'use strict' // comment
+=====================================output=====================================
+"use strict" // comment
+
+================================================================================
+`;
+
+exports[`snippet: #6 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+'use strict' // comment
+=====================================output=====================================
+"use strict"; // comment
+
+================================================================================
+`;
+
+exports[`snippet: #7 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict' // comment
+}
+=====================================output=====================================
+function foo() {
+  "use strict" // comment
+}
+
+================================================================================
+`;
+
+exports[`snippet: #7 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict' // comment
+}
+=====================================output=====================================
+function foo() {
+  "use strict"; // comment
+}
+
+================================================================================
+`;
+
+exports[`snippet: #8 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+'use strict';
+/* comment */
+(function () {})();
+=====================================output=====================================
+"use strict"
+/* comment */
+;(function () {})()
+
+================================================================================
+`;
+
+exports[`snippet: #8 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+'use strict';
+/* comment */
+(function () {})();
+=====================================output=====================================
+"use strict";
+/* comment */
+(function () {})();
+
+================================================================================
+`;
+
+exports[`snippet: #9 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict';
+  /* comment */
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  "use strict"
+  /* comment */
+  ;(function () {})()
+}
+
+================================================================================
+`;
+
+exports[`snippet: #9 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict';
+  /* comment */
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  "use strict";
+  /* comment */
+  (function () {})();
+}
+
+================================================================================
+`;
+
+exports[`snippet: #10 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+/* comment */
+'use strict';
+(function () {})();
+=====================================output=====================================
+/* comment */
+"use strict"
+;(function () {})()
+
+================================================================================
+`;
+
+exports[`snippet: #10 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+/* comment */
+'use strict';
+(function () {})();
+=====================================output=====================================
+/* comment */
+"use strict";
+(function () {})();
+
+================================================================================
+`;
+
+exports[`snippet: #11 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  /* comment */
+  'use strict';
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  /* comment */
+  "use strict"
+  ;(function () {})()
+}
+
+================================================================================
+`;
+
+exports[`snippet: #11 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  /* comment */
+  'use strict';
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  /* comment */
+  "use strict";
+  (function () {})();
+}
+
+================================================================================
+`;
+
+exports[`snippet: #12 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+'use strict';
+// comment
+(function () {})();
+=====================================output=====================================
+"use strict"
+// comment
+;(function () {})()
+
+================================================================================
+`;
+
+exports[`snippet: #12 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+'use strict';
+// comment
+(function () {})();
+=====================================output=====================================
+"use strict";
+// comment
+(function () {})();
+
+================================================================================
+`;
+
+exports[`snippet: #13 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict';
+  // comment
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  "use strict"
+  // comment
+  ;(function () {})()
+}
+
+================================================================================
+`;
+
+exports[`snippet: #13 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  'use strict';
+  // comment
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  "use strict";
+  // comment
+  (function () {})();
+}
+
+================================================================================
+`;
+
+exports[`snippet: #14 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+// comment
+'use strict';
+(function () {})();
+=====================================output=====================================
+// comment
+"use strict"
+;(function () {})()
+
+================================================================================
+`;
+
+exports[`snippet: #14 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+// comment
+'use strict';
+(function () {})();
+=====================================output=====================================
+// comment
+"use strict";
+(function () {})();
+
+================================================================================
+`;
+
+exports[`snippet: #15 - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  // comment
+  'use strict';
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  // comment
+  "use strict"
+  ;(function () {})()
+}
+
+================================================================================
+`;
+
+exports[`snippet: #15 format 1`] = `
+====================================options=====================================
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function foo() {
+  // comment
+  'use strict';
+  (function () {})();
+}
+=====================================output=====================================
+function foo() {
+  // comment
+  "use strict";
+  (function () {})();
+}
+
+================================================================================
+`;

tests/format/js/directives/comments/jsfmt.spec.js

@@ -0,0 +1,55 @@
+const { outdent } = require("outdent");
+const indent = (text) =>
+  text
+    .split("\n")
+    .map((line) => (line ? `  ${line}` : line))
+    .join("\n");
+// TODO: Remove this when we drop support for Node.js v10
+// eslint-disable-next-line unicorn/prefer-spread
+const flat = (array) => [].concat(...array);
+
+const snippets = flat(
+  [
+    "/* comment */ 'use strict';",
+    "'use strict' /* comment */;",
+    outdent`
+      // comment
+      'use strict';
+    `,
+    outdent`
+      'use strict' // comment
+    `,
+    outdent`
+      'use strict';
+      /* comment */
+      (function () {})();
+    `,
+    outdent`
+      /* comment */
+      'use strict';
+      (function () {})();
+    `,
+    outdent`
+      'use strict';
+      // comment
+      (function () {})();
+    `,
+    outdent`
+      // comment
+      'use strict';
+      (function () {})();
+    `,
+  ].map((code) => [
+    code,
+    outdent`
+      function foo() {
+      ${indent(code)}
+      }
+    `,
+  ])
+);
+
+run_spec({ dirname: __dirname, snippets }, ["babel", "flow", "typescript"]);
+run_spec({ dirname: __dirname, snippets }, ["babel", "flow", "typescript"], {
+  semi: false,
+});

tests/format/less/case/__snapshots__/jsfmt.spec.js.snap

@@ -389,9 +389,15 @@ printWidth: 80
   canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[    @notVarNested][notVar];
   canChangeCase: @var[@notVarNested    ][notVar];
+  canChangeCase: @var[    @notVarNested    ][notVar];
+  canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[@notVarNested][    notVar];
   canChangeCase: @var[@notVarNested][notVar    ];
+  canChangeCase: @var[@notVarNested][    notVar    ];
   canChangeCase: @var[notVar];
+  canChangeCase: @var[    notVar];
+  canChangeCase: @var[notVar    ];
+  canChangeCase: @var[    notVar    ];
 }
 
 =====================================output=====================================
@@ -453,11 +459,17 @@ printWidth: 80
 };
 
 @not-var {
-  canchangecase: @var[ @notVarNested][notVar];
-  canchangecase: @var[ @notVarNested][notVar];
-  canchangecase: @var[ @notVarNested ][notVar];
-  canchangecase: @var[ @notVarNested][ notVar];
-  canchangecase: @var[ @notVarNested][notVar ];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[@notVarNested][notVar];
+  canchangecase: @var[notVar];
+  canchangecase: @var[notVar];
+  canchangecase: @var[notVar];
   canchangecase: @var[notVar];
 }
 

tests/format/less/case/variable.less

@@ -59,7 +59,13 @@
   canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[    @notVarNested][notVar];
   canChangeCase: @var[@notVarNested    ][notVar];
+  canChangeCase: @var[    @notVarNested    ][notVar];
+  canChangeCase: @var[@notVarNested][notVar];
   canChangeCase: @var[@notVarNested][    notVar];
   canChangeCase: @var[@notVarNested][notVar    ];
+  canChangeCase: @var[@notVarNested][    notVar    ];
   canChangeCase: @var[notVar];
+  canChangeCase: @var[    notVar];
+  canChangeCase: @var[notVar    ];
+  canChangeCase: @var[    notVar    ];
 }

tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`function-argument-2.scss format 1`] = `
+====================================options=====================================
+parsers: ["scss"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+$display-breakpoints: map-deep-merge(
+  (
+    "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
+    "sm-only": "inside a long long long long long long long long long long long long long long string #{call("")}",
+    "sm-only": "inside a long long long long long long long long long long long long long long string #{$foo} and #{call("")}",
+    "sm-only": "inside a long long long long long long long long long long long long long long string #{call($a)}",
+  ),
+  $display-breakpoints
+);
+
+@each $name, $hue in $hues {
+  $map: map.merge(
+    $map,
+    (
+      '#{$prefix}-#{$name}': blend.set($base, $hue: $hue),
+    )
+  );
+}
+
+=====================================output=====================================
+$display-breakpoints: map-deep-merge(
+  (
+    "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
+    "sm-only":
+      "inside a long long long long long long long long long long long long long long string #{call("")}",
+    "sm-only":
+      "inside a long long long long long long long long long long long long long long string #{$foo} and #{call("")}",
+    "sm-only":
+      "inside a long long long long long long long long long long long long long long string #{call($a)}",
+  ),
+  $display-breakpoints
+);
+
+@each $name, $hue in $hues {
+  $map: map.merge(
+    $map,
+    (
+      "#{$prefix}-#{$name}": blend.set($base, $hue: $hue),
+    )
+  );
+}
+
+================================================================================
+`;
+
 exports[`functional-argument.scss format 1`] = `
 ====================================options=====================================
 parsers: ["scss"]

tests/format/scss/map/function-argument/function-argument-2.scss

@@ -0,0 +1,18 @@
+$display-breakpoints: map-deep-merge(
+  (
+    "sm-only": "only screen and (min-width: #{$map-get + $grid-breakpoints + "hogehoge"}) and (max-width: #{$a})",
+    "sm-only": "inside a long long long long long long long long long long long long long long string #{call("")}",
+    "sm-only": "inside a long long long long long long long long long long long long long long string #{$foo} and #{call("")}",
+    "sm-only": "inside a long long long long long long long long long long long long long long string #{call($a)}",
+  ),
+  $display-breakpoints
+);
+
+@each $name, $hue in $hues {
+  $map: map.merge(
+    $map,
+    (
+      '#{$prefix}-#{$name}': blend.set($base, $hue: $hue),
+    )
+  );
+}

website/pages/en/index.js

@@ -321,7 +321,7 @@ const UsersSection = ({ language }) => {
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
                 More than{" "}
-                <strong data-placeholder="dependent-github">5.1 million</strong>{" "}
+                <strong data-placeholder="dependent-github">5.2 million</strong>{" "}
                 dependent repositories on GitHub
               </p>
               <Button href="https://github.com/prettier/prettier/network/dependents">
@@ -336,8 +336,7 @@ const UsersSection = ({ language }) => {
             </a>
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
-                More than{" "}
-                <strong data-placeholder="dependent-npm">12.8k</strong>{" "}
+                More than <strong data-placeholder="dependent-npm">13k</strong>{" "}
                 dependent packages on npm
               </p>
               <Button href="https://www.npmjs.com/browse/depended/prettier">

website/versioned_docs/version-stable/browser.md

@@ -21,8 +21,8 @@ Required options:
 
 - **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files named
 
-  - `parser-*.js` in <https://unpkg.com/browse/prettier@2.8.1/> and
-  - `parser-*.mjs` in <https://unpkg.com/browse/prettier@2.8.1/esm/>
+  - `parser-*.js` in <https://unpkg.com/browse/prettier@2.8.2/> and
+  - `parser-*.mjs` in <https://unpkg.com/browse/prettier@2.8.2/esm/>
 
   You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
 
@@ -33,8 +33,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.8.1/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.8.1/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.8.2/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.8.2/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -49,8 +49,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.8.1/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.8.1/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.8.2/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.8.2/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -63,8 +63,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.8.1/standalone.js",
-  "https://unpkg.com/prettier@2.8.1/parser-graphql.js",
+  "https://unpkg.com/prettier@2.8.2/standalone.js",
+  "https://unpkg.com/prettier@2.8.2/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.8.1/standalone.js");
-importScripts("https://unpkg.com/prettier@2.8.1/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.8.2/standalone.js");
+importScripts("https://unpkg.com/prettier@2.8.2/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -103,8 +103,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.8.1/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.8.1/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.8.2/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.8.2/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -120,9 +120,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.8.1/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.8.1/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.8.1/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.8.2/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.8.2/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.8.2/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {