diff --git a/.eslintrc.js b/.eslintrc.js
index 965feb75e..562538ab6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -97,6 +97,7 @@ module.exports = {
       },
     ],
     "import/order": "error",
+    "import/no-anonymous-default-export": "error",
 
     "regexp/match-any": [
       "error",
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 471f732ee..9423d6060 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -5,6 +5,8 @@
 # See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
 
 # Prettier bump after release
+# 2.4.0
+ef514b9b5c817cf5105bac31a59e88cbdbdf189b
 # 2.3.2
 0747d9204113ee4bb4e3c2bab113dc3772a5e8d9
 # 2.3.1
diff --git a/.github/ISSUE_TEMPLATE/formatting.md b/.github/ISSUE_TEMPLATE/formatting.md
index c6dd4d3af..4d1086e84 100644
--- a/.github/ISSUE_TEMPLATE/formatting.md
+++ b/.github/ISSUE_TEMPLATE/formatting.md
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
 
 -->
 
-**Prettier 2.3.2**
+**Prettier 2.4.0**
 [Playground link](https://prettier.io/playground/#.....)
 
 ```sh
diff --git a/.github/ISSUE_TEMPLATE/integration.md b/.github/ISSUE_TEMPLATE/integration.md
index c1eb47a77..392f0594a 100644
--- a/.github/ISSUE_TEMPLATE/integration.md
+++ b/.github/ISSUE_TEMPLATE/integration.md
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
 
 **Environments:**
 
-- Prettier Version: 2.3.2
+- Prettier Version: 2.4.0
 - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
 - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
 - Operating System: <!-- Windows, Linux, macOS, etc. -->
diff --git a/.github/workflows/dev-package-test.yml b/.github/workflows/dev-package-test.yml
index 625a8b5f7..dd3b770f2 100644
--- a/.github/workflows/dev-package-test.yml
+++ b/.github/workflows/dev-package-test.yml
@@ -44,7 +44,7 @@ jobs:
 
       - name: Install Client Package
         if: ${{ matrix.NPM_CLIENT == 'pnpm' }}
-        run: npm install --global pnpm@5
+        run: npm install --global pnpm
 
       - name: Run Tests
         run: yarn test:dev-package --maxWorkers=2
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3eebeea69..34fccfd16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.4.0
+
+[diff](https://github.com/prettier/prettier/compare/2.3.2...2.4.0)
+
+🔗 [Release Notes](https://prettier.io/blog/2021/09/09/2.4.0.html)
+
 # 2.3.2
 
 [diff](https://github.com/prettier/prettier/compare/2.3.1...2.3.2)
diff --git a/changelog_unreleased/cli/10924.md b/changelog_unreleased/cli/10924.md
deleted file mode 100644
index 22486a31d..000000000
--- a/changelog_unreleased/cli/10924.md
+++ /dev/null
@@ -1,3 +0,0 @@
-#### Infer parser for `.stylelintrc` (#10924 by @SevenOutman)
-
-A `.stylelintrc` file (without extension) is handled using `json` and `yaml` parsers.
diff --git a/changelog_unreleased/flow/11398.md b/changelog_unreleased/flow/11398.md
deleted file mode 100644
index 02b564d6f..000000000
--- a/changelog_unreleased/flow/11398.md
+++ /dev/null
@@ -1,26 +0,0 @@
-#### Print leading semi before Flow variance sigils (#11398 by @noppa)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-class A {
-  +one = function() {};
-  -two = val();
-  +#privOne = val();
-  static +#privTwo = val();
-}
-// Prettier stable
-class A {
-  +one = function() {}
-  -two = val()
-  +#privOne = val()
-  static +#privTwo = val()
-}
-// Prettier main
-class A {
-  +one = function() {};
-  -two = val();
-  +#privOne = val()
-  static +#privTwo = val()
-}
-```
diff --git a/changelog_unreleased/html/11006.md b/changelog_unreleased/html/11006.md
deleted file mode 100644
index ec31be784..000000000
--- a/changelog_unreleased/html/11006.md
+++ /dev/null
@@ -1,35 +0,0 @@
-#### Replace `jsxBracketSameLine` option with `bracketSameLine` option (#11006 by @kurtztech)
-
-Deprecate the `jsxBracketSameLine` option in favour of new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
-
-<!-- prettier-ignore -->
-```html
-<!-- Input -->
-<div id="foo-bar-baz"
-  class="bar-foo-baz"
-  title="a sample title"
-  data-foo="bar"
-  data-bar="baz">lorem ipsum dolor sit amet</div>
-
-<!-- Prettier stable -->
-<div
-  id="foo-bar-baz"
-  class="bar-foo-baz"
-  title="a sample title"
-  data-foo="bar"
-  data-bar="baz"
->
-  lorem ipsum dolor sit amet
-</div>
-
-<!-- Prettier main -->
-<!-- Options: `{bracketSameLine: true}` -->
-<div
-  id="foo-bar-baz"
-  class="bar-foo-baz"
-  title="a sample title"
-  data-foo="bar"
-  data-bar="baz">
-  lorem ipsum dolor sit amet
-</div>
-```
diff --git a/changelog_unreleased/javascript/11246.md b/changelog_unreleased/javascript/11246.md
deleted file mode 100644
index 7530e7b41..000000000
--- a/changelog_unreleased/javascript/11246.md
+++ /dev/null
@@ -1,29 +0,0 @@
-#### Support parenthesized tagged template literals for styled components (#11246 by @sosukesuzuki)
-
-<!-- prettier-ignore -->
-```js
-// Input
-const StyledComponent =
-  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
-  (styled.div)`
-    position:   fixed;
-  color: red;
-  `;
-
-// Prettier main
-const StyledComponent =
-  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
-  (styled.div)`
-    position:   fixed;
-  color: red;
-  `;
-
-// Prettier stable
-const StyledComponent =
-  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
-  (styled.div)`
-    position: fixed;
-    color: red;
-  `;
-
-```
diff --git a/changelog_unreleased/javascript/11299.md b/changelog_unreleased/javascript/11299.md
deleted file mode 100644
index 93c8fea17..000000000
--- a/changelog_unreleased/javascript/11299.md
+++ /dev/null
@@ -1,26 +0,0 @@
-#### Count correctly regex literals in method chain arguments (#11299 by @sosukesuzuki)
-
-<!-- prettier-ignore -->
-```js
-// Input
-foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);
-
-foo1(/叱叱叱/).foo2(bar).foo3(baz);
-
-// Prettier stable
-foo1(/𠮟𠮟𠮟/)
-  .foo2(bar)
-  .foo3(baz);
-
-foo1(/叱叱叱/).foo2(bar).foo3(baz);
-
-// Prettier main
-foo1(/𠮟𠮟𠮟/)
-  .foo2(bar)
-  .foo3(baz);
-
-foo1(/叱叱叱/)
-  .foo2(bar)
-  .foo3(baz);
-
-```
diff --git a/changelog_unreleased/javascript/11335.md b/changelog_unreleased/javascript/11335.md
deleted file mode 100644
index ee81f936e..000000000
--- a/changelog_unreleased/javascript/11335.md
+++ /dev/null
@@ -1,20 +0,0 @@
-#### Support hack-style pipeline proposal (#11335 by @sosukesuzuki)
-
-Support new [hack-style pipeline proposal](https://github.com/js-choi/proposal-hack-pipes). We chose `%` as the topic token, following the official explainer.
-
-Also, [smart-style pipeline proposal](https://github.com/js-choi/proposal-smart-pipelines) is removed. See https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax for the rationale behind this decision.
-
-```js
-// Input
-const foo = fn() |> fn1(%) |> fn2(%);
-
-// Prettier stable
-SyntaxError: Unexpected token (1:25)
-> 1 | const foo = fn() |> fn1(%) |> fn2(%);
-    |                         ^
-  2 |
-
-// Prettier main
-const foo = fn() |> fn1(%) |> fn(%);
-
-```
diff --git a/changelog_unreleased/scss/11461.md b/changelog_unreleased/scss/11461.md
deleted file mode 100644
index 720248387..000000000
--- a/changelog_unreleased/scss/11461.md
+++ /dev/null
@@ -1,16 +0,0 @@
-#### Consistently quote Sass modules strings (#11461 by @niksy)
-
-<!-- prettier-ignore -->
-```scss
-// Input
-@use "sass:math";
-@forward "list";
-
-// Prettier stable
-@use "sass:math";
-@forward "list";
-
-// Prettier main
-@use 'sass:math';
-@forward 'list';
-```
diff --git a/changelog_unreleased/typescript/11247.md b/changelog_unreleased/typescript/11247.md
deleted file mode 100644
index be5c164d7..000000000
--- a/changelog_unreleased/typescript/11247.md
+++ /dev/null
@@ -1,27 +0,0 @@
-#### Fix formatting intersection types that includes mapped types (#11247 by @sosukesuzuki)
-
-<!-- prettier-ignore -->
-```ts
-// Input
-type Example = {
-  [A in B]: T;
-} & {
-  [A in B]: T;
-};
-
-// Prettier stable
-type Example = {
-  [A in B]: T;
-} &
-  {
-    [A in B]: T;
-  };
-
-// Prettier main
-type Example = {
-  [A in B]: T;
-} & {
-  [A in B]: T;
-};
-
-```
diff --git a/changelog_unreleased/typescript/11426.md b/changelog_unreleased/typescript/11426.md
deleted file mode 100644
index 5a0bd11e5..000000000
--- a/changelog_unreleased/typescript/11426.md
+++ /dev/null
@@ -1,45 +0,0 @@
-#### Support TypeScript 4.4 (#11426 by @sosukesuzuki)
-
-Support [TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/)!
-
-##### [`static` Blocks in Classes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#static-blocks)
-
-Class Static Blocks syntax is a Stage 4 ECMAScript proposal. See https://github.com/tc39/proposal-class-static-block for more details.
-
-<!-- prettier-ignore -->
-```tsx
-// Input
-class Foo {
-  static count = 0;
-
-  // This is a static block:
-  static {
-    if (someCondition()) {
-      Foo.count++;
-    }
-  }
-}
-
-// Prettier stable
-SyntaxError: Declaration expected. (5:9)
-  3 |
-  4 |   // This is a static block:
-> 5 |   static {
-    |         ^
-  6 |     if (someCondition()) {
-  7 |       Foo.count++;
-  8 |     }
-
-// Prettier main
-class Foo {
-  static count = 0;
-
-  // This is a static block:
-  static {
-    if (someCondition()) {
-      Foo.count++;
-    }
-  }
-}
-
-```
diff --git a/docs/browser.md b/docs/browser.md
index fa1718e0d..8c650329e 100644
--- a/docs/browser.md
+++ b/docs/browser.md
@@ -32,8 +32,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.3.2/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.3.2/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -48,8 +48,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.3.2/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.3.2/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.4.0/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -62,8 +62,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.3.2/standalone.js",
-  "https://unpkg.com/prettier@2.3.2/parser-graphql.js",
+  "https://unpkg.com/prettier@2.4.0/standalone.js",
+  "https://unpkg.com/prettier@2.4.0/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -88,8 +88,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.3.2/standalone.js");
-importScripts("https://unpkg.com/prettier@2.3.2/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.4.0/standalone.js");
+importScripts("https://unpkg.com/prettier@2.4.0/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -102,8 +102,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.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -119,9 +119,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.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.4.0/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/jest.config.js b/jest.config.js
index c7338504c..cef136fd3 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const path = require("path");
-const installPrettier = require("./scripts/install-prettier.js");
+const installPrettier = require("./tests/config/install-prettier.js");
 
 const PROJECT_ROOT = __dirname;
 const isProduction = process.env.NODE_ENV === "production";
diff --git a/package.json b/package.json
index f13c67db5..a98417f97 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.4.0-dev",
+  "version": "2.5.0-dev",
   "description": "Prettier is an opinionated code formatter",
   "bin": "./bin/prettier.js",
   "repository": "prettier/prettier",
@@ -128,7 +128,7 @@
     "node-fetch": "2.6.1",
     "npm-run-all": "4.1.5",
     "path-browserify": "1.0.1",
-    "prettier": "2.3.2",
+    "prettier": "2.4.0",
     "pretty-bytes": "5.6.0",
     "rimraf": "3.0.2",
     "rollup": "2.53.3",
diff --git a/scripts/build/build.mjs b/scripts/build/build.mjs
index cc7a6c4af..2c718da65 100644
--- a/scripts/build/build.mjs
+++ b/scripts/build/build.mjs
@@ -4,12 +4,19 @@ import path from "node:path";
 import fs from "node:fs/promises";
 import readline from "node:readline";
 import chalk from "chalk";
-import execa from "execa";
 import minimist from "minimist";
 import prettyBytes from "pretty-bytes";
+import rimraf from "rimraf";
 import bundler from "./bundler.mjs";
 import bundleConfigs from "./config.mjs";
-import * as utils from "./utils.mjs";
+import {
+  PROJECT_ROOT,
+  CACHE_DIR,
+  DIST_DIR,
+  readJson,
+  writeJson,
+  copyFile,
+} from "./utils.mjs";
 import Cache from "./cache.mjs";
 
 // Errors in promises should be fatal.
@@ -67,7 +74,7 @@ async function createBundle(bundleConfig, cache, options) {
       return;
     }
 
-    const file = path.join("dist", output);
+    const file = path.join(DIST_DIR, output);
 
     // Files including U+FFEE can't load in Chrome Extension
     // `prettier-chrome-extension` https://github.com/prettier/prettier-chrome-extension
@@ -93,7 +100,11 @@ async function createBundle(bundleConfig, cache, options) {
         bundleConfig.bundler !== "webpack" &&
         target === "universal"
       ) {
-        const esmFile = path.join("dist/esm", output.replace(".js", ".mjs"));
+        const esmFile = path.join(
+          DIST_DIR,
+          "esm",
+          output.replace(".js", ".mjs")
+        );
         sizeTexts.push(`esm ${await getSizeText(esmFile)}`);
       }
       process.stdout.write(fitTerminal(output, `${sizeTexts.join(", ")} `));
@@ -112,41 +123,23 @@ function handleError(error) {
   throw error;
 }
 
-async function cacheFiles(cache) {
-  // Copy built files to .cache
-  try {
-    await execa("rm", ["-rf", path.join(".cache", "files")]);
-    await execa("mkdir", ["-p", path.join(".cache", "files")]);
-    await execa("mkdir", ["-p", path.join(".cache", "files", "esm")]);
-    const manifest = cache.updated;
-
-    for (const file of Object.keys(manifest.files)) {
-      await execa("cp", [
-        file,
-        path.join(".cache", file.replace("dist", "files")),
-      ]);
-    }
-  } catch {
-    // Don't fail the build
-  }
-}
-
 async function preparePackage() {
-  const pkg = await utils.readJson("package.json");
-  pkg.bin = "./bin-prettier.js";
-  pkg.engines.node = ">=10.13.0";
-  delete pkg.dependencies;
-  delete pkg.devDependencies;
-  delete pkg.browserslist;
-  pkg.scripts = {
+  const packageJson = await readJson(path.join(PROJECT_ROOT, "package.json"));
+  packageJson.bin = "./bin-prettier.js";
+  packageJson.engines.node = ">=10.13.0";
+  delete packageJson.dependencies;
+  delete packageJson.devDependencies;
+  delete packageJson.browserslist;
+  packageJson.scripts = {
     prepublishOnly:
       "node -e \"assert.equal(require('.').version, require('..').version)\"",
   };
-  pkg.files = ["*.js", "esm/*.mjs"];
-  await utils.writeJson("dist/package.json", pkg);
+  packageJson.files = ["*.js", "esm/*.mjs"];
+  await writeJson(path.join(DIST_DIR, "package.json"), packageJson);
 
-  await utils.copyFile("./README.md", "./dist/README.md");
-  await utils.copyFile("./LICENSE", "./dist/LICENSE");
+  for (const file of ["README.md", "LICENSE"]) {
+    await copyFile(path.join(PROJECT_ROOT, file), path.join(DIST_DIR, file));
+  }
 }
 
 async function run(params) {
@@ -156,19 +149,20 @@ async function run(params) {
   if (params.file) {
     configs = configs.filter(({ output }) => output === params.file);
   } else {
-    await execa("rm", ["-rf", "dist"]);
+    rimraf.sync(DIST_DIR);
   }
 
-  await execa("mkdir", ["-p", "dist"]);
-  await execa("mkdir", ["-p", "dist/esm"]);
-
   if (params["purge-cache"]) {
-    await execa("rm", ["-rf", ".cache"]);
+    rimraf.sync(CACHE_DIR);
   }
 
   let bundleCache;
   if (shouldUseCache) {
-    bundleCache = new Cache(".cache/", CACHE_VERSION);
+    bundleCache = new Cache({
+      cacheDir: CACHE_DIR,
+      distDir: DIST_DIR,
+      version: CACHE_VERSION,
+    });
     await bundleCache.load();
   }
 
@@ -179,7 +173,6 @@ async function run(params) {
   }
 
   if (shouldUseCache) {
-    await cacheFiles(bundleCache);
     await bundleCache.save();
   }
 
diff --git a/scripts/build/bundler.mjs b/scripts/build/bundler.mjs
index 20b451da0..7d2f647e7 100644
--- a/scripts/build/bundler.mjs
+++ b/scripts/build/bundler.mjs
@@ -14,9 +14,9 @@ import rollupPluginExecutable from "./rollup-plugins/executable.mjs";
 import rollupPluginEvaluate from "./rollup-plugins/evaluate.mjs";
 import rollupPluginReplaceModule from "./rollup-plugins/replace-module.mjs";
 import bundles from "./config.mjs";
+import { PROJECT_ROOT, DIST_DIR } from "./utils.mjs";
 
 const { __dirname, require, json } = createEsmUtils(import.meta);
-const PROJECT_ROOT = path.join(__dirname, "../..");
 const packageJson = json.loadSync("../../package.json");
 
 const entries = [
@@ -120,7 +120,7 @@ function getBabelConfig(bundle) {
 
 function getRollupConfig(bundle) {
   const config = {
-    input: bundle.input,
+    input: path.join(PROJECT_ROOT, bundle.input),
     onwarn(warning) {
       if (
         // ignore `MIXED_EXPORTS` warn
@@ -261,7 +261,7 @@ function getRollupOutputOptions(bundle, buildOptions) {
   const options = {
     // Avoid warning form #8797
     exports: "auto",
-    file: `dist/${bundle.output}`,
+    file: path.join(DIST_DIR, bundle.output),
     name: bundle.name,
     plugins: [
       bundle.minify !== false &&
@@ -286,7 +286,10 @@ function getRollupOutputOptions(bundle, buildOptions) {
         !buildOptions.playground && {
           ...options,
           format: "esm",
-          file: `dist/esm/${bundle.output.replace(".js", ".mjs")}`,
+          file: path.join(
+            DIST_DIR,
+            `esm/${bundle.output.replace(".js", ".mjs")}`
+          ),
         },
       ].filter(Boolean);
     }
@@ -296,6 +299,7 @@ function getRollupOutputOptions(bundle, buildOptions) {
   if (buildOptions.playground) {
     return { skipped: true };
   }
+
   return [options];
 }
 
diff --git a/scripts/build/cache.mjs b/scripts/build/cache.mjs
index 6da2afb74..3e1a80c31 100644
--- a/scripts/build/cache.mjs
+++ b/scripts/build/cache.mjs
@@ -2,17 +2,14 @@ import { strict as assert } from "node:assert";
 import crypto from "node:crypto";
 import fs from "node:fs/promises";
 import path from "node:path";
-import execa from "execa";
 import { rollup } from "rollup";
-import createEsmUtils from "esm-utils";
-
-const { __dirname } = createEsmUtils(import.meta);
-const ROOT = path.join(__dirname, "..", "..");
+import { PROJECT_ROOT, readJson, writeJson, copyFile } from "./utils.mjs";
 
 class Cache {
-  constructor(cacheDir, version) {
-    this.cacheDir = path.resolve(cacheDir || required("cacheDir"));
-    this.manifest = path.join(this.cacheDir, "manifest.json");
+  constructor({ cacheDir, distDir, version }) {
+    this.cacheDir = cacheDir || required("cacheDir");
+    this.distDir = distDir || required("distDir");
+    this.manifest = path.join(cacheDir, "manifest.json");
     this.version = version || required("version");
     this.checksums = {};
     this.files = {};
@@ -26,13 +23,15 @@ class Cache {
   // Loads the manifest.json file with the information from the last build
   async load() {
     // This should never throw, if it does, let it fail the build
-    const lockfile = await fs.readFile("yarn.lock", "utf-8");
+    const lockfile = await fs.readFile(
+      path.join(PROJECT_ROOT, "yarn.lock"),
+      "utf8"
+    );
     const lockfileHash = hashString(lockfile);
     this.updated.checksums["yarn.lock"] = lockfileHash;
 
     try {
-      const manifest = await fs.readFile(this.manifest, "utf-8");
-      const { version, checksums, files } = JSON.parse(manifest);
+      const { version, checksums, files } = await readJson(this.manifest);
 
       // Ignore the cache if the version changed
       assert.strictEqual(this.version, version);
@@ -40,17 +39,17 @@ class Cache {
       assert.ok(typeof checksums === "object");
       // If yarn.lock changed, rebuild everything
       assert.strictEqual(lockfileHash, checksums["yarn.lock"]);
-      this.checksums = checksums;
 
       assert.ok(typeof files === "object");
-      this.files = files;
 
-      for (const files of Object.values(this.files)) {
-        assert.ok(Array.isArray(files));
+      for (const modules of Object.values(files)) {
+        assert.ok(Array.isArray(modules));
       }
+
+      this.checksums = checksums;
+      this.files = files;
     } catch {
-      this.checksums = {};
-      this.files = {};
+      // noop
     }
   }
 
@@ -69,7 +68,10 @@ class Cache {
 
     const modules = output
       .filter((mod) => !/\0/.test(mod.facadeModuleId))
-      .map((mod) => [path.relative(ROOT, mod.facadeModuleId), mod.code]);
+      .map((mod) => [
+        path.relative(PROJECT_ROOT, mod.facadeModuleId),
+        mod.code,
+      ]);
 
     for (const [id, code] of modules) {
       newFiles.push(id);
@@ -95,28 +97,32 @@ class Cache {
   }
 
   async save() {
-    try {
-      await fs.writeFile(this.manifest, JSON.stringify(this.updated, null, 2));
-    } catch {
-      // Don't fail the build
+    const { manifest, updated } = this;
+
+    await writeJson(manifest, updated);
+
+    const files = Object.keys(updated.files);
+    for (const file of files) {
+      await copyFile(
+        path.join(this.distDir, file),
+        path.join(this.cacheDir, "files", file)
+      );
     }
   }
 
   async isCached(inputOptions, outputOption) {
-    const useCache = await this.checkBundle(
-      outputOption.file,
-      inputOptions,
-      outputOption
-    );
+    const file = path.relative(this.distDir, outputOption.file);
+    const useCache = await this.checkBundle(file, inputOptions, outputOption);
+
     if (useCache) {
       try {
-        await execa("cp", [
-          path.join(this.cacheDir, outputOption.file.replace("dist", "files")),
-          outputOption.file,
-        ]);
+        await copyFile(
+          path.join(this.cacheDir, "files", file),
+          path.join(this.distDir, file)
+        );
+
         return true;
-      } catch (err) {
-        console.log(err);
+      } catch {
         // Proceed to build
       }
     }
diff --git a/scripts/build/config.mjs b/scripts/build/config.mjs
index ba2fe3c93..23f50533c 100644
--- a/scripts/build/config.mjs
+++ b/scripts/build/config.mjs
@@ -158,4 +158,5 @@ const coreBundles = [
   ...bundle,
 }));
 
-export default [...coreBundles, ...parsers];
+const configs = [...coreBundles, ...parsers];
+export default configs;
diff --git a/scripts/build/rollup-plugins/evaluate.mjs b/scripts/build/rollup-plugins/evaluate.mjs
index d793380be..bf60d0aef 100644
--- a/scripts/build/rollup-plugins/evaluate.mjs
+++ b/scripts/build/rollup-plugins/evaluate.mjs
@@ -2,7 +2,7 @@ import createEsmUtils from "esm-utils";
 
 const { require } = createEsmUtils(import.meta);
 
-export default function () {
+export default function rollupPluginEvaluate() {
   return {
     name: "evaluate",
 
diff --git a/scripts/build/rollup-plugins/executable.mjs b/scripts/build/rollup-plugins/executable.mjs
index 10f35df4b..651dd1439 100644
--- a/scripts/build/rollup-plugins/executable.mjs
+++ b/scripts/build/rollup-plugins/executable.mjs
@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 
-export default function () {
+export default function rollupPluginExecutable() {
   let banner;
   let entry;
   let file;
diff --git a/scripts/build/rollup-plugins/replace-module.mjs b/scripts/build/rollup-plugins/replace-module.mjs
index 81605600a..d067e0d82 100644
--- a/scripts/build/rollup-plugins/replace-module.mjs
+++ b/scripts/build/rollup-plugins/replace-module.mjs
@@ -1,6 +1,6 @@
 import fs from "node:fs";
 
-export default function (replacements = {}) {
+export default function rollupPluginReplaceModule(replacements = {}) {
   return {
     name: "replace-module",
 
diff --git a/scripts/build/shims/fs.mjs b/scripts/build/shims/fs.mjs
index 2ee6ac3c9..a91fc24ce 100644
--- a/scripts/build/shims/fs.mjs
+++ b/scripts/build/shims/fs.mjs
@@ -1,2 +1,4 @@
 export const existsSync = () => false;
 export const readFileSync = () => "";
+const fs = { existsSync, readFileSync };
+export default fs;
diff --git a/scripts/build/shims/os.mjs b/scripts/build/shims/os.mjs
index 27e543d96..a39aa4726 100644
--- a/scripts/build/shims/os.mjs
+++ b/scripts/build/shims/os.mjs
@@ -1,5 +1,6 @@
-export default {
+const os = {
   EOL: "\n",
   platform: () => "browser",
   cpus: () => [{ model: "Prettier" }],
 };
+export default os;
diff --git a/scripts/build/shims/tty.mjs b/scripts/build/shims/tty.mjs
index 0fdd5b758..8023208d1 100644
--- a/scripts/build/shims/tty.mjs
+++ b/scripts/build/shims/tty.mjs
@@ -1,5 +1,6 @@
-export default {
+const tty = {
   isatty() {
     return false;
   },
 };
+export default tty;
diff --git a/scripts/build/utils.mjs b/scripts/build/utils.mjs
index b474be33f..1c4c6d992 100644
--- a/scripts/build/utils.mjs
+++ b/scripts/build/utils.mjs
@@ -1,4 +1,6 @@
 import fs from "node:fs/promises";
+import url from "node:url";
+import path from "node:path";
 
 async function readJson(file) {
   const data = await fs.readFile(file);
@@ -7,12 +9,26 @@ async function readJson(file) {
 
 function writeJson(file, content) {
   content = JSON.stringify(content, null, 2);
-  return fs.writeFile(file, content);
+  return writeFile(file, content);
 }
 
 async function copyFile(from, to) {
   const data = await fs.readFile(from);
-  return fs.writeFile(to, data);
+  return writeFile(to, data);
 }
 
-export { readJson, writeJson, copyFile };
+async function writeFile(file, content) {
+  const directory = path.dirname(file);
+  try {
+    await fs.mkdir(directory, { recursive: true });
+  } catch {
+    // noop
+  }
+  return fs.writeFile(file, content);
+}
+
+const PROJECT_ROOT = url.fileURLToPath(new URL("../../", import.meta.url));
+const CACHE_DIR = path.join(PROJECT_ROOT, ".cache");
+const DIST_DIR = path.join(PROJECT_ROOT, "dist");
+
+export { PROJECT_ROOT, DIST_DIR, CACHE_DIR, readJson, writeJson, copyFile };
diff --git a/scripts/install-prettier.js b/scripts/install-prettier.js
deleted file mode 100644
index d435defa6..000000000
--- a/scripts/install-prettier.js
+++ /dev/null
@@ -1,36 +0,0 @@
-"use strict";
-
-const path = require("path");
-const shell = require("shelljs");
-const tempy = require("tempy");
-
-shell.config.fatal = true;
-
-const client = process.env.NPM_CLIENT || "yarn";
-
-module.exports = (packageDir) => {
-  const tmpDir = tempy.directory();
-  const file = shell.exec("npm pack", { cwd: packageDir }).stdout.trim();
-  shell.mv(path.join(packageDir, file), tmpDir);
-  const tarPath = path.join(tmpDir, file);
-
-  shell.exec(`${client} init -y`, { cwd: tmpDir, silent: true });
-  let installCommand = "";
-  switch (client) {
-    case "npm":
-      // npm fails when engine requirement only with `--engine-strict`
-      installCommand = `npm install "${tarPath}" --engine-strict`;
-      break;
-    case "pnpm":
-      // Note: current pnpm can't work with `--engine-strict` and engineStrict setting in `.npmrc`
-      installCommand = `pnpm add "${tarPath}"`;
-      break;
-    default:
-      // yarn fails when engine requirement not compatible by default
-      installCommand = `yarn add "${tarPath}"`;
-  }
-
-  shell.exec(installCommand, { cwd: tmpDir });
-
-  return path.join(tmpDir, "node_modules/prettier");
-};
diff --git a/scripts/release/steps/bump-prettier.js b/scripts/release/steps/bump-prettier.js
index 0084a1eb2..de98b4bd8 100644
--- a/scripts/release/steps/bump-prettier.js
+++ b/scripts/release/steps/bump-prettier.js
@@ -36,7 +36,7 @@ async function bump({
   await writeJson("package.json", pkg, { spaces: 2 });
 }
 
-export default async function (params) {
+export default async function bumpPrettier(params) {
   const { dry, version } = params;
 
   if (dry) {
diff --git a/scripts/release/steps/check-git-status.js b/scripts/release/steps/check-git-status.js
index 7860b3ec3..400cc8b0e 100644
--- a/scripts/release/steps/check-git-status.js
+++ b/scripts/release/steps/check-git-status.js
@@ -1,6 +1,6 @@
 import { runGit } from "../utils.js";
 
-export default async function () {
+export default async function checkGitStatus() {
   const { stdout: status } = await runGit(["status", "--porcelain"]);
 
   if (status) {
diff --git a/scripts/release/steps/generate-bundles.js b/scripts/release/steps/generate-bundles.js
index f5b799aba..d513cc43f 100644
--- a/scripts/release/steps/generate-bundles.js
+++ b/scripts/release/steps/generate-bundles.js
@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import { runYarn, logPromise, readJson } from "../utils.js";
 
-export default async function ({ version }) {
+export default async function generateBundles({ version }) {
   await logPromise("Generating bundles", runYarn(["build", "--purge-cache"]));
 
   const builtPkg = await readJson("dist/package.json");
diff --git a/scripts/release/steps/install-dependencies.js b/scripts/release/steps/install-dependencies.js
index 8d5928143..202974019 100644
--- a/scripts/release/steps/install-dependencies.js
+++ b/scripts/release/steps/install-dependencies.js
@@ -13,6 +13,6 @@ async function install() {
   }
 }
 
-export default function () {
+export default function installDependencies() {
   return logPromise("Installing NPM dependencies", install());
 }
diff --git a/scripts/release/steps/post-publish-steps.js b/scripts/release/steps/post-publish-steps.js
index 3d4346149..3447d52f1 100644
--- a/scripts/release/steps/post-publish-steps.js
+++ b/scripts/release/steps/post-publish-steps.js
@@ -43,7 +43,7 @@ function twitterAnnouncement() {
   `);
 }
 
-export default async function () {
+export default async function postPublishSteps() {
   const steps = [await checkSchema(), twitterAnnouncement()].filter(Boolean);
 
   console.log(chalk.bold.green("The script has finished!\n"));
diff --git a/scripts/release/steps/publish-to-npm.js b/scripts/release/steps/publish-to-npm.js
index f4fede901..587f92c09 100644
--- a/scripts/release/steps/publish-to-npm.js
+++ b/scripts/release/steps/publish-to-npm.js
@@ -27,7 +27,7 @@ async function retryNpmPublish() {
   }
 }
 
-export default async function ({ dry, version }) {
+export default async function publishToNpm({ dry, version }) {
   if (dry) {
     return;
   }
diff --git a/scripts/release/steps/push-to-git.js b/scripts/release/steps/push-to-git.js
index 914b53713..e794a52f9 100644
--- a/scripts/release/steps/push-to-git.js
+++ b/scripts/release/steps/push-to-git.js
@@ -7,7 +7,7 @@ async function pushGit({ version }) {
   await runGit(["push", "--tags"]);
 }
 
-export default function (params) {
+export default function pushToGit(params) {
   if (params.dry) {
     return;
   }
diff --git a/scripts/release/steps/run-tests.js b/scripts/release/steps/run-tests.js
index cf1f4880b..268a104bf 100644
--- a/scripts/release/steps/run-tests.js
+++ b/scripts/release/steps/run-tests.js
@@ -1,6 +1,6 @@
 import { runYarn, logPromise } from "../utils.js";
 
-export default async function () {
+export default async function runTests() {
   await logPromise("Running linter", runYarn("lint:eslint"));
   await logPromise("Running Prettier on docs", runYarn("lint:prettier"));
   await logPromise("Running tests", runYarn("test"));
diff --git a/scripts/release/steps/update-changelog.js b/scripts/release/steps/update-changelog.js
index 1f3d0abcb..3d66b5f19 100644
--- a/scripts/release/steps/update-changelog.js
+++ b/scripts/release/steps/update-changelog.js
@@ -42,7 +42,7 @@ async function getChangelogForPatch({ version, previousVersion }) {
   return changelog;
 }
 
-export default async function ({ version, previousVersion }) {
+export default async function updateChangelog({ version, previousVersion }) {
   const semverDiff = semver.diff(version, previousVersion);
 
   if (semverDiff !== "patch") {
diff --git a/scripts/release/steps/update-dependents-count.js b/scripts/release/steps/update-dependents-count.js
index ce46a0e50..7fa3e8037 100644
--- a/scripts/release/steps/update-dependents-count.js
+++ b/scripts/release/steps/update-dependents-count.js
@@ -71,7 +71,7 @@ function formatNumber(value) {
   return Math.floor(value / 1e5) / 10 + " million";
 }
 
-export default async function () {
+export default async function updateDependentsCount() {
   try {
     await update();
   } catch (error) {
diff --git a/scripts/release/steps/update-version.js b/scripts/release/steps/update-version.js
index dce557463..78b7004c2 100644
--- a/scripts/release/steps/update-version.js
+++ b/scripts/release/steps/update-version.js
@@ -32,6 +32,6 @@ async function bump({ version }) {
   });
 }
 
-export default async function (params) {
+export default async function updateVersion(params) {
   await logPromise("Bumping version", bump(params));
 }
diff --git a/scripts/release/steps/validate-new-version.js b/scripts/release/steps/validate-new-version.js
index b936f4625..09ed33051 100644
--- a/scripts/release/steps/validate-new-version.js
+++ b/scripts/release/steps/validate-new-version.js
@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import semver from "semver";
 
-export default function ({ version, previousVersion }) {
+export default function validateNewVersion({ version, previousVersion }) {
   if (!semver.valid(version)) {
     throw new Error("Invalid version specified");
   }
diff --git a/src/language-html/print/children.js b/src/language-html/print/children.js
new file mode 100644
index 000000000..02d97a54a
--- /dev/null
+++ b/src/language-html/print/children.js
@@ -0,0 +1,210 @@
+"use strict";
+
+const {
+  builders: { breakParent, group, ifBreak, line, softline, hardline },
+  utils: { replaceTextEndOfLine },
+} = require("../../document/index.js");
+const { locStart, locEnd } = require("../loc.js");
+const {
+  forceBreakChildren,
+  forceNextEmptyLine,
+  isTextLikeNode,
+  hasPrettierIgnore,
+  preferHardlineAsLeadingSpaces,
+} = require("../utils.js");
+const {
+  printOpeningTagPrefix,
+  needsToBorrowNextOpeningTagStartMarker,
+  printOpeningTagStartMarker,
+  needsToBorrowPrevClosingTagEndMarker,
+  printClosingTagEndMarker,
+  printClosingTagSuffix,
+  needsToBorrowParentClosingTagStartMarker,
+} = require("./tag.js");
+
+function printChild(childPath, options, print) {
+  const child = childPath.getValue();
+
+  if (hasPrettierIgnore(child)) {
+    return [
+      printOpeningTagPrefix(child, options),
+      ...replaceTextEndOfLine(
+        options.originalText.slice(
+          locStart(child) +
+            (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
+              ? printOpeningTagStartMarker(child).length
+              : 0),
+          locEnd(child) -
+            (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
+              ? printClosingTagEndMarker(child, options).length
+              : 0)
+        )
+      ),
+      printClosingTagSuffix(child, options),
+    ];
+  }
+
+  return print();
+}
+
+function printBetweenLine(prevNode, nextNode) {
+  return isTextLikeNode(prevNode) && isTextLikeNode(nextNode)
+    ? prevNode.isTrailingSpaceSensitive
+      ? prevNode.hasTrailingSpaces
+        ? preferHardlineAsLeadingSpaces(nextNode)
+          ? hardline
+          : line
+        : ""
+      : preferHardlineAsLeadingSpaces(nextNode)
+      ? hardline
+      : softline
+    : (needsToBorrowNextOpeningTagStartMarker(prevNode) &&
+        (hasPrettierIgnore(nextNode) ||
+          /**
+           *     123<a
+           *          ~
+           *       ><b>
+           */
+          nextNode.firstChild ||
+          /**
+           *     123<!--
+           *            ~
+           *     -->
+           */
+          nextNode.isSelfClosing ||
+          /**
+           *     123<span
+           *             ~
+           *       attr
+           */
+          (nextNode.type === "element" && nextNode.attrs.length > 0))) ||
+      /**
+       *     <img
+       *       src="long"
+       *                 ~
+       *     />123
+       */
+      (prevNode.type === "element" &&
+        prevNode.isSelfClosing &&
+        needsToBorrowPrevClosingTagEndMarker(nextNode))
+    ? ""
+    : !nextNode.isLeadingSpaceSensitive ||
+      preferHardlineAsLeadingSpaces(nextNode) ||
+      /**
+       *       Want to write us a letter? Use our<a
+       *         ><b><a>mailing address</a></b></a
+       *                                          ~
+       *       >.
+       */
+      (needsToBorrowPrevClosingTagEndMarker(nextNode) &&
+        prevNode.lastChild &&
+        needsToBorrowParentClosingTagStartMarker(prevNode.lastChild) &&
+        prevNode.lastChild.lastChild &&
+        needsToBorrowParentClosingTagStartMarker(prevNode.lastChild.lastChild))
+    ? hardline
+    : nextNode.hasLeadingSpaces
+    ? line
+    : softline;
+}
+
+function printChildren(path, options, print) {
+  const node = path.getValue();
+
+  if (forceBreakChildren(node)) {
+    return [
+      breakParent,
+
+      ...path.map((childPath) => {
+        const childNode = childPath.getValue();
+        const prevBetweenLine = !childNode.prev
+          ? ""
+          : printBetweenLine(childNode.prev, childNode);
+        return [
+          !prevBetweenLine
+            ? ""
+            : [
+                prevBetweenLine,
+                forceNextEmptyLine(childNode.prev) ? hardline : "",
+              ],
+          printChild(childPath, options, print),
+        ];
+      }, "children"),
+    ];
+  }
+
+  const groupIds = node.children.map(() => Symbol(""));
+  return path.map((childPath, childIndex) => {
+    const childNode = childPath.getValue();
+
+    if (isTextLikeNode(childNode)) {
+      if (childNode.prev && isTextLikeNode(childNode.prev)) {
+        const prevBetweenLine = printBetweenLine(childNode.prev, childNode);
+        if (prevBetweenLine) {
+          if (forceNextEmptyLine(childNode.prev)) {
+            return [hardline, hardline, printChild(childPath, options, print)];
+          }
+          return [prevBetweenLine, printChild(childPath, options, print)];
+        }
+      }
+      return printChild(childPath, options, print);
+    }
+
+    const prevParts = [];
+    const leadingParts = [];
+    const trailingParts = [];
+    const nextParts = [];
+
+    const prevBetweenLine = childNode.prev
+      ? printBetweenLine(childNode.prev, childNode)
+      : "";
+
+    const nextBetweenLine = childNode.next
+      ? printBetweenLine(childNode, childNode.next)
+      : "";
+
+    if (prevBetweenLine) {
+      if (forceNextEmptyLine(childNode.prev)) {
+        prevParts.push(hardline, hardline);
+      } else if (prevBetweenLine === hardline) {
+        prevParts.push(hardline);
+      } else {
+        if (isTextLikeNode(childNode.prev)) {
+          leadingParts.push(prevBetweenLine);
+        } else {
+          leadingParts.push(
+            ifBreak("", softline, {
+              groupId: groupIds[childIndex - 1],
+            })
+          );
+        }
+      }
+    }
+
+    if (nextBetweenLine) {
+      if (forceNextEmptyLine(childNode)) {
+        if (isTextLikeNode(childNode.next)) {
+          nextParts.push(hardline, hardline);
+        }
+      } else if (nextBetweenLine === hardline) {
+        if (isTextLikeNode(childNode.next)) {
+          nextParts.push(hardline);
+        }
+      } else {
+        trailingParts.push(nextBetweenLine);
+      }
+    }
+
+    return [
+      ...prevParts,
+      group([
+        ...leadingParts,
+        group([printChild(childPath, options, print), ...trailingParts], {
+          id: groupIds[childIndex],
+        }),
+      ]),
+      ...nextParts,
+    ];
+  }, "children");
+}
+
+module.exports = { printChildren };
diff --git a/src/language-html/print/element.js b/src/language-html/print/element.js
new file mode 100644
index 000000000..98f63c05a
--- /dev/null
+++ b/src/language-html/print/element.js
@@ -0,0 +1,176 @@
+"use strict";
+
+const {
+  builders: {
+    breakParent,
+    dedentToRoot,
+    group,
+    ifBreak,
+    indentIfBreak,
+    indent,
+    line,
+    softline,
+  },
+  utils: { replaceTextEndOfLine },
+} = require("../../document/index.js");
+const getNodeContent = require("../get-node-content.js");
+const {
+  shouldPreserveContent,
+  isScriptLikeTag,
+  isVueCustomBlock,
+  countParents,
+  forceBreakContent,
+} = require("../utils.js");
+const {
+  printOpeningTagPrefix,
+  printOpeningTag,
+  printClosingTagSuffix,
+  printClosingTag,
+  needsToBorrowPrevClosingTagEndMarker,
+  needsToBorrowLastChildClosingTagEndMarker,
+} = require("./tag.js");
+const { printChildren } = require("./children.js");
+
+function printElement(path, options, print) {
+  const node = path.getValue();
+
+  if (shouldPreserveContent(node, options)) {
+    return [
+      printOpeningTagPrefix(node, options),
+      group(printOpeningTag(path, options, print)),
+      ...replaceTextEndOfLine(getNodeContent(node, options)),
+      ...printClosingTag(node, options),
+      printClosingTagSuffix(node, options),
+    ];
+  }
+  /**
+   * do not break:
+   *
+   *     <div>{{
+   *         ~
+   *       interpolation
+   *     }}</div>
+   *            ~
+   *
+   * exception: break if the opening tag breaks
+   *
+   *     <div
+   *       long
+   *           ~
+   *       >{{
+   *         interpolation
+   *       }}</div
+   *              ~
+   *     >
+   */
+  const shouldHugContent =
+    node.children.length === 1 &&
+    node.firstChild.type === "interpolation" &&
+    node.firstChild.isLeadingSpaceSensitive &&
+    !node.firstChild.hasLeadingSpaces &&
+    node.lastChild.isTrailingSpaceSensitive &&
+    !node.lastChild.hasTrailingSpaces;
+
+  const attrGroupId = Symbol("element-attr-group-id");
+
+  const printTag = (doc) =>
+    group([
+      group(printOpeningTag(path, options, print), { id: attrGroupId }),
+      doc,
+      printClosingTag(node, options),
+    ]);
+
+  const printChildrenDoc = (childrenDoc) => {
+    if (shouldHugContent) {
+      return indentIfBreak(childrenDoc, { groupId: attrGroupId });
+    }
+    if (
+      (isScriptLikeTag(node) || isVueCustomBlock(node, options)) &&
+      node.parent.type === "root" &&
+      options.parser === "vue" &&
+      !options.vueIndentScriptAndStyle
+    ) {
+      return childrenDoc;
+    }
+    return indent(childrenDoc);
+  };
+
+  const printLineBeforeChildren = () => {
+    if (shouldHugContent) {
+      return ifBreak(softline, "", { groupId: attrGroupId });
+    }
+    if (
+      node.firstChild.hasLeadingSpaces &&
+      node.firstChild.isLeadingSpaceSensitive
+    ) {
+      return line;
+    }
+    if (
+      node.firstChild.type === "text" &&
+      node.isWhitespaceSensitive &&
+      node.isIndentationSensitive
+    ) {
+      return dedentToRoot(softline);
+    }
+    return softline;
+  };
+
+  const printLineAfterChildren = () => {
+    const needsToBorrow = node.next
+      ? needsToBorrowPrevClosingTagEndMarker(node.next)
+      : needsToBorrowLastChildClosingTagEndMarker(node.parent);
+    if (needsToBorrow) {
+      if (
+        node.lastChild.hasTrailingSpaces &&
+        node.lastChild.isTrailingSpaceSensitive
+      ) {
+        return " ";
+      }
+      return "";
+    }
+    if (shouldHugContent) {
+      return ifBreak(softline, "", { groupId: attrGroupId });
+    }
+    if (
+      node.lastChild.hasTrailingSpaces &&
+      node.lastChild.isTrailingSpaceSensitive
+    ) {
+      return line;
+    }
+    if (
+      (node.lastChild.type === "comment" ||
+        (node.lastChild.type === "text" &&
+          node.isWhitespaceSensitive &&
+          node.isIndentationSensitive)) &&
+      new RegExp(
+        `\\n[\\t ]{${
+          options.tabWidth *
+          countParents(
+            path,
+            (node) => node.parent && node.parent.type !== "root"
+          )
+        }}$`
+      ).test(node.lastChild.value)
+    ) {
+      return "";
+    }
+    return softline;
+  };
+
+  if (node.children.length === 0) {
+    return printTag(
+      node.hasDanglingSpaces && node.isDanglingSpaceSensitive ? line : ""
+    );
+  }
+
+  return printTag([
+    forceBreakContent(node) ? breakParent : "",
+    printChildrenDoc([
+      printLineBeforeChildren(),
+      printChildren(path, options, print),
+    ]),
+    printLineAfterChildren(),
+  ]);
+}
+
+module.exports = { printElement };
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 86e57437a..101dce2d1 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -5,34 +5,12 @@
  */
 
 const {
-  builders: {
-    breakParent,
-    dedentToRoot,
-    fill,
-    group,
-    hardline,
-    ifBreak,
-    indentIfBreak,
-    indent,
-    line,
-    literalline,
-    softline,
-  },
+  builders: { fill, group, hardline, literalline },
   utils: { cleanDoc, getDocParts, isConcat, replaceTextEndOfLine },
 } = require("../document/index.js");
 const clean = require("./clean.js");
 const {
   countChars,
-  countParents,
-  forceBreakChildren,
-  forceBreakContent,
-  forceNextEmptyLine,
-  hasPrettierIgnore,
-  isVueCustomBlock,
-  isScriptLikeTag,
-  isTextLikeNode,
-  preferHardlineAsLeadingSpaces,
-  shouldPreserveContent,
   unescapeQuoteEntities,
   getTextValueParts,
 } = require("./utils.js");
@@ -41,20 +19,13 @@ const { insertPragma } = require("./pragma.js");
 const { locStart, locEnd } = require("./loc.js");
 const embed = require("./embed.js");
 const {
-  printClosingTagEndMarker,
   printClosingTagSuffix,
-  printClosingTag,
   printClosingTagEnd,
-  needsToBorrowPrevClosingTagEndMarker,
-  needsToBorrowLastChildClosingTagEndMarker,
-  needsToBorrowParentClosingTagStartMarker,
   printOpeningTagPrefix,
-  printOpeningTag,
   printOpeningTagStart,
-  printOpeningTagStartMarker,
-  needsToBorrowNextOpeningTagStartMarker,
 } = require("./print/tag.js");
-const getNodeContent = require("./get-node-content.js");
+const { printElement } = require("./print/element.js");
+const { printChildren } = require("./print/children.js");
 
 function genericPrint(path, options, print) {
   const node = path.getValue();
@@ -153,335 +124,6 @@ function genericPrint(path, options, print) {
   }
 }
 
-function printElement(path, options, print) {
-  const node = path.getValue();
-
-  if (shouldPreserveContent(node, options)) {
-    return [
-      printOpeningTagPrefix(node, options),
-      group(printOpeningTag(path, options, print)),
-      ...replaceTextEndOfLine(getNodeContent(node, options)),
-      ...printClosingTag(node, options),
-      printClosingTagSuffix(node, options),
-    ];
-  }
-  /**
-   * do not break:
-   *
-   *     <div>{{
-   *         ~
-   *       interpolation
-   *     }}</div>
-   *            ~
-   *
-   * exception: break if the opening tag breaks
-   *
-   *     <div
-   *       long
-   *           ~
-   *       >{{
-   *         interpolation
-   *       }}</div
-   *              ~
-   *     >
-   */
-  const shouldHugContent =
-    node.children.length === 1 &&
-    node.firstChild.type === "interpolation" &&
-    node.firstChild.isLeadingSpaceSensitive &&
-    !node.firstChild.hasLeadingSpaces &&
-    node.lastChild.isTrailingSpaceSensitive &&
-    !node.lastChild.hasTrailingSpaces;
-
-  const attrGroupId = Symbol("element-attr-group-id");
-
-  const printTag = (doc) =>
-    group([
-      group(printOpeningTag(path, options, print), { id: attrGroupId }),
-      doc,
-      printClosingTag(node, options),
-    ]);
-
-  const printChildrenDoc = (childrenDoc) => {
-    if (shouldHugContent) {
-      return indentIfBreak(childrenDoc, { groupId: attrGroupId });
-    }
-    if (
-      (isScriptLikeTag(node) || isVueCustomBlock(node, options)) &&
-      node.parent.type === "root" &&
-      options.parser === "vue" &&
-      !options.vueIndentScriptAndStyle
-    ) {
-      return childrenDoc;
-    }
-    return indent(childrenDoc);
-  };
-
-  const printLineBeforeChildren = () => {
-    if (shouldHugContent) {
-      return ifBreak(softline, "", { groupId: attrGroupId });
-    }
-    if (
-      node.firstChild.hasLeadingSpaces &&
-      node.firstChild.isLeadingSpaceSensitive
-    ) {
-      return line;
-    }
-    if (
-      node.firstChild.type === "text" &&
-      node.isWhitespaceSensitive &&
-      node.isIndentationSensitive
-    ) {
-      return dedentToRoot(softline);
-    }
-    return softline;
-  };
-
-  const printLineAfterChildren = () => {
-    const needsToBorrow = node.next
-      ? needsToBorrowPrevClosingTagEndMarker(node.next)
-      : needsToBorrowLastChildClosingTagEndMarker(node.parent);
-    if (needsToBorrow) {
-      if (
-        node.lastChild.hasTrailingSpaces &&
-        node.lastChild.isTrailingSpaceSensitive
-      ) {
-        return " ";
-      }
-      return "";
-    }
-    if (shouldHugContent) {
-      return ifBreak(softline, "", { groupId: attrGroupId });
-    }
-    if (
-      node.lastChild.hasTrailingSpaces &&
-      node.lastChild.isTrailingSpaceSensitive
-    ) {
-      return line;
-    }
-    if (
-      (node.lastChild.type === "comment" ||
-        (node.lastChild.type === "text" &&
-          node.isWhitespaceSensitive &&
-          node.isIndentationSensitive)) &&
-      new RegExp(
-        `\\n[\\t ]{${
-          options.tabWidth *
-          countParents(
-            path,
-            (node) => node.parent && node.parent.type !== "root"
-          )
-        }}$`
-      ).test(node.lastChild.value)
-    ) {
-      return "";
-    }
-    return softline;
-  };
-
-  if (node.children.length === 0) {
-    return printTag(
-      node.hasDanglingSpaces && node.isDanglingSpaceSensitive ? line : ""
-    );
-  }
-
-  return printTag([
-    forceBreakContent(node) ? breakParent : "",
-    printChildrenDoc([
-      printLineBeforeChildren(),
-      printChildren(path, options, print),
-    ]),
-    printLineAfterChildren(),
-  ]);
-}
-
-function printChildren(path, options, print) {
-  const node = path.getValue();
-
-  if (forceBreakChildren(node)) {
-    return [
-      breakParent,
-
-      ...path.map((childPath) => {
-        const childNode = childPath.getValue();
-        const prevBetweenLine = !childNode.prev
-          ? ""
-          : printBetweenLine(childNode.prev, childNode);
-        return [
-          !prevBetweenLine
-            ? ""
-            : [
-                prevBetweenLine,
-                forceNextEmptyLine(childNode.prev) ? hardline : "",
-              ],
-          printChild(childPath),
-        ];
-      }, "children"),
-    ];
-  }
-
-  const groupIds = node.children.map(() => Symbol(""));
-  return path.map((childPath, childIndex) => {
-    const childNode = childPath.getValue();
-
-    if (isTextLikeNode(childNode)) {
-      if (childNode.prev && isTextLikeNode(childNode.prev)) {
-        const prevBetweenLine = printBetweenLine(childNode.prev, childNode);
-        if (prevBetweenLine) {
-          if (forceNextEmptyLine(childNode.prev)) {
-            return [hardline, hardline, printChild(childPath)];
-          }
-          return [prevBetweenLine, printChild(childPath)];
-        }
-      }
-      return printChild(childPath);
-    }
-
-    const prevParts = [];
-    const leadingParts = [];
-    const trailingParts = [];
-    const nextParts = [];
-
-    const prevBetweenLine = childNode.prev
-      ? printBetweenLine(childNode.prev, childNode)
-      : "";
-
-    const nextBetweenLine = childNode.next
-      ? printBetweenLine(childNode, childNode.next)
-      : "";
-
-    if (prevBetweenLine) {
-      if (forceNextEmptyLine(childNode.prev)) {
-        prevParts.push(hardline, hardline);
-      } else if (prevBetweenLine === hardline) {
-        prevParts.push(hardline);
-      } else {
-        if (isTextLikeNode(childNode.prev)) {
-          leadingParts.push(prevBetweenLine);
-        } else {
-          leadingParts.push(
-            ifBreak("", softline, {
-              groupId: groupIds[childIndex - 1],
-            })
-          );
-        }
-      }
-    }
-
-    if (nextBetweenLine) {
-      if (forceNextEmptyLine(childNode)) {
-        if (isTextLikeNode(childNode.next)) {
-          nextParts.push(hardline, hardline);
-        }
-      } else if (nextBetweenLine === hardline) {
-        if (isTextLikeNode(childNode.next)) {
-          nextParts.push(hardline);
-        }
-      } else {
-        trailingParts.push(nextBetweenLine);
-      }
-    }
-
-    return [
-      ...prevParts,
-      group([
-        ...leadingParts,
-        group([printChild(childPath), ...trailingParts], {
-          id: groupIds[childIndex],
-        }),
-      ]),
-      ...nextParts,
-    ];
-  }, "children");
-
-  function printChild(childPath) {
-    const child = childPath.getValue();
-
-    if (hasPrettierIgnore(child)) {
-      return [
-        printOpeningTagPrefix(child, options),
-        ...replaceTextEndOfLine(
-          options.originalText.slice(
-            locStart(child) +
-              (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
-                ? printOpeningTagStartMarker(child).length
-                : 0),
-            locEnd(child) -
-              (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
-                ? printClosingTagEndMarker(child, options).length
-                : 0)
-          )
-        ),
-        printClosingTagSuffix(child, options),
-      ];
-    }
-
-    return print();
-  }
-
-  function printBetweenLine(prevNode, nextNode) {
-    return isTextLikeNode(prevNode) && isTextLikeNode(nextNode)
-      ? prevNode.isTrailingSpaceSensitive
-        ? prevNode.hasTrailingSpaces
-          ? preferHardlineAsLeadingSpaces(nextNode)
-            ? hardline
-            : line
-          : ""
-        : preferHardlineAsLeadingSpaces(nextNode)
-        ? hardline
-        : softline
-      : (needsToBorrowNextOpeningTagStartMarker(prevNode) &&
-          (hasPrettierIgnore(nextNode) ||
-            /**
-             *     123<a
-             *          ~
-             *       ><b>
-             */
-            nextNode.firstChild ||
-            /**
-             *     123<!--
-             *            ~
-             *     -->
-             */
-            nextNode.isSelfClosing ||
-            /**
-             *     123<span
-             *             ~
-             *       attr
-             */
-            (nextNode.type === "element" && nextNode.attrs.length > 0))) ||
-        /**
-         *     <img
-         *       src="long"
-         *                 ~
-         *     />123
-         */
-        (prevNode.type === "element" &&
-          prevNode.isSelfClosing &&
-          needsToBorrowPrevClosingTagEndMarker(nextNode))
-      ? ""
-      : !nextNode.isLeadingSpaceSensitive ||
-        preferHardlineAsLeadingSpaces(nextNode) ||
-        /**
-         *       Want to write us a letter? Use our<a
-         *         ><b><a>mailing address</a></b></a
-         *                                          ~
-         *       >.
-         */
-        (needsToBorrowPrevClosingTagEndMarker(nextNode) &&
-          prevNode.lastChild &&
-          needsToBorrowParentClosingTagStartMarker(prevNode.lastChild) &&
-          prevNode.lastChild.lastChild &&
-          needsToBorrowParentClosingTagStartMarker(
-            prevNode.lastChild.lastChild
-          ))
-      ? hardline
-      : nextNode.hasLeadingSpaces
-      ? line
-      : softline;
-  }
-}
-
 module.exports = {
   preprocess,
   print: genericPrint,
diff --git a/tests/config/install-prettier.js b/tests/config/install-prettier.js
new file mode 100644
index 000000000..2be746ab4
--- /dev/null
+++ b/tests/config/install-prettier.js
@@ -0,0 +1,46 @@
+"use strict";
+
+const path = require("path");
+const fs = require("fs");
+const execa = require("execa");
+const tempy = require("tempy");
+
+const allowedClients = new Set(["yarn", "npm", "pnpm"]);
+
+let client = process.env.NPM_CLIENT;
+if (!allowedClients.has(client)) {
+  client = "yarn";
+}
+
+module.exports = (packageDir) => {
+  const tmpDir = tempy.directory();
+  const fileName = execa
+    .sync("npm", ["pack"], { cwd: packageDir })
+    .stdout.trim();
+  const file = path.join(packageDir, fileName);
+  const packed = path.join(tmpDir, fileName);
+  fs.copyFileSync(file, packed);
+  fs.unlinkSync(file);
+
+  execa.sync(client, ["init", "-y"], { cwd: tmpDir });
+
+  let installArguments = [];
+  switch (client) {
+    case "npm":
+      // npm fails when engine requirement only with `--engine-strict`
+      installArguments = ["install", packed, "--engine-strict"];
+      break;
+    case "pnpm":
+      // Note: current pnpm can't work with `--engine-strict` and engineStrict setting in `.npmrc`
+      installArguments = ["add", packed, "--engine-strict"];
+      break;
+    default:
+      // yarn fails when engine requirement not compatible by default
+      installArguments = ["add", packed];
+  }
+
+  execa.sync(client, installArguments, { cwd: tmpDir });
+  fs.unlinkSync(packed);
+
+  return path.join(tmpDir, "node_modules/prettier");
+};
diff --git a/website/blog/2020-03-21-2.0.0.md b/website/blog/2020-03-21-2.0.0.md
index 7ade3ab9c..b2e94e421 100644
--- a/website/blog/2020-03-21-2.0.0.md
+++ b/website/blog/2020-03-21-2.0.0.md
@@ -116,7 +116,7 @@ Prettier has included an [option to configure trailing commas](https://prettier.
 Finally, the default value becomes `es5` instead of `none` in Prettier v2.0.
 
 If the old behavior is still preferred, please configure Prettier with `{ "trailingComma": "none" }`.
-There is a possibility that the default value will change to `always` (meaning even more trailing commas) in a future major version of Prettier as the JavaScript ecosystem further matures.
+There is a possibility that the default value will change to `all` (meaning even more trailing commas) in a future major version of Prettier as the JavaScript ecosystem further matures.
 
 #### Plugin API: changes in `prettier.util` ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker))
 
diff --git a/website/blog/2021-09-09-2.4.0.md b/website/blog/2021-09-09-2.4.0.md
new file mode 100644
index 000000000..880bc75a7
--- /dev/null
+++ b/website/blog/2021-09-09-2.4.0.md
@@ -0,0 +1,267 @@
+---
+author: "Sosuke Suzuki (@sosukesuzuki)"
+authorURL: "https://github.com/sosukesuzuki"
+title: "Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!"
+---
+
+This release renames the `jsxBracketSameLine` option to `bracketSameLine`, which supports HTML, Vue, and Angular in addition to JSX. The old name has been deprecated.
+
+We’ve also added support for [TypeScript 4.4](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html), including new syntax features such as [class `static` blocks](https://github.com/tc39/proposal-class-static-block).
+
+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).
+
+<!--truncate-->
+
+## Highlights
+
+### TypeScript
+
+#### Support TypeScript 4.4 ([#11426](https://github.com/prettier/prettier/pull/11426) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+Support [TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/)!
+
+##### [`static` Blocks in Classes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#static-blocks)
+
+Class Static Blocks syntax is a Stage 4 ECMAScript proposal. See https://github.com/tc39/proposal-class-static-block for more details.
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+class Foo {
+  static count = 0;
+
+  // This is a static block:
+  static {
+    if (someCondition()) {
+      Foo.count++;
+    }
+  }
+}
+
+// Prettier 2.3
+SyntaxError: Declaration expected. (5:9)
+  3 |
+  4 |   // This is a static block:
+> 5 |   static {
+    |         ^
+  6 |     if (someCondition()) {
+  7 |       Foo.count++;
+  8 |     }
+
+// Prettier 2.4
+class Foo {
+  static count = 0;
+
+  // This is a static block:
+  static {
+    if (someCondition()) {
+      Foo.count++;
+    }
+  }
+}
+
+```
+
+### HTML
+
+#### Replace `jsxBracketSameLine` option with `bracketSameLine` option ([#11006](https://github.com/prettier/prettier/pull/11006) by [@kurtztech](https://github.com/kurtztech))
+
+Deprecate the `jsxBracketSameLine` option in favour of the new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz">lorem ipsum dolor sit amet</div>
+
+<!-- Prettier 2.3 -->
+<div
+  id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz"
+>
+  lorem ipsum dolor sit amet
+</div>
+
+<!-- Prettier 2.4 -->
+<!-- Options: `{bracketSameLine: true}` -->
+<div
+  id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz">
+  lorem ipsum dolor sit amet
+</div>
+```
+
+## Other Changes
+
+### JavaScript
+
+#### Support parenthesized tagged template literals for styled components ([#11246](https://github.com/prettier/prettier/pull/11246) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```js
+// Input
+const StyledComponent =
+  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
+  (styled.div)`
+    position:   fixed;
+  color: red;
+  `;
+
+// Prettier 2.4
+const StyledComponent =
+  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
+  (styled.div)`
+    position:   fixed;
+  color: red;
+  `;
+
+// Prettier 2.3
+const StyledComponent =
+  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
+  (styled.div)`
+    position: fixed;
+    color: red;
+  `;
+
+```
+
+#### Count correctly regex literals in method chain arguments ([#11299](https://github.com/prettier/prettier/pull/11299) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```js
+// Input
+foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);
+
+foo1(/叱叱叱/).foo2(bar).foo3(baz);
+
+// Prettier 2.3
+foo1(/𠮟𠮟𠮟/)
+  .foo2(bar)
+  .foo3(baz);
+
+foo1(/叱叱叱/).foo2(bar).foo3(baz);
+
+// Prettier 2.4
+foo1(/𠮟𠮟𠮟/)
+  .foo2(bar)
+  .foo3(baz);
+
+foo1(/叱叱叱/)
+  .foo2(bar)
+  .foo3(baz);
+
+```
+
+#### Support hack-style pipeline proposal ([#11335](https://github.com/prettier/prettier/pull/11335) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+The proposed [hack-style pipeline syntax](https://github.com/js-choi/proposal-hack-pipes) is now supported by Prettier. We are using `%` as the topic token, following the official explainer — although this may change in future releases as the proposal progresses.
+
+As part of this change, support for the [“smart” pipeline syntax](https://github.com/js-choi/proposal-smart-pipelines) has been removed. See [our policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) for the rationale behind this decision.
+
+```js
+// Input
+const foo = fn() |> fn1(%) |> fn2(%);
+
+// Prettier 2.3
+SyntaxError: Unexpected token (1:25)
+> 1 | const foo = fn() |> fn1(%) |> fn2(%);
+    |                         ^
+  2 |
+
+// Prettier 2.4
+const foo = fn() |> fn1(%) |> fn(%);
+
+```
+
+### TypeScript
+
+#### Fix formatting intersection types that include mapped types ([#11247](https://github.com/prettier/prettier/pull/11247) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```ts
+// Input
+type Example = {
+  [A in B]: T;
+} & {
+  [A in B]: T;
+};
+
+// Prettier 2.3
+type Example = {
+  [A in B]: T;
+} &
+  {
+    [A in B]: T;
+  };
+
+// Prettier 2.4
+type Example = {
+  [A in B]: T;
+} & {
+  [A in B]: T;
+};
+
+```
+
+### Flow
+
+#### Always put a semicolon before Flow variance sigils ([#11398](https://github.com/prettier/prettier/pull/11398) by [@noppa](https://github.com/noppa))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+class A {
+  +one = function() {};
+  -two = val();
+  +#privOne = val();
+  static +#privTwo = val();
+}
+// Prettier 2.3
+class A {
+  +one = function() {}
+  -two = val()
+  +#privOne = val()
+  static +#privTwo = val()
+}
+// Prettier 2.4
+class A {
+  +one = function() {};
+  -two = val();
+  +#privOne = val()
+  static +#privTwo = val()
+}
+```
+
+### SCSS
+
+#### Consistently quote Sass modules strings ([#11461](https://github.com/prettier/prettier/pull/11461) by [@niksy](https://github.com/niksy))
+
+<!-- prettier-ignore -->
+```scss
+// Input
+@use "sass:math";
+@forward "list";
+
+// Prettier 2.3
+@use "sass:math";
+@forward "list";
+
+// Prettier 2.4
+@use 'sass:math';
+@forward 'list';
+```
+
+### CLI
+
+#### Infer parser for `.stylelintrc` ([#10924](https://github.com/prettier/prettier/pull/10924) by [@SevenOutman](https://github.com/SevenOutman))
+
+A `.stylelintrc` file (without extension) is handled using `json` and `yaml` parsers.
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 8eb30cb2d..07576f5d2 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -312,7 +312,7 @@ const UsersSection = ({ language }) => {
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
                 More than{" "}
-                <strong data-placeholder="dependent-github">2.9 million</strong>{" "}
+                <strong data-placeholder="dependent-github">3.2 million</strong>{" "}
                 dependent repositories on GitHub
               </p>
               <Button href="https://github.com/prettier/prettier/network/dependents">
@@ -330,7 +330,7 @@ const UsersSection = ({ language }) => {
             </a>
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
-                More than <strong data-placeholder="dependent-npm">8000</strong>{" "}
+                More than <strong data-placeholder="dependent-npm">9000</strong>{" "}
                 dependent packages on npm
               </p>
               <Button href="https://www.npmjs.com/browse/depended/prettier">
diff --git a/website/playground/BottomBar.js b/website/playground/BottomBar.js
index 61a87822f..85ae212ae 100644
--- a/website/playground/BottomBar.js
+++ b/website/playground/BottomBar.js
@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 
 const root = document.getElementById("bottom-bar");
 
-export default function ({ left, right }) {
+export default function BottomBar({ left, right }) {
   return ReactDOM.createPortal(
     <React.Fragment>
       <div className="bottom-bar-buttons">{left}</div>
diff --git a/website/playground/EditorState.js b/website/playground/EditorState.js
index 69c6de097..6396cf0c3 100644
--- a/website/playground/EditorState.js
+++ b/website/playground/EditorState.js
@@ -3,7 +3,7 @@ import * as React from "react";
 import { stateToggler, shallowEqual } from "./helpers.js";
 import * as storage from "./storage.js";
 
-export default class extends React.Component {
+export default class EditorState extends React.Component {
   constructor() {
     super();
     this.state = {
diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index 234e87feb..222896080 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -28,8 +28,6 @@ const MAX_LENGTH = 8000 - ISSUES_URL.length; // it seems that GitHub limit is 81
 const COPY_MESSAGE =
   "<!-- The issue body has been saved to the clipboard. Please paste it after this line! 👇 -->\n";
 
-const isProduction = location.host === "prettier.io";
-const isPreview = location.host.includes("netlify.app");
 const ENABLED_OPTIONS = [
   "parser",
   "printWidth",
@@ -48,15 +46,8 @@ const ENABLED_OPTIONS = [
   "requirePragma",
   "vueIndentScriptAndStyle",
   "embeddedLanguageFormatting",
+  "bracketSameLine",
 ];
-// "jsxBracketSameLine" will be deprecated in 2.4
-if (isProduction) {
-  ENABLED_OPTIONS.push("jsxBracketSameLine");
-}
-// "bracketSameLine" will be landed in 2.4
-if (isPreview) {
-  ENABLED_OPTIONS.push("bracketSameLine");
-}
 
 class Playground extends React.Component {
   constructor(props) {
diff --git a/website/playground/VersionLink.js b/website/playground/VersionLink.js
index e466ef312..9b32adf0a 100644
--- a/website/playground/VersionLink.js
+++ b/website/playground/VersionLink.js
@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 
 const root = document.getElementById("version");
 
-export default function ({ version }) {
+export default function VersionLink({ version }) {
   const match = version.match(/^pr-(\d+)$/);
   let href;
   if (match) {
diff --git a/website/playground/WorkerApi.js b/website/playground/WorkerApi.js
index 8deae41df..c251741f2 100644
--- a/website/playground/WorkerApi.js
+++ b/website/playground/WorkerApi.js
@@ -1,4 +1,4 @@
-export default function (source) {
+export default function WorkerApi(source) {
   const worker = new Worker(source);
   let counter = 0;
   const handlers = {};
diff --git a/website/playground/codeSamples.js b/website/playground/codeSamples.js
index e5b258633..8fbb71c0d 100644
--- a/website/playground/codeSamples.js
+++ b/website/playground/codeSamples.js
@@ -1,4 +1,4 @@
-export default function (parser) {
+export default function getCodeSamples(parser) {
   switch (parser) {
     case "babel":
     case "espree":
diff --git a/website/playground/sidebar/SidebarOptions.js b/website/playground/sidebar/SidebarOptions.js
index 09ed4985b..c41c3c484 100644
--- a/website/playground/sidebar/SidebarOptions.js
+++ b/website/playground/sidebar/SidebarOptions.js
@@ -4,7 +4,7 @@ import groupBy from "lodash/groupBy";
 import { SidebarCategory } from "./components.js";
 import Option from "./options.js";
 
-export default function ({
+export default function SidebarOptions({
   categories,
   availableOptions,
   optionValues,
diff --git a/website/playground/sidebar/options.js b/website/playground/sidebar/options.js
index 376f6e713..7dd445054 100644
--- a/website/playground/sidebar/options.js
+++ b/website/playground/sidebar/options.js
@@ -42,7 +42,7 @@ export function NumberOption({ option, value, onChange }) {
   );
 }
 
-export default function (props) {
+export default function Option(props) {
   switch (props.option.type) {
     case "boolean":
       return <BooleanOption {...props} />;
diff --git a/website/versioned_docs/version-stable/browser.md b/website/versioned_docs/version-stable/browser.md
index 74659cc1d..8e7dd3001 100644
--- a/website/versioned_docs/version-stable/browser.md
+++ b/website/versioned_docs/version-stable/browser.md
@@ -33,8 +33,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.3.2/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.3.2/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/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.3.2/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.3.2/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.4.0/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.3.2/standalone.js",
-  "https://unpkg.com/prettier@2.3.2/parser-graphql.js",
+  "https://unpkg.com/prettier@2.4.0/standalone.js",
+  "https://unpkg.com/prettier@2.4.0/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.3.2/standalone.js");
-importScripts("https://unpkg.com/prettier@2.3.2/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.4.0/standalone.js");
+importScripts("https://unpkg.com/prettier@2.4.0/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.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/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.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.4.0/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/website/versioned_docs/version-stable/install.md b/website/versioned_docs/version-stable/install.md
index 5c410b42f..aecc7938a 100644
--- a/website/versioned_docs/version-stable/install.md
+++ b/website/versioned_docs/version-stable/install.md
@@ -121,6 +121,8 @@ For example, you can do the following to have Prettier run before each commit:
 
    <!--END_DOCUSAURUS_CODE_TABS-->
 
+> Note: npm **set-script** command requires at least **npm v7.x**. See https://docs.npmjs.com/cli/v7/commands/npm-set-script.
+
 2. Add the following to your `package.json`:
 
 ```json
diff --git a/website/versioned_docs/version-stable/option-philosophy.md b/website/versioned_docs/version-stable/option-philosophy.md
index ed53cd2a3..005c4e56d 100644
--- a/website/versioned_docs/version-stable/option-philosophy.md
+++ b/website/versioned_docs/version-stable/option-philosophy.md
@@ -30,7 +30,7 @@ Options that are easier to motivate include:
 - `--end-of-line` makes it easier for teams to keep CRLFs out of their git repositories.
 - `--quote-props` is important for advanced usage of the Google Closure Compiler.
 
-But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--jsx-bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
+But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
 
 For a long time, we left option requests open in order to let discussions play out and collect feedback. What we’ve learned during those years is that it’s really hard to measure demand. Prettier has grown a lot in usage. What was “great demand” back in the day is not as much today. GitHub reactions and Twitter polls became unrepresentative. What about all silent users? It looked easy to add “just one more” option. But where should we have stopped? When is one too many? Even after adding “that one final option”, there would always be a “top issue” in the issue tracker.
 
diff --git a/website/versioned_docs/version-stable/options.md b/website/versioned_docs/version-stable/options.md
index 31bb06879..6e1c4b3d7 100644
--- a/website/versioned_docs/version-stable/options.md
+++ b/website/versioned_docs/version-stable/options.md
@@ -136,7 +136,44 @@ Valid options:
 | ------- | ---------------------- | ------------------------ |
 | `true`  | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
 
-## JSX Brackets
+## Bracket Line
+
+Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+
+Valid options:
+
+- `true` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}>
+  Click Here
+</button>
+```
+
+- `false` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}
+>
+  Click Here
+</button>
+```
+
+| Default | CLI Override          | API Override              |
+| ------- | --------------------- | ------------------------- |
+| `false` | `--bracket-same-line` | `bracketSameLine: <bool>` |
+
+## [Deprecated] JSX Brackets
+
+_This option has been deprecated in v2.4.0, use --bracket-same-line instead_
 
 Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
 
diff --git a/yarn.lock b/yarn.lock
index f68bb9033..0b6dffd3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5052,10 +5052,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
-  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+prettier@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.0.tgz#85bdfe0f70c3e777cf13a4ffff39713ca6f64cba"
+  integrity sha512-DsEPLY1dE5HF3BxCRBmD4uYZ+5DCbvatnolqTqcxEgKVZnL2kUfyu7b8pPQ5+hTBkdhU9SLUmK0/pHb07RE4WQ==
 
 pretty-bytes@5.6.0:
   version "5.6.0"