diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index dfccbea368c449..cde7dfb03825ed 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,6 +11,8 @@ on:
       - main
       - release/*
       - feat/*
+      - fix/*
+      - perf/*
   pull_request:
   workflow_dispatch:
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a87561a8e4146c..f086627de5cfe0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -24,7 +24,7 @@ If you want to use break point and explore code execution you can use the ["Run
 
 2. Click on the "Run and Debug" icon in the activity bar of the editor.
 
-3. Click on the "Javascript Debug Terminal" button.
+3. Click on the "JavaScript Debug Terminal" button.
 
 4. It will open a terminal, then go to `packages/playground/xxx` and run `pnpm run dev`.
 
@@ -79,7 +79,7 @@ Each test can be run under either dev server mode or build mode.
 
 - `pnpm run test-build` runs tests only under build mode.
 
-- You can also use `pnpm run test-serve -- [match]` or `pnpm run test-build -- [match]` to run tests in a specific playground package, e.g. `pnpm run test-serve -- css` will run tests for both `playground/css` and `playground/css-codesplit` under serve mode.
+- You can also use `pnpm run test-serve -- [match]` or `pnpm run test-build -- [match]` to run tests in a specific playground package, e.g. `pnpm run test-serve -- asset` will run tests for both `playground/asset` and `vite/src/node/__tests__/asset` under serve mode and `vite/src/node/__tests__/**/*` just run in serve mode.
 
   Note package matching is not available for the `pnpm test` script, which always runs all tests.
 
@@ -229,7 +229,7 @@ The english docs are embedded in the main Vite repo, to allow contributors to wo
 1. In order to get all doc files, you first need to clone this repo in your personal account.
 2. Keep all the files in `docs/` and remove everything else.
 
-   - You should setup your translation site based on all the files in `docs/` folder as a Vitepress project.
+   - You should setup your translation site based on all the files in `docs/` folder as a VitePress project.
      (that said, `package.json` is need).
 
    - Refresh git history by removing `.git` and then `git init`
@@ -238,7 +238,7 @@ The english docs are embedded in the main Vite repo, to allow contributors to wo
 
    - During this stage, you may be translating documents and synchronizing updates at the same time, but don't worry about that, it's very common in translation contribution.
 
-4. Push your commits to your Github repo. you can setup a netlify preview as well.
-5. Use [Ryu-cho](https://github.com/vuejs-translations/ryu-cho) tool to setup a Github Action, automatically track English docs update later.
+4. Push your commits to your GitHub repo. you can setup a netlify preview as well.
+5. Use [Ryu-cho](https://github.com/vuejs-translations/ryu-cho) tool to setup a GitHub Action, automatically track English docs update later.
 
 We recommend talking with others in Vite Land so you find more contributors for your language to share the maintenance work. Once the translation is done, communicate it to the Vite team so the repo can be moved to the official vitejs org in GitHub.
diff --git a/docs/blog/announcing-vite2.md b/docs/blog/announcing-vite2.md
index 0bf520dfdfcb9a..0007205debba4a 100644
--- a/docs/blog/announcing-vite2.md
+++ b/docs/blog/announcing-vite2.md
@@ -34,7 +34,7 @@ The [programmatic API](https://vitejs.dev/guide/api-javascript.html) has also be
 
 ### esbuild Powered Dep Pre-Bundling
 
-Since Vite is a native ESM dev server, it pre-bundles dependencies to reduce the number browser requests and handle CommonJS to ESM conversion. Previously Vite did this using Rollup, and in 2.0 it now uses `esbuild` which results in 10-100x faster dependency pre-bundling. As a reference, cold-booting a test app with heavy dependencies like React Material UI previously took 28 seconds on an M1-powered Macbook Pro and now takes ~1.5 seconds. Expect similar improvements if you are switching from a traditional bundler based setup.
+Since Vite is a native ESM dev server, it pre-bundles dependencies to reduce the number browser requests and handle CommonJS to ESM conversion. Previously Vite did this using Rollup, and in 2.0 it now uses `esbuild` which results in 10-100x faster dependency pre-bundling. As a reference, cold-booting a test app with heavy dependencies like React Material UI previously took 28 seconds on an M1-powered MacBook Pro and now takes ~1.5 seconds. Expect similar improvements if you are switching from a traditional bundler based setup.
 
 ### First-class CSS Support
 
diff --git a/docs/config/index.md b/docs/config/index.md
index b0d2f59d4a62af..d7560e58736a43 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -156,6 +156,8 @@ export default defineConfig(({ command, mode }) => {
 
   - Starting from `2.0.0-beta.70`, string values will be used as raw expressions, so if defining a string constant, it needs to be explicitly quoted (e.g. with `JSON.stringify`).
 
+  - To be consistent with [esbuild behavior](https://esbuild.github.io/api/#define), expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier.
+
   - Replacements are performed only when the match is surrounded by word boundaries (`\b`).
 
   ::: warning
@@ -355,7 +357,7 @@ export default defineConfig(({ command, mode }) => {
 
 - **Type:** `ESBuildOptions | false`
 
-  `ESBuildOptions` extends [ESbuild's own transform options](https://esbuild.github.io/api/#transform-api). The most common use case is customizing JSX:
+  `ESBuildOptions` extends [esbuild's own transform options](https://esbuild.github.io/api/#transform-api). The most common use case is customizing JSX:
 
   ```js
   export default defineConfig({
@@ -366,9 +368,9 @@ export default defineConfig(({ command, mode }) => {
   })
   ```
 
-  By default, ESBuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either.
+  By default, esbuild is applied to `ts`, `jsx` and `tsx` files. You can customize this with `esbuild.include` and `esbuild.exclude`, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either.
 
-  In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by ESBuild:
+  In addition, you can also use `esbuild.jsxInject` to automatically inject JSX helper imports for every file transformed by esbuild:
 
   ```js
   export default defineConfig({
@@ -378,7 +380,7 @@ export default defineConfig(({ command, mode }) => {
   })
   ```
 
-  Set to `false` to disable ESbuild transforms.
+  Set to `false` to disable esbuild transforms.
 
 ### assetsInclude
 
@@ -550,14 +552,12 @@ export default defineConfig(({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
 
   Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server).
 
   Set `server.hmr.overlay` to `false` to disable the server error overlay.
 
-  Set `server.hmr.port` to `false` when connecting to a domain without a port.
-
   `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server.
 
   If specifying `server.hmr.server`, Vite will process HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.
@@ -849,7 +849,7 @@ export default defineConfig({
 - **Type:** `boolean | 'terser' | 'esbuild'`
 - **Default:** `'esbuild'`
 
-  Set to `false` to disable minification, or specify the minifier to use. The default is [Esbuild](https://github.com/evanw/esbuild) which is 20 ~ 40x faster than terser and only 1 ~ 2% worse compression. [Benchmarks](https://github.com/privatenumber/minification-benchmarks)
+  Set to `false` to disable minification, or specify the minifier to use. The default is [esbuild](https://github.com/evanw/esbuild) which is 20 ~ 40x faster than terser and only 1 ~ 2% worse compression. [Benchmarks](https://github.com/privatenumber/minification-benchmarks)
 
   Note the `build.minify` option is not available when using the `'es'` format in lib mode.
 
@@ -973,9 +973,9 @@ export default defineConfig({
 
 - **Type:** `string | string[]`
 
-  By default, Vite will crawl your `index.html` to detect dependencies that need to be pre-bundled. If `build.rollupOptions.input` is specified, Vite will crawl those entry points instead.
+  By default, Vite will crawl all your `.html` files to detect dependencies that need to be pre-bundled (ignoring `node_modules`, `build.outDir`, `__tests__` and `coverage`). If `build.rollupOptions.input` is specified, Vite will crawl those entry points instead.
 
-  If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) or array of patterns that are relative from Vite project root. This will overwrite default entries inference.
+  If neither of these fit your needs, you can specify custom entries using this option - the value should be a [fast-glob pattern](https://github.com/mrmlnc/fast-glob#basic-syntax) or array of patterns that are relative from Vite project root. This will overwrite default entries inference. Only `node_modules` and `build.outDir` folders will be ignored by default when `optimizeDeps.entries` is explicitily defined. If other folders needs to be ignored, you can use an ignore pattern as part of the entries list, marked with an initial `!`.
 
 ### optimizeDeps.exclude
 
diff --git a/docs/guide/api-javascript.md b/docs/guide/api-javascript.md
index ddaa04279737f5..0128be26bd92ba 100644
--- a/docs/guide/api-javascript.md
+++ b/docs/guide/api-javascript.md
@@ -1,6 +1,6 @@
 # JavaScript API
 
-Vite's JavaScript APIs are fully typed, and it's recommended to use TypeScript or enable JS type checking in VSCode to leverage the intellisense and validation.
+Vite's JavaScript APIs are fully typed, and it's recommended to use TypeScript or enable JS type checking in VS Code to leverage the intellisense and validation.
 
 ## `createServer`
 
diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md
index 228755dd6f85c2..50353765261e34 100644
--- a/docs/guide/api-plugin.md
+++ b/docs/guide/api-plugin.md
@@ -113,7 +113,7 @@ Virtual modules are a useful scheme that allows you to pass build time informati
 
 ```js
 export default function myPlugin() {
-  const virtualModuleId = '@my-virtual-module'
+  const virtualModuleId = 'virtual:my-module'
   const resolvedVirtualModuleId = '\0' + virtualModuleId
 
   return {
@@ -135,7 +135,7 @@ export default function myPlugin() {
 Which allows importing the module in JavaScript:
 
 ```js
-import { msg } from '@my-virtual-module'
+import { msg } from 'virtual:my-module'
 
 console.log(msg)
 ```
@@ -186,8 +186,10 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
   const partialConfigPlugin = () => ({
     name: 'return-partial',
     config: () => ({
-      alias: {
-        foo: 'bar'
+      resolve: {
+        alias: {
+          foo: 'bar'
+        }
       }
     })
   })
@@ -499,7 +501,7 @@ Since Vite 2.9, we provide some utilities for plugins to help handle the communi
 
 ### Server to Client
 
-On the plugin side, we could use `server.ws.send` to boardcast events to all the clients:
+On the plugin side, we could use `server.ws.send` to broadcast events to all the clients:
 
 ```js
 // vite.config.js
diff --git a/docs/guide/assets.md b/docs/guide/assets.md
index fd5aa46f49467f..9776dcdd032f35 100644
--- a/docs/guide/assets.md
+++ b/docs/guide/assets.md
@@ -103,8 +103,17 @@ function getImageUrl(name) {
 }
 ```
 
-During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing.
+During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing. However, the URL string must be static so it can be analyzed, otherwise the code will be left as is, which can cause runtime errors if `build.target` does not support `import.meta.url`
 
-::: warning Note: Does not work with SSR
+```js
+// Vite will not transform this
+const imgUrl = new URL(imagePath, import.meta.url).href
+```
+
+::: warning Does not work with SSR
 This pattern does not work if you are using Vite for Server-Side Rendering, because `import.meta.url` have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.
 :::
+
+::: warning Esbuild target config is necessary
+This pattern needs esbuild target to be set to `es2020` or higher. `vite@2.x` use `es2019` as default target. Set [build-target](https://vitejs.dev/config/#build-target) and [optimizedeps.esbuildoptions.target](https://vitejs.dev/config/#optimizedeps-esbuildoptions) to `es2020` or higher if you intend to use this partten.
+:::
diff --git a/docs/guide/env-and-mode.md b/docs/guide/env-and-mode.md
index d3a6a575bce64c..1649feda8c7501 100644
--- a/docs/guide/env-and-mode.md
+++ b/docs/guide/env-and-mode.md
@@ -37,7 +37,7 @@ Vite uses [dotenv](https://github.com/motdotla/dotenv) to load additional enviro
 
 An env file for a specific mode (e.g. `.env.production`) will take higher priority than a generic one (e.g. `.env`).
 
-In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files.
+In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files. For example, when running `VITE_SOME_KEY=123 vite build`.
 
 `.env` files are loaded at the start of Vite. Restart the server after making changes.
 :::
@@ -57,7 +57,7 @@ If you want to customize env variables prefix, see [envPrefix](/config/index#env
 
 :::warning SECURITY NOTES
 
-- `.env.*.local` files are local-only and can contain sensitive variables. You should add `.local` to your `.gitignore` to avoid them being checked into git.
+- `.env.*.local` files are local-only and can contain sensitive variables. You should add `*.local` to your `.gitignore` to avoid them being checked into git.
 
 - Since any variables exposed to your Vite source code will end up in your client bundle, `VITE_*` variables should _not_ contain any sensitive information.
   :::
diff --git a/docs/guide/static-deploy.md b/docs/guide/static-deploy.md
index 43b047dd7f53eb..8c6c219f568a9e 100644
--- a/docs/guide/static-deploy.md
+++ b/docs/guide/static-deploy.md
@@ -299,7 +299,7 @@ Vercel CLI
 
 ### Vercel for Git
 
-1. Push your code to your git repository (GitHub, GitLab, BitBucket).
+1. Push your code to your git repository (GitHub, GitLab, Bitbucket).
 2. [Import your Vite project](https://vercel.com/new) into Vercel.
 3. Vercel will detect that you are using Vite and will enable the correct settings for your deployment.
 4. Your application is deployed! (e.g. [vite-vue-template.vercel.app](https://vite-vue-template.vercel.app/))
diff --git a/docs/guide/why.md b/docs/guide/why.md
index 89ca7698394246..9a24cf64777611 100644
--- a/docs/guide/why.md
+++ b/docs/guide/why.md
@@ -18,7 +18,7 @@ Vite improves the dev server start time by first dividing the modules in an appl
 
 - **Dependencies** are mostly plain JavaScript that do not change often during development. Some large dependencies (e.g. component libraries with hundreds of modules) are also quite expensive to process. Dependencies may also be shipped in various module formats (e.g. ESM or CommonJS).
 
-  Vite [pre-bundles dependencies](./dep-pre-bundling) using [esbuild](https://esbuild.github.io/). Esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.
+  Vite [pre-bundles dependencies](./dep-pre-bundling) using [esbuild](https://esbuild.github.io/). esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.
 
 - **Source code** often contains non-plain JavaScript that needs transforming (e.g. JSX, CSS or Vue/Svelte components), and will be edited very often. Also, not all source code needs to be loaded at the same time (e.g. with route-based code-splitting).
 
diff --git a/package.json b/package.json
index 858e7502d53324..de02e27949560c 100644
--- a/package.json
+++ b/package.json
@@ -34,37 +34,37 @@
     "ci-docs": "run-s build-vite build-plugin-vue build-docs"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.19.5",
+    "@microsoft/api-extractor": "^7.21.2",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
     "@types/prompts": "^2.0.14",
     "@types/semver": "^7.3.9",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "conventional-changelog-cli": "^2.2.2",
     "cross-env": "^7.0.3",
     "esbuild": "^0.14.27",
-    "eslint": "^8.11.0",
+    "eslint": "^8.13.0",
     "eslint-define-config": "^1.3.0",
     "eslint-plugin-node": "^11.1.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.0.1",
     "jest": "^27.5.1",
     "lint-staged": "^12.3.7",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.6",
     "node-fetch": "^2.6.6",
     "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",
-    "playwright-chromium": "^1.20.0",
-    "prettier": "2.6.0",
+    "playwright-chromium": "^1.20.2",
+    "prettier": "2.6.2",
     "prompts": "^2.4.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.59.0",
-    "semver": "^7.3.5",
+    "semver": "^7.3.6",
     "simple-git-hooks": "^2.7.0",
     "sirv": "^2.0.2",
-    "ts-jest": "^27.1.3",
+    "ts-jest": "^27.1.4",
     "ts-node": "^10.4.0",
     "typescript": "~4.5.4",
     "vite": "workspace:*",
@@ -85,11 +85,18 @@
       "eslint --ext .ts"
     ]
   },
-  "packageManager": "pnpm@6.32.3",
+  "packageManager": "pnpm@6.32.6",
   "pnpm": {
     "overrides": {
       "vite": "workspace:*",
       "@vitejs/plugin-vue": "workspace:*"
+    },
+    "packageExtensions": {
+      "postcss-load-config": {
+        "peerDependencies": {
+          "postcss": "*"
+        }
+      }
     }
   }
 }
diff --git a/packages/create-vite/CHANGELOG.md b/packages/create-vite/CHANGELOG.md
index b81d7ec6fac49a..bf69fae7e535ad 100644
--- a/packages/create-vite/CHANGELOG.md
+++ b/packages/create-vite/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 2.9.0 (2022-03-30)
+
+* chore: add isolatedModules to create-vite > template-vue-ts > tsconfig (#7304) ([21990ea](https://github.com/vitejs/vite/commit/21990ea)), closes [#7304](https://github.com/vitejs/vite/issues/7304)
+* chore(deps): update all non-major dependencies (#7490) ([42c15f6](https://github.com/vitejs/vite/commit/42c15f6)), closes [#7490](https://github.com/vitejs/vite/issues/7490)
+* docs(vue-ts): update note on vue type support in ts (#6165) ([cfc7648](https://github.com/vitejs/vite/commit/cfc7648)), closes [#6165](https://github.com/vitejs/vite/issues/6165)
+* workflow: separate version bumping and publishing on release (#6879) ([fe8ef39](https://github.com/vitejs/vite/commit/fe8ef39)), closes [#6879](https://github.com/vitejs/vite/issues/6879)
+
+
+
 # [2.8.0](https://github.com/vitejs/vite/compare/create-vite@2.7.2...create-vite@2.8.0) (2022-02-09)
 
 
diff --git a/packages/create-vite/package.json b/packages/create-vite/package.json
index 5d873b83fe515b..72955697360477 100644
--- a/packages/create-vite/package.json
+++ b/packages/create-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-vite",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "license": "MIT",
   "author": "Evan You",
   "bin": {
@@ -26,7 +26,7 @@
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/create-vite#readme",
   "dependencies": {
     "kolorist": "^1.5.1",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.6",
     "prompts": "^2.4.2"
   }
 }
diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json
index 5c0a7c7948ee58..061def321a22e6 100644
--- a/packages/create-vite/template-lit-ts/package.json
+++ b/packages/create-vite/template-lit-ts/package.json
@@ -19,7 +19,7 @@
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "vite": "^2.8.0",
+    "vite": "^2.9.0",
     "typescript": "^4.5.4"
   }
 }
diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json
index ca3c71428f22c9..89f4fee41576c6 100644
--- a/packages/create-vite/template-lit/package.json
+++ b/packages/create-vite/template-lit/package.json
@@ -17,6 +17,6 @@
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-preact-ts/package.json b/packages/create-vite/template-preact-ts/package.json
index df1726ba6c4f7b..dfa6659650c5ae 100644
--- a/packages/create-vite/template-preact-ts/package.json
+++ b/packages/create-vite/template-preact-ts/package.json
@@ -13,6 +13,6 @@
   "devDependencies": {
     "@preact/preset-vite": "^2.1.5",
     "typescript": "^4.5.4",
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-preact/package.json b/packages/create-vite/template-preact/package.json
index 2865df70374acf..02528128f6442e 100644
--- a/packages/create-vite/template-preact/package.json
+++ b/packages/create-vite/template-preact/package.json
@@ -12,6 +12,6 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.1.5",
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-react-ts/package.json b/packages/create-vite/template-react-ts/package.json
index 3b1e21b7dbca8c..69274929dd903d 100644
--- a/packages/create-vite/template-react-ts/package.json
+++ b/packages/create-vite/template-react-ts/package.json
@@ -8,14 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
-    "@vitejs/plugin-react": "^1.0.7",
-    "typescript": "^4.5.4",
-    "vite": "^2.8.0"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1"
   }
 }
diff --git a/packages/create-vite/template-react-ts/src/main.tsx b/packages/create-vite/template-react-ts/src/main.tsx
index 606a3cf44ec02b..4a1b15096e15b1 100644
--- a/packages/create-vite/template-react-ts/src/main.tsx
+++ b/packages/create-vite/template-react-ts/src/main.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
+import ReactDOM from 'react-dom/client'
 import App from './App'
+import './index.css'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )
diff --git a/packages/create-vite/template-react/package.json b/packages/create-vite/template-react/package.json
index 7b0f87c6bc95f5..4f443aefcb3cdb 100644
--- a/packages/create-vite/template-react/package.json
+++ b/packages/create-vite/template-react/package.json
@@ -8,11 +8,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^1.0.7",
-    "vite": "^2.8.0"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "vite": "^2.9.1"
   }
 }
diff --git a/packages/create-vite/template-react/src/main.jsx b/packages/create-vite/template-react/src/main.jsx
index 606a3cf44ec02b..9af0bb638e42c0 100644
--- a/packages/create-vite/template-react/src/main.jsx
+++ b/packages/create-vite/template-react/src/main.jsx
@@ -1,11 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
+import ReactDOM from 'react-dom/client'
 import App from './App'
+import './index.css'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )
diff --git a/packages/create-vite/template-svelte-ts/README.md b/packages/create-vite/template-svelte-ts/README.md
index a9d516a32c682e..4ef762ffec4df3 100644
--- a/packages/create-vite/template-svelte-ts/README.md
+++ b/packages/create-vite/template-svelte-ts/README.md
@@ -4,7 +4,7 @@ This template should help get you started developing with Svelte and TypeScript
 
 ## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
 ## Need an official Svelte framework?
 
diff --git a/packages/create-vite/template-svelte-ts/package.json b/packages/create-vite/template-svelte-ts/package.json
index 3f2c63759285e5..32e080146e0b6e 100644
--- a/packages/create-vite/template-svelte-ts/package.json
+++ b/packages/create-vite/template-svelte-ts/package.json
@@ -17,6 +17,6 @@
     "svelte-preprocess": "^4.9.8",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-svelte/README.md b/packages/create-vite/template-svelte/README.md
index 8e35d33d2bc7c8..50ea7ed3b9132d 100644
--- a/packages/create-vite/template-svelte/README.md
+++ b/packages/create-vite/template-svelte/README.md
@@ -4,7 +4,7 @@ This template should help get you started developing with Svelte in Vite.
 
 ## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
 ## Need an official Svelte framework?
 
diff --git a/packages/create-vite/template-svelte/package.json b/packages/create-vite/template-svelte/package.json
index e81ffa8288b6ef..da049c170731b9 100644
--- a/packages/create-vite/template-svelte/package.json
+++ b/packages/create-vite/template-svelte/package.json
@@ -11,6 +11,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
     "svelte": "^3.44.0",
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-vanilla-ts/package.json b/packages/create-vite/template-vanilla-ts/package.json
index 9b6cc582bfdb11..8dd7a0bb800909 100644
--- a/packages/create-vite/template-vanilla-ts/package.json
+++ b/packages/create-vite/template-vanilla-ts/package.json
@@ -9,6 +9,6 @@
   },
   "devDependencies": {
     "typescript": "^4.5.4",
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-vanilla/package.json b/packages/create-vite/template-vanilla/package.json
index f409412bbdc272..ff318e00f14fd1 100644
--- a/packages/create-vite/template-vanilla/package.json
+++ b/packages/create-vite/template-vanilla/package.json
@@ -8,6 +8,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^2.8.0"
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-vue-ts/README.md b/packages/create-vite/template-vue-ts/README.md
index b53dcfb1a715e6..e432516724c1a7 100644
--- a/packages/create-vite/template-vue-ts/README.md
+++ b/packages/create-vite/template-vue-ts/README.md
@@ -1,16 +1,16 @@
-# Vue 3 + Typescript + Vite
+# Vue 3 + TypeScript + Vite
 
-This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 ## Recommended IDE Setup
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
 ## Type Support For `.vue` Imports in TS
 
 Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
 
-1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
 
 You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
diff --git a/packages/create-vite/template-vue-ts/package.json b/packages/create-vite/template-vue-ts/package.json
index 14c6214460dd9e..1d8ff2b3e19d56 100644
--- a/packages/create-vite/template-vue-ts/package.json
+++ b/packages/create-vite/template-vue-ts/package.json
@@ -11,9 +11,9 @@
     "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.2.0",
+    "@vitejs/plugin-vue": "^2.3.0",
     "typescript": "^4.5.4",
-    "vite": "^2.8.0",
+    "vite": "^2.9.0",
     "vue-tsc": "^0.29.8"
   }
 }
diff --git a/packages/create-vite/template-vue-ts/src/App.vue b/packages/create-vite/template-vue-ts/src/App.vue
index df4e2d7644e293..1503baf999e683 100644
--- a/packages/create-vite/template-vue-ts/src/App.vue
+++ b/packages/create-vite/template-vue-ts/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import HelloWorld from './components/HelloWorld.vue'
 </script>
 
diff --git a/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue b/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue
index 2d61249ac32f9c..38dae70739a15a 100644
--- a/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue
+++ b/packages/create-vite/template-vue-ts/src/components/HelloWorld.vue
@@ -11,7 +11,7 @@ const count = ref(0)
 
   <p>
     Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
     +
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
   </p>
diff --git a/packages/create-vite/template-vue/README.md b/packages/create-vite/template-vue/README.md
index c0793a82398e08..eea15cef41ea60 100644
--- a/packages/create-vite/template-vue/README.md
+++ b/packages/create-vite/template-vue/README.md
@@ -4,4 +4,4 @@ This template should help get you started developing with Vue 3 in Vite. The tem
 
 ## Recommended IDE Setup
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
diff --git a/packages/create-vite/template-vue/package.json b/packages/create-vite/template-vue/package.json
index 3136fcda2a0bc7..707b664d3dfff7 100644
--- a/packages/create-vite/template-vue/package.json
+++ b/packages/create-vite/template-vue/package.json
@@ -11,7 +11,7 @@
     "vue": "^3.2.25"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^2.2.0",
-    "vite": "^2.8.0"
+    "@vitejs/plugin-vue": "^2.3.0",
+    "vite": "^2.9.0"
   }
 }
diff --git a/packages/create-vite/template-vue/src/App.vue b/packages/create-vite/template-vue/src/App.vue
index 742233037df99e..09bbb6a561285f 100644
--- a/packages/create-vite/template-vue/src/App.vue
+++ b/packages/create-vite/template-vue/src/App.vue
@@ -1,6 +1,6 @@
 <script setup>
 // This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import HelloWorld from './components/HelloWorld.vue'
 </script>
 
diff --git a/packages/create-vite/template-vue/src/components/HelloWorld.vue b/packages/create-vite/template-vue/src/components/HelloWorld.vue
index 48a5ca9095156b..aa607e31e0ad7c 100644
--- a/packages/create-vite/template-vue/src/components/HelloWorld.vue
+++ b/packages/create-vite/template-vue/src/components/HelloWorld.vue
@@ -13,7 +13,7 @@ const count = ref(0)
 
   <p>
     Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
     +
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
   </p>
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index f53c783c52b606..e08de24265e24a 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -263,6 +263,7 @@ if (isBuild) {
     }
   })
 }
+
 describe('css and assets in css in build watch', () => {
   if (isBuild) {
     test('css will not be lost and css does not contain undefined', async () => {
@@ -271,7 +272,26 @@ describe('css and assets in css in build watch', () => {
       const cssFile = findAssetFile(/index\.\w+\.css$/, 'foo')
       expect(cssFile).not.toBe('')
       expect(cssFile).not.toMatch(/undefined/)
-      watcher?.close()
+    })
+
+    test('import module.css', async () => {
+      expect(await getColor('#foo')).toBe('red')
+      editFile(
+        'css/foo.module.css',
+        (code) => code.replace('red', 'blue'),
+        true
+      )
+      await notifyRebuildComplete(watcher)
+      await page.reload()
+      expect(await getColor('#foo')).toBe('blue')
+    })
+
+    test('import with raw query', async () => {
+      expect(await page.textContent('.raw-query')).toBe('foo')
+      editFile('static/foo.txt', (code) => code.replace('foo', 'zoo'), true)
+      await notifyRebuildComplete(watcher)
+      await page.reload()
+      expect(await page.textContent('.raw-query')).toBe('zoo')
     })
   }
 })
diff --git a/packages/playground/assets/css/foo.module.css b/packages/playground/assets/css/foo.module.css
new file mode 100644
index 00000000000000..196612f252d254
--- /dev/null
+++ b/packages/playground/assets/css/foo.module.css
@@ -0,0 +1,3 @@
+.foo-module {
+  color: red;
+}
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 1bf430e73de1df..472e51f4d404ee 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -227,6 +227,10 @@ <h3 class="import-css">@import</h3>
 <h3 class="foo-public">
   @import CSS from publicDir should load (this should be red)
 </h3>
+<h3 id="foo">import module css</h3>
+
+<h3 class="raw-query"></h3>
+
 <style>
   @import '/foo.css';
 </style>
@@ -283,6 +287,12 @@ <h3 class="foo-public">
   document.querySelector('.import-meta-url-img-comma-nl').src =
     metaUrlWithCommaNL
 
+  import classNames from './css/foo.module.css'
+  document.querySelector('#foo').className = classNames['foo-module']
+
+  import someString from './static/foo.txt?raw'
+  document.querySelector('.raw-query').textContent = someString
+
   const metaUrlNonExistent = new URL('non-existent', import.meta.url).pathname
   text('.non-existent-import-meta-url', metaUrlNonExistent)
 
diff --git a/packages/playground/assets/static/foo.txt b/packages/playground/assets/static/foo.txt
new file mode 100644
index 00000000000000..19102815663d23
--- /dev/null
+++ b/packages/playground/assets/static/foo.txt
@@ -0,0 +1 @@
+foo
\ No newline at end of file
diff --git a/packages/playground/cli-module/__tests__/serve.js b/packages/playground/cli-module/__tests__/serve.js
index 2b354f566524bf..cf873fd481830b 100644
--- a/packages/playground/cli-module/__tests__/serve.js
+++ b/packages/playground/cli-module/__tests__/serve.js
@@ -5,10 +5,10 @@
 const path = require('path')
 // eslint-disable-next-line node/no-restricted-require
 const execa = require('execa')
-const { workspaceRoot } = require('../../testUtils')
+const { workspaceRoot, ports } = require('../../testUtils')
 
 const isWindows = process.platform === 'win32'
-const port = (exports.port = 9511) // make sure this port is unique across tests with custom servers
+const port = (exports.port = ports['cli-module'])
 const viteBin = path.join(workspaceRoot, 'packages', 'vite', 'bin', 'vite.js')
 
 /**
diff --git a/packages/playground/cli/__tests__/serve.js b/packages/playground/cli/__tests__/serve.js
index 5dd058f4e1a83c..3ad375d9d1f543 100644
--- a/packages/playground/cli/__tests__/serve.js
+++ b/packages/playground/cli/__tests__/serve.js
@@ -5,10 +5,10 @@
 const path = require('path')
 // eslint-disable-next-line node/no-restricted-require
 const execa = require('execa')
-const { workspaceRoot } = require('../../testUtils')
+const { workspaceRoot, ports } = require('../../testUtils')
 
 const isWindows = process.platform === 'win32'
-const port = (exports.port = 9510) // make sure this port is unique across tests with custom servers
+const port = (exports.port = ports.cli)
 const viteBin = path.join(workspaceRoot, 'packages', 'vite', 'bin', 'vite.js')
 
 /**
diff --git a/packages/playground/css-sourcemap/__tests__/serve.spec.ts b/packages/playground/css-sourcemap/__tests__/serve.spec.ts
index 0c6696b0dff7a2..11e33a78af8424 100644
--- a/packages/playground/css-sourcemap/__tests__/serve.spec.ts
+++ b/packages/playground/css-sourcemap/__tests__/serve.spec.ts
@@ -1,11 +1,11 @@
-import { fromComment } from 'convert-source-map'
 import { URL } from 'url'
-import { normalizePath } from 'vite'
-import { isBuild, testDir } from 'testUtils'
+import {
+  extractSourcemap,
+  formatSourcemapForSnapshot,
+  isBuild
+} from 'testUtils'
 
 if (!isBuild) {
-  const root = normalizePath(testDir)
-
   const getStyleTagContentIncluding = async (content: string) => {
     const styles = await page.$$('style')
     for (const style of styles) {
@@ -17,19 +17,6 @@ if (!isBuild) {
     throw new Error('Not found')
   }
 
-  const extractSourcemap = (content: string) => {
-    const lines = content.trim().split('\n')
-    return fromComment(lines[lines.length - 1]).toObject()
-  }
-
-  const formatSourcemapForSnapshot = (map: any) => {
-    const m = { ...map }
-    delete m.file
-    delete m.names
-    m.sources = m.sources.map((source) => source.replace(root, '/root'))
-    return m
-  }
-
   test('inline css', async () => {
     const css = await getStyleTagContentIncluding('.inline ')
     const map = extractSourcemap(css)
diff --git a/packages/playground/css-sourcemap/package.json b/packages/playground/css-sourcemap/package.json
index c29f18d4dee0d7..c7e9e61372cefa 100644
--- a/packages/playground/css-sourcemap/package.json
+++ b/packages/playground/css-sourcemap/package.json
@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "convert-source-map": "^1.8.0",
     "less": "^4.1.2",
     "magic-string": "^0.25.7",
     "sass": "^1.43.4",
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 34858ab34bc09d..6ca00e760349b1 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -54,6 +54,12 @@ test('css import from js', async () => {
   await untilUpdated(() => getColor(atImport), 'blue')
 })
 
+test('css import asset with space', async () => {
+  const importedWithSpace = await page.$('.import-with-space')
+
+  expect(await getBg(importedWithSpace)).toMatch(/.*ok\..*png/)
+})
+
 test('postcss config', async () => {
   const imported = await page.$('.postcss .nesting')
   expect(await getColor(imported)).toBe('pink')
@@ -236,6 +242,20 @@ test('css modules w/ sass', async () => {
   await untilUpdated(() => getColor(imported), 'blue')
 })
 
+test('inline css modules', async () => {
+  const css = await page.textContent('.modules-inline')
+  expect(css).toMatch(/\.inline-module__apply-color-inline___[\w-]{5}/)
+})
+
+if (isBuild) {
+  test('@charset hoist', async () => {
+    serverLogs.forEach((log) => {
+      // no warning from esbuild css minifier
+      expect(log).not.toMatch('"@charset" must be the first rule in the file')
+    })
+  })
+}
+
 test('@import dependency w/ style entry', async () => {
   expect(await getColor('.css-dep')).toBe('purple')
 })
@@ -318,7 +338,7 @@ test('PostCSS dir-dependency', async () => {
   }
 })
 
-test('Url separation', async () => {
+test('URL separation', async () => {
   const urlSeparated = await page.$('.url-separated')
   const baseUrl = 'url(images/dog.webp)'
   const cases = new Array(5)
@@ -377,3 +397,11 @@ test('import css in less', async () => {
   expect(await getColor('.css-in-less')).toBe('yellow')
   expect(await getColor('.css-in-less-2')).toBe('blue')
 })
+
+test("relative path rewritten in Less's data-uri", async () => {
+  // relative path passed to Less's data-uri is rewritten to absolute,
+  // the Less inlines it
+  expect(await getBg('.form-box-data-uri')).toMatch(
+    /^url\("data:image\/svg\+xml,%3Csvg/
+  )
+})
diff --git a/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts b/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts
index 19e9a43ae4ff6e..8bedc26ee354c8 100644
--- a/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts
+++ b/packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts
@@ -1,10 +1,10 @@
-import { getColor, getBgColor } from '../../testUtils'
+import { getColor, getBgColor, ports } from '../../testUtils'
 import { createServer } from 'vite'
 import path from 'path'
 
 // Regression test for https://github.com/vitejs/vite/issues/4000
 test('postcss plugins in different dir', async () => {
-  const port = 5006
+  const port = ports['css/postcss-plugins-different-dir']
   const server = await createServer({
     root: path.join(__dirname, '..', '..', 'tailwind'),
     logLevel: 'silent',
diff --git a/packages/playground/css/charset.css b/packages/playground/css/charset.css
new file mode 100644
index 00000000000000..5c42b279f8404c
--- /dev/null
+++ b/packages/playground/css/charset.css
@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+.utf8 {
+  color: green;
+}
diff --git a/packages/playground/css/folder with space/ok.png b/packages/playground/css/folder with space/ok.png
new file mode 100644
index 00000000000000..a8d1e52510c41c
Binary files /dev/null and b/packages/playground/css/folder with space/ok.png differ
diff --git a/packages/playground/css/folder with space/space.css b/packages/playground/css/folder with space/space.css
new file mode 100644
index 00000000000000..55a8532da32a94
--- /dev/null
+++ b/packages/playground/css/folder with space/space.css	
@@ -0,0 +1,5 @@
+.import-with-space {
+  color: green;
+  background: url(spacefolder/ok.png);
+  background-position: center;
+}
diff --git a/packages/playground/css/imported.css b/packages/playground/css/imported.css
index 65743d08b932a7..7d582995fab9fd 100644
--- a/packages/playground/css/imported.css
+++ b/packages/playground/css/imported.css
@@ -1,4 +1,5 @@
 @import './imported-at-import.css';
+@import 'spacefolder/space.css';
 
 .imported {
   color: green;
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index a09d8e6e7c46aa..fef6a0be393748 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -10,6 +10,10 @@ <h1>CSS</h1>
   <p class="imported-at-import">
     @import in import from js: This should be purple
   </p>
+  <p class="import-with-space">
+    @import from file with space: This should be green and have a background
+    image
+  </p>
   <p>Imported css string:</p>
   <pre class="imported-css"></pre>
   <pre class="imported-css-glob"></pre>
@@ -45,6 +49,10 @@ <h1>CSS</h1>
   <p>Imported Less string:</p>
   <pre class="imported-less"></pre>
 
+  <div class="form-box-data-uri">
+    tests Less's `data-uri()` function with relative image paths
+  </div>
+
   <p class="stylus">Stylus: This should be blue</p>
   <p class="stylus-additional-data">
     Stylus additionalData: This should be orange
@@ -85,6 +93,12 @@ <h1>CSS</h1>
   </p>
   <pre class="path-resolved-modules-code"></pre>
 
+  <p>Inline CSS module:</p>
+  <pre class="modules-inline"></pre>
+
+  <p>CSS with @charset:</p>
+  <pre class="charset-css"></pre>
+
   <p class="css-dep">
     @import dependency w/ style enrtrypoints: this should be purple
   </p>
@@ -101,7 +115,7 @@ <h1>CSS</h1>
   </p>
 
   <p class="url-separated">
-    Url separation preservation: should have valid background-image
+    URL separation preservation: should have valid background-image
   </p>
 
   <p class="inlined">Inlined import - this should NOT be red.</p>
diff --git a/packages/playground/css/inline.module.css b/packages/playground/css/inline.module.css
new file mode 100644
index 00000000000000..9566e21e2cd1af
--- /dev/null
+++ b/packages/playground/css/inline.module.css
@@ -0,0 +1,3 @@
+.apply-color-inline {
+  color: turquoise;
+}
diff --git a/packages/playground/css/less.less b/packages/playground/css/less.less
index 69ffa830862014..49cbd3c3bb336e 100644
--- a/packages/playground/css/less.less
+++ b/packages/playground/css/less.less
@@ -1,6 +1,9 @@
 @import '@/nested/nested';
 @import './nested/css-in-less.less';
 
+// Test data-uri calls with relative images.
+@import './less/components/form.less';
+
 @color: blue;
 
 .less {
diff --git a/packages/playground/css/less/components/form.less b/packages/playground/css/less/components/form.less
new file mode 100644
index 00000000000000..feaaea94ce1bba
--- /dev/null
+++ b/packages/playground/css/less/components/form.less
@@ -0,0 +1,4 @@
+.form-box-data-uri {
+  // data-uri() calls with relative paths should be replaced just like urls.
+  background-image: data-uri('../images/backgrounds/form-select.svg');
+}
diff --git a/packages/playground/css/less/images/backgrounds/form-select.svg b/packages/playground/css/less/images/backgrounds/form-select.svg
new file mode 100644
index 00000000000000..8aaf69c09e03f4
--- /dev/null
+++ b/packages/playground/css/less/images/backgrounds/form-select.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="16" viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon fill="#000" points="12 1 9 6 15 6" />
+  <polygon fill="#000" points="12 13 9 8 15 8" />
+</svg>
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 6edd840a87c5e7..0d03aafbf0ec7f 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -38,6 +38,12 @@ text(
   JSON.stringify(composesPathResolvingMod, null, 2)
 )
 
+import inlineMod from './inline.module.css?inline'
+text('.modules-inline', inlineMod)
+
+import charset from './charset.css'
+text('.charset-css', charset)
+
 import './dep.css'
 import './glob-dep.css'
 
diff --git a/packages/playground/css/postcss-caching/css.spec.ts b/packages/playground/css/postcss-caching/css.spec.ts
index 6c85d127003680..e8ba73154b6bc8 100644
--- a/packages/playground/css/postcss-caching/css.spec.ts
+++ b/packages/playground/css/postcss-caching/css.spec.ts
@@ -1,9 +1,9 @@
-import { getColor } from '../../testUtils'
+import { getColor, ports } from '../../testUtils'
 import { createServer } from 'vite'
 import path from 'path'
 
 test('postcss config', async () => {
-  const port = 5005
+  const port = ports['css/postcss-caching']
   const startServer = async (root) => {
     const server = await createServer({
       root,
diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js
index 53d001d8387989..639a1302debb88 100644
--- a/packages/playground/css/vite.config.js
+++ b/packages/playground/css/vite.config.js
@@ -9,7 +9,8 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@': __dirname
+      '@': __dirname,
+      spacefolder: __dirname + '/folder with space'
     }
   },
   css: {
diff --git a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
index 9f8276d5e4d855..c7157ef4652ec6 100644
--- a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
+++ b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
@@ -8,6 +8,10 @@ test('should load literal dynamic import', async () => {
 test('should load full dynamic import from public', async () => {
   await page.click('.qux')
   await untilUpdated(() => page.textContent('.view'), 'Qux view', true)
+  // No warning should be logged as we are using @vite-ignore
+  expect(
+    serverLogs.some((log) => log.includes('cannot be analyzed by vite'))
+  ).toBe(false)
 })
 
 test('should load data URL of `blob:`', async () => {
diff --git a/packages/playground/dynamic-import/nested/index.js b/packages/playground/dynamic-import/nested/index.js
index 1a118ecc79051b..5518c56a35a2cc 100644
--- a/packages/playground/dynamic-import/nested/index.js
+++ b/packages/playground/dynamic-import/nested/index.js
@@ -35,7 +35,7 @@ document.querySelector('.mxd2').addEventListener('click', async () => {
   const test = { jss: '../mxd.js' }
   const ttest = test
   const view = 'mxd'
-  const { default: mxdDynamic } = await import(test.jss)
+  const { default: mxdDynamic } = await import(/*@vite-ignore*/ test.jss)
   text('.view', mxdStatic === mxdDynamic)
 })
 
diff --git a/packages/playground/fs-serve/__tests__/fs-serve.spec.ts b/packages/playground/fs-serve/__tests__/fs-serve.spec.ts
index c618186b9bcd64..eba1e441881710 100644
--- a/packages/playground/fs-serve/__tests__/fs-serve.spec.ts
+++ b/packages/playground/fs-serve/__tests__/fs-serve.spec.ts
@@ -23,6 +23,15 @@ describe('main', () => {
       expect(await page.textContent('.safe-fetch-status')).toBe('200')
     })
 
+    test('safe fetch with special characters', async () => {
+      expect(
+        await page.textContent('.safe-fetch-subdir-special-characters')
+      ).toMatch('KEY=safe')
+      expect(
+        await page.textContent('.safe-fetch-subdir-special-characters-status')
+      ).toBe('200')
+    })
+
     test('unsafe fetch', async () => {
       expect(await page.textContent('.unsafe-fetch')).toMatch('403 Restricted')
       expect(await page.textContent('.unsafe-fetch-status')).toBe('403')
@@ -33,6 +42,13 @@ describe('main', () => {
       expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
     })
 
+    test('safe fs fetch with special characters', async () => {
+      expect(await page.textContent('.safe-fs-fetch-special-characters')).toBe(
+        stringified
+      )
+      expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
+    })
+
     test('unsafe fs fetch', async () => {
       expect(await page.textContent('.unsafe-fs-fetch')).toBe('')
       expect(await page.textContent('.unsafe-fs-fetch-status')).toBe('403')
diff --git a/packages/playground/fs-serve/root/src/index.html b/packages/playground/fs-serve/root/src/index.html
index 9e4f728a593a91..951e14ad2cce91 100644
--- a/packages/playground/fs-serve/root/src/index.html
+++ b/packages/playground/fs-serve/root/src/index.html
@@ -11,6 +11,8 @@ <h2>Safe Fetch</h2>
 <h2>Safe Fetch Subdirectory</h2>
 <pre class="safe-fetch-subdir-status"></pre>
 <pre class="safe-fetch-subdir"></pre>
+<pre class="safe-fetch-subdir-special-characters-status"></pre>
+<pre class="safe-fetch-subdir-special-characters"></pre>
 
 <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch-status"></pre>
@@ -19,6 +21,8 @@ <h2>Unsafe Fetch</h2>
 <h2>Safe /@fs/ Fetch</h2>
 <pre class="safe-fs-fetch-status"></pre>
 <pre class="safe-fs-fetch"></pre>
+<pre class="safe-fs-fetch-special-characters-status"></pre>
+<pre class="safe-fs-fetch-special-characters"></pre>
 
 <h2>Unsafe /@fs/ Fetch</h2>
 <pre class="unsafe-fs-fetch-status"></pre>
@@ -56,6 +60,16 @@ <h2>Denied</h2>
       text('.safe-fetch-subdir', JSON.stringify(data))
     })
 
+  // inside allowed dir, with special characters, safe fetch
+  fetch('/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.txt')
+    .then((r) => {
+      text('.safe-fetch-subdir-special-characters-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.safe-fetch-subdir-special-characters', JSON.stringify(data))
+    })
+
   // outside of allowed dir, treated as unsafe
   fetch('/unsafe.txt')
     .then((r) => {
@@ -92,6 +106,20 @@ <h2>Denied</h2>
       console.error(e)
     })
 
+  // not imported before, inside root with special characters, treated as safe
+  fetch(
+    '/@fs/' +
+      ROOT +
+      '/root/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.json'
+  )
+    .then((r) => {
+      text('.safe-fs-fetch-special-characters-status', r.status)
+      return r.json()
+    })
+    .then((data) => {
+      text('.safe-fs-fetch-special-characters', JSON.stringify(data))
+    })
+
   // .env, denied by default
   fetch('/@fs/' + ROOT + '/root/.env')
     .then((r) => {
diff --git "a/packages/playground/fs-serve/root/src/special characters \303\245\303\244\303\266/safe.json" "b/packages/playground/fs-serve/root/src/special characters \303\245\303\244\303\266/safe.json"
new file mode 100644
index 00000000000000..84f96593c10bad
--- /dev/null
+++ "b/packages/playground/fs-serve/root/src/special characters \303\245\303\244\303\266/safe.json"	
@@ -0,0 +1,3 @@
+{
+  "msg": "safe"
+}
diff --git "a/packages/playground/fs-serve/root/src/special characters \303\245\303\244\303\266/safe.txt" "b/packages/playground/fs-serve/root/src/special characters \303\245\303\244\303\266/safe.txt"
new file mode 100644
index 00000000000000..3f3d0607101642
--- /dev/null
+++ "b/packages/playground/fs-serve/root/src/special characters \303\245\303\244\303\266/safe.txt"	
@@ -0,0 +1 @@
+KEY=safe
diff --git a/packages/playground/glob-import/__tests__/glob-import.spec.ts b/packages/playground/glob-import/__tests__/glob-import.spec.ts
index fff8d9fe202ebc..ebdf6c0ab29193 100644
--- a/packages/playground/glob-import/__tests__/glob-import.spec.ts
+++ b/packages/playground/glob-import/__tests__/glob-import.spec.ts
@@ -66,6 +66,12 @@ const rawResult = {
   }
 }
 
+const relativeRawResult = {
+  '../glob-import/dir/baz.json': {
+    msg: 'baz'
+  }
+}
+
 test('should work', async () => {
   expect(await page.textContent('.result')).toBe(
     JSON.stringify(allResult, null, 2)
@@ -81,6 +87,12 @@ test('import glob raw', async () => {
   )
 })
 
+test('import relative glob raw', async () => {
+  expect(await page.textContent('.relative-glob-raw')).toBe(
+    JSON.stringify(relativeRawResult, null, 2)
+  )
+})
+
 if (!isBuild) {
   test('hmr for adding/removing files', async () => {
     addFile('dir/a.js', '')
diff --git a/packages/playground/glob-import/index.html b/packages/playground/glob-import/index.html
index 52d41b817a169c..64f456aeb4d6a2 100644
--- a/packages/playground/glob-import/index.html
+++ b/packages/playground/glob-import/index.html
@@ -1,6 +1,7 @@
 <pre class="result"></pre>
 <pre class="result-node_modules"></pre>
 <pre class="globraw"></pre>
+<pre class="relative-glob-raw"></pre>
 
 <script type="module" src="./dir/index.js"></script>
 <script type="module">
@@ -52,3 +53,21 @@
     2
   )
 </script>
+
+<script type="module">
+  const relativeRawModules = import.meta.globEager(
+    '../glob-import/dir/*.json',
+    {
+      as: 'raw'
+    }
+  )
+  const relativeGlobRaw = {}
+  Object.keys(relativeRawModules).forEach((key) => {
+    relativeGlobRaw[key] = JSON.parse(relativeRawModules[key])
+  })
+  document.querySelector('.relative-glob-raw').textContent = JSON.stringify(
+    relativeGlobRaw,
+    null,
+    2
+  )
+</script>
diff --git a/packages/playground/hmr/__tests__/hmr.spec.ts b/packages/playground/hmr/__tests__/hmr.spec.ts
index 6ddc2345ae4fb4..7325c9fe47943a 100644
--- a/packages/playground/hmr/__tests__/hmr.spec.ts
+++ b/packages/playground/hmr/__tests__/hmr.spec.ts
@@ -160,4 +160,38 @@ if (!isBuild) {
     expect(textprev).not.toMatch('direct')
     expect(textpost).not.toMatch('direct')
   })
+
+  test('not loaded dynamic import', async () => {
+    await page.goto(viteTestUrl + '/dynamic-import/index.html')
+
+    let btn = await page.$('button')
+    expect(await btn.textContent()).toBe('Counter 0')
+    await btn.click()
+    expect(await btn.textContent()).toBe('Counter 1')
+
+    // Modifying `index.ts` triggers a page reload, as expected
+    editFile('dynamic-import/index.ts', (code) => code)
+    await page.waitForNavigation()
+    btn = await page.$('button')
+    expect(await btn.textContent()).toBe('Counter 0')
+
+    await btn.click()
+    expect(await btn.textContent()).toBe('Counter 1')
+
+    // #7561
+    // `dep.ts` defines `import.module.hot.accept` and has not been loaded.
+    // Therefore, modifying it has no effect (doesn't trigger a page reload).
+    // (Note that, a dynamic import that is never loaded and that does not
+    // define `accept.module.hot.accept` may wrongfully trigger a full page
+    // reload, see discussion at #7561.)
+    editFile('dynamic-import/dep.ts', (code) => code)
+    try {
+      await page.waitForNavigation({ timeout: 1000 })
+    } catch (err) {
+      const errMsg = 'page.waitForNavigation: Timeout 1000ms exceeded.'
+      expect(err.message.slice(0, errMsg.length)).toBe(errMsg)
+    }
+    btn = await page.$('button')
+    expect(await btn.textContent()).toBe('Counter 1')
+  })
 }
diff --git a/packages/playground/hmr/dynamic-import/dep.ts b/packages/playground/hmr/dynamic-import/dep.ts
new file mode 100644
index 00000000000000..aca649f226f770
--- /dev/null
+++ b/packages/playground/hmr/dynamic-import/dep.ts
@@ -0,0 +1,2 @@
+// This file is never loaded
+import.meta.hot.accept(() => {})
diff --git a/packages/playground/hmr/dynamic-import/index.html b/packages/playground/hmr/dynamic-import/index.html
new file mode 100644
index 00000000000000..f5290ad4f1e507
--- /dev/null
+++ b/packages/playground/hmr/dynamic-import/index.html
@@ -0,0 +1,2 @@
+<button>Counter 0</button>
+<script type="module" src="./index.ts"></script>
diff --git a/packages/playground/hmr/dynamic-import/index.ts b/packages/playground/hmr/dynamic-import/index.ts
new file mode 100644
index 00000000000000..0230140278989f
--- /dev/null
+++ b/packages/playground/hmr/dynamic-import/index.ts
@@ -0,0 +1,12 @@
+const btn = document.querySelector('button')
+let count = 0
+const update = () => {
+  btn.textContent = `Counter ${count}`
+}
+btn.onclick = () => {
+  count++
+  update()
+}
+function neverCalled() {
+  import('./dep')
+}
diff --git a/packages/playground/html/__tests__/html.spec.ts b/packages/playground/html/__tests__/html.spec.ts
index 66f537e5026361..834db1f6126cad 100644
--- a/packages/playground/html/__tests__/html.spec.ts
+++ b/packages/playground/html/__tests__/html.spec.ts
@@ -231,7 +231,7 @@ if (!isBuild) {
       await editFile('invalid.html', (content) => {
         return content.replace('<div Bad', '<div> Good')
       })
-      const content = await page.waitForSelector('text=Good Html')
+      const content = await page.waitForSelector('text=Good HTML')
       expect(content).toBeTruthy()
     })
   })
diff --git a/packages/playground/html/invalid.html b/packages/playground/html/invalid.html
index 5b5cf429687466..8acea73f16bdad 100644
--- a/packages/playground/html/invalid.html
+++ b/packages/playground/html/invalid.html
@@ -1 +1 @@
-<div Bad Html</div>
+<div Bad HTML</div>
diff --git a/packages/playground/js-sourcemap/__tests__/build.spec.ts b/packages/playground/js-sourcemap/__tests__/build.spec.ts
new file mode 100644
index 00000000000000..e36c1f52d2c1f8
--- /dev/null
+++ b/packages/playground/js-sourcemap/__tests__/build.spec.ts
@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (isBuild) {
+  test('should not output sourcemap warning (#4939)', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch('Sourcemap is likely to be incorrect')
+    })
+  })
+} else {
+  test('this file only includes test for build', () => {
+    expect(true).toBe(true)
+  })
+}
diff --git a/packages/playground/js-sourcemap/__tests__/serve.spec.ts b/packages/playground/js-sourcemap/__tests__/serve.spec.ts
new file mode 100644
index 00000000000000..a1ffdddc37ecd5
--- /dev/null
+++ b/packages/playground/js-sourcemap/__tests__/serve.spec.ts
@@ -0,0 +1,44 @@
+import { URL } from 'url'
+import {
+  extractSourcemap,
+  formatSourcemapForSnapshot,
+  isBuild
+} from 'testUtils'
+
+if (!isBuild) {
+  test('js', async () => {
+    const res = await page.request.get(new URL('./foo.js', page.url()).href)
+    const js = await res.text()
+    const lines = js.split('\n')
+    expect(lines[lines.length - 1].includes('//')).toBe(false) // expect no sourcemap
+  })
+
+  test('ts', async () => {
+    const res = await page.request.get(new URL('./bar.ts', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      Object {
+        "mappings": "AAAO,aAAM,MAAM;",
+        "sources": Array [
+          "/root/bar.ts",
+        ],
+        "sourcesContent": Array [
+          "export const bar = 'bar'
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
+  test('should not output missing source file warning', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
+    })
+  })
+} else {
+  test('this file only includes test for serve', () => {
+    expect(true).toBe(true)
+  })
+}
diff --git a/packages/playground/js-sourcemap/bar.ts b/packages/playground/js-sourcemap/bar.ts
new file mode 100644
index 00000000000000..1fc11814f22e80
--- /dev/null
+++ b/packages/playground/js-sourcemap/bar.ts
@@ -0,0 +1 @@
+export const bar = 'bar'
diff --git a/packages/playground/js-sourcemap/foo.js b/packages/playground/js-sourcemap/foo.js
new file mode 100644
index 00000000000000..cb356468240d50
--- /dev/null
+++ b/packages/playground/js-sourcemap/foo.js
@@ -0,0 +1 @@
+export const foo = 'foo'
diff --git a/packages/playground/js-sourcemap/index.html b/packages/playground/js-sourcemap/index.html
new file mode 100644
index 00000000000000..025b161011a3fa
--- /dev/null
+++ b/packages/playground/js-sourcemap/index.html
@@ -0,0 +1,6 @@
+<div class="wrapper">
+  <h1>JS Sourcemap</h1>
+</div>
+
+<script type="module" src="./foo.js"></script>
+<script type="module" src="./bar.ts"></script>
diff --git a/packages/playground/js-sourcemap/package.json b/packages/playground/js-sourcemap/package.json
new file mode 100644
index 00000000000000..e5a97aea80830f
--- /dev/null
+++ b/packages/playground/js-sourcemap/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-js-sourcemap",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "preview": "vite preview"
+  }
+}
diff --git a/packages/playground/js-sourcemap/vite.config.js b/packages/playground/js-sourcemap/vite.config.js
new file mode 100644
index 00000000000000..bc9d1748cab964
--- /dev/null
+++ b/packages/playground/js-sourcemap/vite.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  build: {
+    sourcemap: true
+  }
+}
diff --git a/packages/playground/legacy/__tests__/legacy.spec.ts b/packages/playground/legacy/__tests__/legacy.spec.ts
index b8025694437502..65bd39ff32b1d1 100644
--- a/packages/playground/legacy/__tests__/legacy.spec.ts
+++ b/packages/playground/legacy/__tests__/legacy.spec.ts
@@ -83,4 +83,8 @@ if (isBuild) {
   test('should emit css file', async () => {
     expect(listAssets().some((filename) => filename.endsWith('.css')))
   })
+
+  test('includes structuredClone polyfill which is supported after core-js v3', () => {
+    expect(findAssetFile(/polyfills-legacy/)).toMatch('"structuredClone"')
+  })
 }
diff --git a/packages/playground/legacy/__tests__/ssr/serve.js b/packages/playground/legacy/__tests__/ssr/serve.js
index df43f180afb188..c7ef2ed3520e53 100644
--- a/packages/playground/legacy/__tests__/ssr/serve.js
+++ b/packages/playground/legacy/__tests__/ssr/serve.js
@@ -2,8 +2,9 @@
 // this is automtically detected by scripts/jestPerTestSetup.ts and will replace
 // the default e2e test serve behavior
 const path = require('path')
+const { ports } = require('../../../testUtils')
 
-const port = (exports.port = 9527)
+const port = (exports.port = ports['legacy/ssr'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/legacy/index.html b/packages/playground/legacy/index.html
index bdc2feac6b4fbe..d481766463cd4f 100644
--- a/packages/playground/legacy/index.html
+++ b/packages/playground/legacy/index.html
@@ -1,6 +1,7 @@
 <h1 id="app"></h1>
 <div id="env"></div>
 <div id="iterators"></div>
+<div id="features-after-corejs-3"></div>
 <div id="babel-helpers"></div>
 <div id="assets"></div>
 <script type="module" src="./main.js"></script>
diff --git a/packages/playground/legacy/main.js b/packages/playground/legacy/main.js
index b05acf439bdff8..31579b4717810d 100644
--- a/packages/playground/legacy/main.js
+++ b/packages/playground/legacy/main.js
@@ -21,6 +21,12 @@ text('#env', `is legacy: ${isLegacy}`)
 // Iterators
 text('#iterators', [...new Set(['hello'])].join(''))
 
+// structuredClone is supported core.js v3.20.0+
+text(
+  '#features-after-corejs-3',
+  JSON.stringify(structuredClone({ foo: 'foo' }))
+)
+
 // babel-helpers
 // Using `String.raw` to inject `@babel/plugin-transform-template-literals`
 // helpers.
diff --git a/packages/playground/lib/__tests__/serve.js b/packages/playground/lib/__tests__/serve.js
index 15c64de40276d1..eac6980286af52 100644
--- a/packages/playground/lib/__tests__/serve.js
+++ b/packages/playground/lib/__tests__/serve.js
@@ -5,8 +5,9 @@
 const path = require('path')
 const http = require('http')
 const sirv = require('sirv')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9527)
+const port = (exports.port = ports.lib)
 
 /**
  * @param {string} root
diff --git a/packages/playground/optimize-missing-deps/__test__/serve.js b/packages/playground/optimize-missing-deps/__test__/serve.js
index 9f293024f83913..89a6ce3593cd0e 100644
--- a/packages/playground/optimize-missing-deps/__test__/serve.js
+++ b/packages/playground/optimize-missing-deps/__test__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9529)
+const port = (exports.port = ports['optimize-missing-deps'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 58ef368099e82f..75b1d15d299319 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "devDependencies": {
+    "convert-source-map": "^1.8.0",
     "css-color-names": "^1.0.1"
   }
 }
diff --git a/packages/playground/resolve/__tests__/resolve.spec.ts b/packages/playground/resolve/__tests__/resolve.spec.ts
index c8c85d8df9b806..46f8f6138b39a4 100644
--- a/packages/playground/resolve/__tests__/resolve.spec.ts
+++ b/packages/playground/resolve/__tests__/resolve.spec.ts
@@ -17,7 +17,10 @@ test('deep import with exports field', async () => {
 })
 
 test('deep import with query with exports field', async () => {
-  expect(await page.textContent('.exports-deep-query')).not.toMatch('fail')
+  // since it is imported with `?url` it should return a url
+  expect(await page.textContent('.exports-deep-query')).toMatch(
+    isBuild ? /base64/ : '/exports-path/deep.json'
+  )
 })
 
 test('deep import with exports field + exposed dir', async () => {
@@ -58,8 +61,14 @@ test('dont add extension to directory name (./dir-with-ext.js/index.js)', async
   expect(await page.textContent('.dir-with-ext')).toMatch('[success]')
 })
 
-test('do not resolve to the `module` field if the importer is a `require` call', async () => {
-  expect(await page.textContent('.require-pkg-with-module-field')).toMatch(
+test('resolve to the `browser` field instead of `module` when the importer is a `require` call', async () => {
+  expect(
+    await page.textContent('.require-pkg-with-browser-and-module-field')
+  ).toMatch('[success]')
+})
+
+test('resolve to the `main` field instead of `module` when the importer is a `require` call', async () => {
+  expect(await page.textContent('.require-pkg-with-esm-entries')).toMatch(
     '[success]'
   )
 })
diff --git a/packages/playground/resolve/index.html b/packages/playground/resolve/index.html
index 2c4ed7b9aa760c..2478c89b495f49 100644
--- a/packages/playground/resolve/index.html
+++ b/packages/playground/resolve/index.html
@@ -58,8 +58,17 @@ <h2>Resolve file name containing dot</h2>
 <h2>Browser Field</h2>
 <p class="browser">fail</p>
 
-<h2>Don't resolve to the `module` field if the importer is a `require` call</h2>
-<p class="require-pkg-with-module-field">fail</p>
+<h2>
+  Resolve to the `browser` field instead of `module` when the importer is a
+  `require` call
+</h2>
+<p class="require-pkg-with-browser-and-module-field">fail</p>
+
+<h2>
+  Resolve to the `main` field instead of `module` when the importer is a
+  `require` call
+</h2>
+<p class="require-pkg-with-esm-entries">fail</p>
 
 <h2>CSS Entry</h2>
 <p class="css"></p>
@@ -171,10 +180,11 @@ <h2>resolve package that contains # in path</h2>
   import e from 'resolve-browser-field/ext-index/index.js'
   import f from 'resolve-browser-field/ext-index'
   import g from 'resolve-browser-field/no-ext-index/index.js' // no substitution
+  import h from 'resolve-browser-field/no-ext?query'
 
   import { ra, rb, rc, rd, re, rf, rg } from 'resolve-browser-field/relative'
 
-  const success = [main, a, c, d, e, f, ra, rc, rd, re, rf]
+  const success = [main, a, c, d, e, f, h, ra, rc, rd, re, rf]
   const noSuccess = [b, g, rb, rg]
 
   if (
@@ -184,8 +194,11 @@ <h2>resolve package that contains # in path</h2>
     text('.browser', main)
   }
 
-  import { msg as requireButWithModuleFieldMsg } from 'require-pkg-with-module-field'
-  text('.require-pkg-with-module-field', requireButWithModuleFieldMsg)
+  import { msg as requireBrowserMsg } from 'require-pkg-with-browser-and-module-field'
+  text('.require-pkg-with-browser-and-module-field', requireBrowserMsg)
+
+  import { msg as requireMainMsg } from 'require-pkg-with-esm-entries'
+  text('.require-pkg-with-esm-entries', requireMainMsg)
 
   import { msg as customExtMsg } from './custom-ext'
   text('.custom-ext', customExtMsg)
diff --git a/packages/playground/resolve/package.json b/packages/playground/resolve/package.json
index dda4476bc6ae82..4b8d497b3dbb27 100644
--- a/packages/playground/resolve/package.json
+++ b/packages/playground/resolve/package.json
@@ -12,7 +12,8 @@
     "@babel/runtime": "^7.16.0",
     "es5-ext": "0.10.53",
     "normalize.css": "^8.0.1",
-    "require-pkg-with-module-field": "link:./require-pkg-with-module-field",
+    "require-pkg-with-browser-and-module-field": "link:./require-pkg-with-browser-and-module-field",
+    "require-pkg-with-esm-entries": "link:./require-pkg-with-esm-entries",
     "resolve-browser-field": "link:./browser-field",
     "resolve-custom-condition": "link:./custom-condition",
     "resolve-custom-main-field": "link:./custom-main-field",
diff --git a/packages/playground/resolve/require-pkg-with-module-field/dep.cjs b/packages/playground/resolve/require-pkg-with-browser-and-module-field/dep.cjs
similarity index 100%
rename from packages/playground/resolve/require-pkg-with-module-field/dep.cjs
rename to packages/playground/resolve/require-pkg-with-browser-and-module-field/dep.cjs
diff --git a/packages/playground/resolve/require-pkg-with-browser-and-module-field/index.cjs b/packages/playground/resolve/require-pkg-with-browser-and-module-field/index.cjs
new file mode 100644
index 00000000000000..86d3360ab38dcb
--- /dev/null
+++ b/packages/playground/resolve/require-pkg-with-browser-and-module-field/index.cjs
@@ -0,0 +1,8 @@
+const dep = require('./dep.cjs')
+
+const msg =
+  dep === '1.111222233334444555566e+21'
+    ? '[success] require-pkg-with-browser-and-module-field'
+    : '[failed] require-pkg-with-browser-and-module-field'
+
+exports.msg = msg
diff --git a/packages/playground/resolve/require-pkg-with-module-field/package.json b/packages/playground/resolve/require-pkg-with-browser-and-module-field/package.json
similarity index 68%
rename from packages/playground/resolve/require-pkg-with-module-field/package.json
rename to packages/playground/resolve/require-pkg-with-browser-and-module-field/package.json
index e409343a7567d5..2a0419b331c407 100644
--- a/packages/playground/resolve/require-pkg-with-module-field/package.json
+++ b/packages/playground/resolve/require-pkg-with-browser-and-module-field/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "require-pkg-with-module-field",
+  "name": "require-pkg-with-browser-and-module-field",
   "private": true,
   "version": "1.0.0",
   "main": "./index.cjs",
diff --git a/packages/playground/resolve/require-pkg-with-esm-entries/index.cjs b/packages/playground/resolve/require-pkg-with-esm-entries/index.cjs
new file mode 100644
index 00000000000000..55958fbdba26ee
--- /dev/null
+++ b/packages/playground/resolve/require-pkg-with-esm-entries/index.cjs
@@ -0,0 +1,9 @@
+const fromEvent = require('callbag-from-event')
+
+const msg =
+  // should be the exported function instead of the ES Module record (`{ default: ... }`)
+  typeof fromEvent === 'function'
+    ? '[success] require-pkg-with-esm-entries'
+    : '[failed] require-pkg-with-esm-entries'
+
+exports.msg = msg
diff --git a/packages/playground/resolve/require-pkg-with-esm-entries/package.json b/packages/playground/resolve/require-pkg-with-esm-entries/package.json
new file mode 100644
index 00000000000000..b845364bb6f19a
--- /dev/null
+++ b/packages/playground/resolve/require-pkg-with-esm-entries/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "require-pkg-with-esm-entries",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./index.cjs",
+  "dependencies": {
+    "callbag-from-event": "1.3.0"
+  }
+}
diff --git a/packages/playground/resolve/require-pkg-with-module-field/index.cjs b/packages/playground/resolve/require-pkg-with-module-field/index.cjs
deleted file mode 100644
index da215f306d1ac1..00000000000000
--- a/packages/playground/resolve/require-pkg-with-module-field/index.cjs
+++ /dev/null
@@ -1,8 +0,0 @@
-const dep = require('./dep.cjs')
-
-const msg =
-  dep === '1.111222233334444555566e+21'
-    ? '[success] require-pkg-with-module-field'
-    : '[failed] require-pkg-with-module-field'
-
-exports.msg = msg
diff --git a/packages/playground/resolve/vite.config.js b/packages/playground/resolve/vite.config.js
index 0550d1ecf6f044..c1282f4ffc789d 100644
--- a/packages/playground/resolve/vite.config.js
+++ b/packages/playground/resolve/vite.config.js
@@ -42,6 +42,9 @@ module.exports = {
     }
   ],
   optimizeDeps: {
-    include: ['require-pkg-with-module-field']
+    include: [
+      'require-pkg-with-browser-and-module-field',
+      'require-pkg-with-esm-entries'
+    ]
   }
 }
diff --git a/packages/playground/ssr-deps/__tests__/serve.js b/packages/playground/ssr-deps/__tests__/serve.js
index 5ba5724f2b7a94..6c2584601c9331 100644
--- a/packages/playground/ssr-deps/__tests__/serve.js
+++ b/packages/playground/ssr-deps/__tests__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9530)
+const port = (exports.port = ports['ssr-deps'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/ssr-html/__tests__/serve.js b/packages/playground/ssr-html/__tests__/serve.js
index 5ba5724f2b7a94..d119397700cf75 100644
--- a/packages/playground/ssr-html/__tests__/serve.js
+++ b/packages/playground/ssr-html/__tests__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9530)
+const port = (exports.port = ports['ssr-html'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/ssr-pug/__tests__/serve.js b/packages/playground/ssr-pug/__tests__/serve.js
index 5ba5724f2b7a94..392aa831ebb82d 100644
--- a/packages/playground/ssr-pug/__tests__/serve.js
+++ b/packages/playground/ssr-pug/__tests__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9530)
+const port = (exports.port = ports['ssr-pug'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/ssr-react/__tests__/serve.js b/packages/playground/ssr-react/__tests__/serve.js
index 1bc028c03dc27c..07476e0726e268 100644
--- a/packages/playground/ssr-react/__tests__/serve.js
+++ b/packages/playground/ssr-react/__tests__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9528)
+const port = (exports.port = ports['ssr-react'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/ssr-vue/__tests__/serve.js b/packages/playground/ssr-vue/__tests__/serve.js
index 1e220fed9630e4..5bcd5a4639877a 100644
--- a/packages/playground/ssr-vue/__tests__/serve.js
+++ b/packages/playground/ssr-vue/__tests__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9527)
+const port = (exports.port = ports['ssr-vue'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/ssr-webworker/__tests__/serve.js b/packages/playground/ssr-webworker/__tests__/serve.js
index f4f207b85026c6..38a957b0a333ea 100644
--- a/packages/playground/ssr-webworker/__tests__/serve.js
+++ b/packages/playground/ssr-webworker/__tests__/serve.js
@@ -3,8 +3,9 @@
 // the default e2e test serve behavior
 
 const path = require('path')
+const { ports } = require('../../testUtils')
 
-const port = (exports.port = 9528)
+const port = (exports.port = ports['ssr-webworker'])
 
 /**
  * @param {string} root
diff --git a/packages/playground/tailwind-sourcemap/__tests__/build.spec.ts b/packages/playground/tailwind-sourcemap/__tests__/build.spec.ts
new file mode 100644
index 00000000000000..e36c1f52d2c1f8
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/__tests__/build.spec.ts
@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (isBuild) {
+  test('should not output sourcemap warning (#4939)', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch('Sourcemap is likely to be incorrect')
+    })
+  })
+} else {
+  test('this file only includes test for build', () => {
+    expect(true).toBe(true)
+  })
+}
diff --git a/packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts b/packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts
new file mode 100644
index 00000000000000..d961f75e4536e5
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts
@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (!isBuild) {
+  test('should not output missing source file warning', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
+    })
+  })
+} else {
+  test('this file only includes test for serve', () => {
+    expect(true).toBe(true)
+  })
+}
diff --git a/packages/playground/tailwind-sourcemap/index.html b/packages/playground/tailwind-sourcemap/index.html
new file mode 100644
index 00000000000000..95c8c5da7716d1
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/index.html
@@ -0,0 +1,9 @@
+<div class="wrapper">
+  <h1>Tailwind Sourcemap</h1>
+
+  <p class="text-red-400">foo</p>
+</div>
+
+<script type="module">
+  import './tailwind.css'
+</script>
diff --git a/packages/playground/tailwind-sourcemap/package.json b/packages/playground/tailwind-sourcemap/package.json
new file mode 100644
index 00000000000000..5c374f3bf47f1b
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "test-tailwind-sourcemap",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.0.23"
+  }
+}
diff --git a/packages/playground/tailwind-sourcemap/postcss.config.js b/packages/playground/tailwind-sourcemap/postcss.config.js
new file mode 100644
index 00000000000000..eab3760cbc7b42
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: __dirname + '/tailwind.config.js' }
+  }
+}
diff --git a/packages/playground/tailwind-sourcemap/tailwind.config.js b/packages/playground/tailwind-sourcemap/tailwind.config.js
new file mode 100644
index 00000000000000..f89a536ccd742f
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./index.html'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}
diff --git a/packages/playground/tailwind-sourcemap/tailwind.css b/packages/playground/tailwind-sourcemap/tailwind.css
new file mode 100644
index 00000000000000..b5c61c956711f9
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/playground/tailwind-sourcemap/vite.config.js b/packages/playground/tailwind-sourcemap/vite.config.js
new file mode 100644
index 00000000000000..70fea77247bcd4
--- /dev/null
+++ b/packages/playground/tailwind-sourcemap/vite.config.js
@@ -0,0 +1,11 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  css: {
+    devSourcemap: true
+  },
+  build: {
+    sourcemap: true
+  }
+}
diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts
index 0c8186d4ed121d..427fea6d947a4f 100644
--- a/packages/playground/testUtils.ts
+++ b/packages/playground/testUtils.ts
@@ -7,6 +7,25 @@ import path from 'path'
 import colors from 'css-color-names'
 import type { ElementHandle } from 'playwright-chromium'
 import type { Manifest } from 'vite'
+import { normalizePath } from 'vite'
+import { fromComment } from 'convert-source-map'
+
+// make sure these ports are unique
+export const ports = {
+  cli: 9510,
+  'cli-module': 9511,
+  'legacy/ssr': 9520,
+  lib: 9521,
+  'optimize-missing-deps': 9522,
+  'ssr-deps': 9600,
+  'ssr-html': 9601,
+  'ssr-pug': 9602,
+  'ssr-react': 9603,
+  'ssr-vue': 9604,
+  'ssr-webworker': 9605,
+  'css/postcss-caching': 5005,
+  'css/postcss-plugins-different-dir': 5006
+}
 
 export function slash(p: string): string {
   return p.replace(/\\/g, '/')
@@ -138,3 +157,17 @@ export async function untilUpdated(
  * Send the rebuild complete message in build watch
  */
 export { notifyRebuildComplete } from '../../scripts/jestPerTestSetup'
+
+export const extractSourcemap = (content: string) => {
+  const lines = content.trim().split('\n')
+  return fromComment(lines[lines.length - 1]).toObject()
+}
+
+export const formatSourcemapForSnapshot = (map: any) => {
+  const root = normalizePath(testDir)
+  const m = { ...map }
+  delete m.file
+  delete m.names
+  m.sources = m.sources.map((source) => source.replace(root, '/root'))
+  return m
+}
diff --git a/packages/playground/vue-sourcemap/Js.vue b/packages/playground/vue-sourcemap/Js.vue
new file mode 100644
index 00000000000000..3a5577099f67d3
--- /dev/null
+++ b/packages/playground/vue-sourcemap/Js.vue
@@ -0,0 +1,11 @@
+<template>
+  <p>&lt;js&gt;</p>
+</template>
+
+<script>
+console.log('script')
+</script>
+
+<script setup>
+console.log('setup')
+</script>
diff --git a/packages/playground/vue-sourcemap/Main.vue b/packages/playground/vue-sourcemap/Main.vue
index 04ddf50071ccb3..b9b03596f5aea5 100644
--- a/packages/playground/vue-sourcemap/Main.vue
+++ b/packages/playground/vue-sourcemap/Main.vue
@@ -1,5 +1,7 @@
 <template>
   <h1>Vue SFC Sourcemap</h1>
+  <Js />
+  <Ts />
   <Css />
   <Sass />
   <SassWithImport />
@@ -8,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+import Js from './Js.vue'
+import Ts from './Ts.vue'
 import Css from './Css.vue'
 import Sass from './Sass.vue'
 import SassWithImport from './SassWithImport.vue'
diff --git a/packages/playground/vue-sourcemap/Ts.vue b/packages/playground/vue-sourcemap/Ts.vue
new file mode 100644
index 00000000000000..e0d96bb4725abd
--- /dev/null
+++ b/packages/playground/vue-sourcemap/Ts.vue
@@ -0,0 +1,11 @@
+<template>
+  <p>&lt;ts&gt;</p>
+</template>
+
+<script lang="ts">
+console.log('ts script')
+</script>
+
+<script lang="ts" setup>
+console.log('ts setup')
+</script>
diff --git a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts
index 193b0afb9ba73f..08b4c04face111 100644
--- a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts
+++ b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts
@@ -1,10 +1,11 @@
-import { fromComment } from 'convert-source-map'
-import { normalizePath } from 'vite'
-import { isBuild, testDir } from 'testUtils'
+import {
+  extractSourcemap,
+  formatSourcemapForSnapshot,
+  isBuild
+} from 'testUtils'
+import { URL } from 'url'
 
 if (!isBuild) {
-  const root = normalizePath(testDir)
-
   const getStyleTagContentIncluding = async (content: string) => {
     const styles = await page.$$('style')
     for (const style of styles) {
@@ -16,18 +17,63 @@ if (!isBuild) {
     throw new Error('Not found')
   }
 
-  const extractSourcemap = (content: string) => {
-    const lines = content.trim().split('\n')
-    return fromComment(lines[lines.length - 1]).toObject()
-  }
+  test('js', async () => {
+    const res = await page.request.get(new URL('./Js.vue', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      Object {
+        "mappings": "AAKA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;wBARlB,oBAAiB,WAAd,MAAU",
+        "sources": Array [
+          "/root/Js.vue",
+        ],
+        "sourcesContent": Array [
+          "<template>
+        <p>&lt;js&gt;</p>
+      </template>
 
-  const formatSourcemapForSnapshot = (map: any) => {
-    const m = { ...map }
-    delete m.file
-    delete m.names
-    m.sources = m.sources.map((source) => source.replace(root, '/root'))
-    return m
-  }
+      <script>
+      console.log('script')
+      </script>
+
+      <script setup>
+      console.log('setup')
+      </script>
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
+  test('ts', async () => {
+    const res = await page.request.get(new URL('./Ts.vue', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      Object {
+        "mappings": ";AAKA,QAAQ,IAAI,WAAW;;;;AAIvB,YAAQ,IAAI,UAAU;;;;;;;;uBARpB,oBAAiB,WAAd,MAAU",
+        "sources": Array [
+          "/root/Ts.vue",
+        ],
+        "sourcesContent": Array [
+          "<template>
+        <p>&lt;ts&gt;</p>
+      </template>
+
+      <script lang=\\"ts\\">
+      console.log('ts script')
+      </script>
+
+      <script lang=\\"ts\\" setup>
+      console.log('ts setup')
+      </script>
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
 
   test('css', async () => {
     const css = await getStyleTagContentIncluding('.css ')
diff --git a/packages/playground/vue-sourcemap/package.json b/packages/playground/vue-sourcemap/package.json
index 5672b5e3d9d57d..286940b01efa58 100644
--- a/packages/playground/vue-sourcemap/package.json
+++ b/packages/playground/vue-sourcemap/package.json
@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",
-    "convert-source-map": "^1.8.0",
     "less": "^4.1.2",
     "sass": "^1.43.4"
   },
diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue
index d10ae401f7aa8e..87319acdf6f736 100644
--- a/packages/playground/vue/Main.vue
+++ b/packages/playground/vue/Main.vue
@@ -20,6 +20,7 @@
   </Suspense>
   <ReactivityTransform :foo="time" />
   <SetupImportTemplate />
+  <WorkerTest />
 </template>
 
 <script setup lang="ts">
@@ -35,7 +36,7 @@ import ScanDep from './ScanDep.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
-
+import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 
 const time = ref('loading...')
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 63680d6f021684..025c05f53e8688 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -242,3 +242,9 @@ describe('setup import template', () => {
     expect(await page.textContent('.setup-import-template')).toMatch('1')
   })
 })
+
+describe('vue worker', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.vue-worker')).toMatch('worker load!')
+  })
+})
diff --git a/packages/playground/vue/worker.vue b/packages/playground/vue/worker.vue
new file mode 100644
index 00000000000000..c5369fda742348
--- /dev/null
+++ b/packages/playground/vue/worker.vue
@@ -0,0 +1,17 @@
+<template>
+  <h2>worker template error match</h2>
+  <code>
+    const worker = new Worker(new URL('./worker.js', import.meta.url))
+  </code>
+  <div class="vue-worker">{{ message }}</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+const worker = new Worker(new URL('./workerTest.js', import.meta.url))
+worker.addEventListener('message', (ev) => {
+  message.value = ev.data
+})
+</script>
diff --git a/packages/playground/vue/workerTest.js b/packages/playground/vue/workerTest.js
new file mode 100644
index 00000000000000..fcde5e19b30677
--- /dev/null
+++ b/packages/playground/vue/workerTest.js
@@ -0,0 +1 @@
+self.postMessage('worker load!')
diff --git a/packages/playground/worker/__tests__/es/es-worker.spec.ts b/packages/playground/worker/__tests__/es/es-worker.spec.ts
index 51497a0f5ebadd..c7fd0d6c19e4bc 100644
--- a/packages/playground/worker/__tests__/es/es-worker.spec.ts
+++ b/packages/playground/worker/__tests__/es/es-worker.spec.ts
@@ -60,7 +60,7 @@ if (isBuild) {
   // assert correct files
   test('inlined code generation', async () => {
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(20)
+    expect(files.length).toBe(22)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))
@@ -94,7 +94,7 @@ test('classic worker', async () => {
 
 test('emit chunk', async () => {
   expect(await page.textContent('.emti-chunk-worker')).toMatch(
-    '{"msg1":"module1","msg2":"module2","msg3":"module3"}'
+    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
   )
   expect(await page.textContent('.emti-chunk-dynamic-import-worker')).toMatch(
     '"A string/es/"'
diff --git a/packages/playground/worker/__tests__/iife/vite.config.js b/packages/playground/worker/__tests__/iife/vite.config.js
new file mode 100644
index 00000000000000..4204f532b7ac1c
--- /dev/null
+++ b/packages/playground/worker/__tests__/iife/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config')
diff --git a/packages/playground/worker/__tests__/worker.spec.ts b/packages/playground/worker/__tests__/iife/worker.spec.ts
similarity index 91%
rename from packages/playground/worker/__tests__/worker.spec.ts
rename to packages/playground/worker/__tests__/iife/worker.spec.ts
index fc381467f6a4d2..fa9f72fe76131c 100644
--- a/packages/playground/worker/__tests__/worker.spec.ts
+++ b/packages/playground/worker/__tests__/iife/worker.spec.ts
@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import { untilUpdated, isBuild, testDir } from '../../testUtils'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
 import type { Page } from 'playwright-chromium'
 
 test('normal', async () => {
@@ -51,8 +51,11 @@ test.concurrent.each([[true], [false]])('shared worker', async (doTick) => {
   await waitSharedWorkerTick(page)
 })
 
-test('worker emitted', async () => {
-  await untilUpdated(() => page.textContent('.nested-worker'), 'pong')
+test('worker emitted and import.meta.url in nested worker', async () => {
+  await untilUpdated(
+    () => page.textContent('.nested-worker'),
+    'pong http://localhost:3000/iife/sub-worker.js?worker_file'
+  )
 })
 
 if (isBuild) {
diff --git a/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts b/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts
new file mode 100644
index 00000000000000..d846a5de2311d0
--- /dev/null
+++ b/packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden-worker.spec.ts
@@ -0,0 +1,129 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import { Page } from 'playwright-chromium'
+
+if (isBuild) {
+  const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap-hidden/assets')
+  // assert correct files
+  test('sourcemap generation for web workers', async () => {
+    const files = fs.readdirSync(assetsDir)
+    // should have 2 worker chunk
+    expect(files.length).toBe(25)
+    const index = files.find((f) => f.includes('main-module'))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+    const worker = files.find((f) => /^my-worker\.\w+\.js$/.test(f))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+    const sharedWorker = files.find((f) =>
+      /^my-shared-worker\.\w+\.js$/.test(f)
+    )
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+    const possibleTsOutputWorker = files.find((f) =>
+      /^possible-ts-output-worker\.\w+\.js$/.test(f)
+    )
+    const possibleTsOutputWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, possibleTsOutputWorker),
+      'utf-8'
+    )
+    const possibleTsOutputWorkerSourcemap = getSourceMapUrl(
+      possibleTsOutputWorkerContent
+    )
+    const workerNestedWorker = files.find((f) =>
+      /^worker-nested-worker\.\w+\.js$/.test(f)
+    )
+    const workerNestedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, workerNestedWorker),
+      'utf-8'
+    )
+    const workerNestedWorkerSourcemap = getSourceMapUrl(
+      workerNestedWorkerContent
+    )
+    const subWorker = files.find((f) => /^sub-worker\.\w+\.js$/.test(f))
+    const subWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, subWorker),
+      'utf-8'
+    )
+    const subWorkerSourcemap = getSourceMapUrl(subWorkerContent)
+
+    expect(files).toContainEqual(expect.stringMatching(/^index\.\w+\.js\.map$/))
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-shared-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^possible-ts-output-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^worker-nested-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^sub-worker\.\w+\.js\.map$/)
+    )
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toBe(null)
+    expect(workerSourcemap).toBe(null)
+    expect(sharedWorkerSourcemap).toBe(null)
+    expect(possibleTsOutputWorkerSourcemap).toBe(null)
+    expect(workerNestedWorkerSourcemap).toBe(null)
+    expect(subWorkerSourcemap).toBe(null)
+
+    // worker should have all imports resolved and no exports
+    expect(workerContent).not.toMatch(`import`)
+    expect(workerContent).not.toMatch(`export`)
+
+    // shared worker should have all imports resolved and no exports
+    expect(sharedWorkerContent).not.toMatch(`import`)
+    expect(sharedWorkerContent).not.toMatch(`export`)
+
+    // chunk
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap-hidden/assets/my-worker`
+    )
+    expect(content).toMatch(`new Worker("data:application/javascript;base64`)
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap-hidden/assets/possible-ts-output-worker`
+    )
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap-hidden/assets/worker-nested-worker`
+    )
+    expect(content).toMatch(
+      `new SharedWorker("/iife-sourcemap-hidden/assets/my-shared-worker`
+    )
+
+    // inlined
+    expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
+    expect(content).toMatch(`window.Blob`)
+
+    expect(workerNestedWorkerContent).toMatch(
+      `new Worker("/iife-sourcemap-hidden/assets/sub-worker`
+    )
+  })
+} else {
+  // Workaround so that testing serve does not emit
+  // "Your test suite must contain at least one test"
+  test('true', () => {
+    expect(true).toBe(true)
+  })
+}
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}
diff --git a/packages/playground/worker/__tests__/sourcemap-hidden/vite.config.js b/packages/playground/worker/__tests__/sourcemap-hidden/vite.config.js
new file mode 100644
index 00000000000000..d51907577e9deb
--- /dev/null
+++ b/packages/playground/worker/__tests__/sourcemap-hidden/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-sourcemap')('hidden')
diff --git a/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts b/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts
new file mode 100644
index 00000000000000..ceda7dae1fec7c
--- /dev/null
+++ b/packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline-worker.spec.ts
@@ -0,0 +1,112 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import { Page } from 'playwright-chromium'
+
+if (isBuild) {
+  const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap-inline/assets')
+  // assert correct files
+  test('sourcemap generation for web workers', async () => {
+    const files = fs.readdirSync(assetsDir)
+    // should have 2 worker chunk
+    expect(files.length).toBe(13)
+    const index = files.find((f) => f.includes('main-module'))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+    const worker = files.find((f) => /^my-worker\.\w+\.js$/.test(f))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+    const sharedWorker = files.find((f) =>
+      /^my-shared-worker\.\w+\.js$/.test(f)
+    )
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+    const possibleTsOutputWorker = files.find((f) =>
+      /^possible-ts-output-worker\.\w+\.js$/.test(f)
+    )
+    const possibleTsOutputWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, possibleTsOutputWorker),
+      'utf-8'
+    )
+    const possibleTsOutputWorkerSourcemap = getSourceMapUrl(
+      possibleTsOutputWorkerContent
+    )
+    const workerNestedWorker = files.find((f) =>
+      /^worker-nested-worker\.\w+\.js$/.test(f)
+    )
+    const workerNestedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, workerNestedWorker),
+      'utf-8'
+    )
+    const workerNestedWorkerSourcemap = getSourceMapUrl(
+      workerNestedWorkerContent
+    )
+    const subWorker = files.find((f) => /^sub-worker\.\w+\.js$/.test(f))
+    const subWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, subWorker),
+      'utf-8'
+    )
+    const subWorkerSourcemap = getSourceMapUrl(subWorkerContent)
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toMatch(/^data:/)
+    expect(workerSourcemap).toMatch(/^data:/)
+    expect(sharedWorkerSourcemap).toMatch(/^data:/)
+    expect(possibleTsOutputWorkerSourcemap).toMatch(/^data:/)
+    expect(workerNestedWorkerSourcemap).toMatch(/^data:/)
+    expect(subWorkerSourcemap).toMatch(/^data:/)
+
+    // worker should have all imports resolved and no exports
+    expect(workerContent).not.toMatch(`import`)
+    expect(workerContent).not.toMatch(`export`)
+
+    // shared worker should have all imports resolved and no exports
+    expect(sharedWorkerContent).not.toMatch(`import`)
+    expect(sharedWorkerContent).not.toMatch(`export`)
+
+    // chunk
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap-inline/assets/my-worker`
+    )
+    expect(content).toMatch(`new Worker("data:application/javascript;base64`)
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap-inline/assets/possible-ts-output-worker`
+    )
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap-inline/assets/worker-nested-worker`
+    )
+    expect(content).toMatch(
+      `new SharedWorker("/iife-sourcemap-inline/assets/my-shared-worker`
+    )
+
+    // inlined
+    expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
+    expect(content).toMatch(`window.Blob`)
+
+    expect(workerNestedWorkerContent).toMatch(
+      `new Worker("/iife-sourcemap-inline/assets/sub-worker`
+    )
+  })
+} else {
+  // Workaround so that testing serve does not emit
+  // "Your test suite must contain at least one test"
+  test('true', () => {
+    expect(true).toBe(true)
+  })
+}
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}
diff --git a/packages/playground/worker/__tests__/sourcemap-inline/vite.config.js b/packages/playground/worker/__tests__/sourcemap-inline/vite.config.js
new file mode 100644
index 00000000000000..abe37cd56accd6
--- /dev/null
+++ b/packages/playground/worker/__tests__/sourcemap-inline/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-sourcemap')('inline')
diff --git a/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts b/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts
new file mode 100644
index 00000000000000..54e4f1cb9f2d58
--- /dev/null
+++ b/packages/playground/worker/__tests__/sourcemap/sourcemap-worker.spec.ts
@@ -0,0 +1,131 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import { Page } from 'playwright-chromium'
+
+if (isBuild) {
+  const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap/assets')
+  // assert correct files
+  test('sourcemap generation for web workers', async () => {
+    const files = fs.readdirSync(assetsDir)
+    // should have 2 worker chunk
+    expect(files.length).toBe(25)
+    const index = files.find((f) => f.includes('main-module'))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+    const worker = files.find((f) => /^my-worker\.\w+\.js$/.test(f))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+    const sharedWorker = files.find((f) =>
+      /^my-shared-worker\.\w+\.js$/.test(f)
+    )
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+    const possibleTsOutputWorker = files.find((f) =>
+      /^possible-ts-output-worker\.\w+\.js$/.test(f)
+    )
+    const possibleTsOutputWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, possibleTsOutputWorker),
+      'utf-8'
+    )
+    const possibleTsOutputWorkerSourcemap = getSourceMapUrl(
+      possibleTsOutputWorkerContent
+    )
+    const workerNestedWorker = files.find((f) =>
+      /^worker-nested-worker\.\w+\.js$/.test(f)
+    )
+    const workerNestedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, workerNestedWorker),
+      'utf-8'
+    )
+    const workerNestedWorkerSourcemap = getSourceMapUrl(
+      workerNestedWorkerContent
+    )
+    const subWorker = files.find((f) => /^sub-worker\.\w+\.js$/.test(f))
+    const subWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, subWorker),
+      'utf-8'
+    )
+    const subWorkerSourcemap = getSourceMapUrl(subWorkerContent)
+
+    expect(files).toContainEqual(expect.stringMatching(/^index\.\w+\.js\.map$/))
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-shared-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^possible-ts-output-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^worker-nested-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^sub-worker\.\w+\.js\.map$/)
+    )
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toMatch(/^main-module\.\w+\.js\.map$/)
+    expect(workerSourcemap).toMatch(/^my-worker\.\w+\.js\.map$/)
+    expect(sharedWorkerSourcemap).toMatch(/^my-shared-worker\.\w+\.js\.map$/)
+    expect(possibleTsOutputWorkerSourcemap).toMatch(
+      /^possible-ts-output-worker\.\w+\.js\.map$/
+    )
+    expect(workerNestedWorkerSourcemap).toMatch(
+      /^worker-nested-worker\.\w+\.js\.map$/
+    )
+    expect(subWorkerSourcemap).toMatch(/^sub-worker\.\w+\.js\.map$/)
+
+    // worker should have all imports resolved and no exports
+    expect(workerContent).not.toMatch(`import`)
+    expect(workerContent).not.toMatch(`export`)
+
+    // shared worker should have all imports resolved and no exports
+    expect(sharedWorkerContent).not.toMatch(`import`)
+    expect(sharedWorkerContent).not.toMatch(`export`)
+
+    // chunk
+    expect(content).toMatch(`new Worker("/iife-sourcemap/assets/my-worker`)
+    expect(content).toMatch(`new Worker("data:application/javascript;base64`)
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap/assets/possible-ts-output-worker`
+    )
+    expect(content).toMatch(
+      `new Worker("/iife-sourcemap/assets/worker-nested-worker`
+    )
+    expect(content).toMatch(
+      `new SharedWorker("/iife-sourcemap/assets/my-shared-worker`
+    )
+
+    // inlined
+    expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
+    expect(content).toMatch(`window.Blob`)
+
+    expect(workerNestedWorkerContent).toMatch(
+      `new Worker("/iife-sourcemap/assets/sub-worker`
+    )
+  })
+} else {
+  // Workaround so that testing serve does not emit
+  // "Your test suite must contain at least one test"
+  test('true', () => {
+    expect(true).toBe(true)
+  })
+}
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}
diff --git a/packages/playground/worker/__tests__/sourcemap/vite.config.js b/packages/playground/worker/__tests__/sourcemap/vite.config.js
new file mode 100644
index 00000000000000..7d3aeeeb774e18
--- /dev/null
+++ b/packages/playground/worker/__tests__/sourcemap/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-sourcemap')(true)
diff --git a/packages/playground/worker/emit-chunk-nested-worker.js b/packages/playground/worker/emit-chunk-nested-worker.js
index dff0f5bc64c5ad..6cb72b9488cfaf 100644
--- a/packages/playground/worker/emit-chunk-nested-worker.js
+++ b/packages/playground/worker/emit-chunk-nested-worker.js
@@ -1,7 +1,28 @@
 import SubWorker from './emit-chunk-sub-worker?worker'
-
 const subWorker = new SubWorker()
 
 subWorker.onmessage = (event) => {
-  self.postMessage(event.data)
+  self.postMessage({
+    type: 'emit-chunk-sub-worker',
+    data: event.data
+  })
 }
+
+const moduleWorker = new Worker(
+  new URL('./module-and-worker.js', import.meta.url),
+  { type: 'module' }
+)
+
+moduleWorker.onmessage = (event) => {
+  self.postMessage({
+    type: 'module-and-worker:worker',
+    data: event.data
+  })
+}
+
+import('./module-and-worker').then((res) => {
+  self.postMessage({
+    type: 'module-and-worker:module',
+    data: res.module
+  })
+})
diff --git a/packages/playground/worker/emit-chunk-sub-worker.js b/packages/playground/worker/emit-chunk-sub-worker.js
index bd6b1f6e4f7419..5d20becc781dd7 100644
--- a/packages/playground/worker/emit-chunk-sub-worker.js
+++ b/packages/playground/worker/emit-chunk-sub-worker.js
@@ -1,6 +1,8 @@
-Promise.all([import('./modules/module2'), import('./modules/module3')]).then(
-  (data) => {
-    const _data = { ...data[0], ...data[1] }
-    self.postMessage(_data)
-  }
-)
+Promise.all([
+  import('./module-and-worker'),
+  import('./modules/module2'),
+  import('./modules/module3')
+]).then((data) => {
+  const _data = { ...data[0], ...data[1], ...data[2] }
+  self.postMessage(_data)
+})
diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html
index 60289ff84d6a06..602aa3d06bfcac 100644
--- a/packages/playground/worker/index.html
+++ b/packages/playground/worker/index.html
@@ -1,3 +1,8 @@
+<p>worker template error match:</p>
+<code>
+  const worker = new Worker(new URL('./worker.js', import.meta.url))
+</code>
+
 <h2 class="format-iife">format iife:</h2>
 <div>Expected values: <span class="mode-true"></span></div>
 <button class="ping">Ping</button>
@@ -22,13 +27,13 @@ <h2 class="format-iife">format iife:</h2>
 </div>
 
 <p>
-  new Worker(new Url('./url-worker.js', import.meta.url), { type: 'module' })
+  new Worker(new URL('./url-worker.js', import.meta.url), { type: 'module' })
   <span class="classname">.worker-import-meta-url</span>
 </p>
 <code class="worker-import-meta-url"></code>
 
 <p>
-  new SharedWorker(new Url('./url-shared-worker.js', import.meta.url), { type:
+  new SharedWorker(new URL('./url-shared-worker.js', import.meta.url), { type:
   'module' })
   <span class="classname">.shared-worker-import-meta-url</span>
 </p>
@@ -41,13 +46,13 @@ <h2 class="format-iife">format iife:</h2>
 <code class="nested-worker"></code>
 
 <p>
-  new Worker(new Url('./classic-worker.js', import.meta.url))
+  new Worker(new URL('./classic-worker.js', import.meta.url))
   <span class="classname">.classic-worker</span>
 </p>
 <code class="classic-worker"></code>
 
 <p>
-  new SharedWorker(new Url('./classic-shared-worker.js', import.meta.url), {
+  new SharedWorker(new URL('./classic-shared-worker.js', import.meta.url), {
   type: 'classic' })
   <span class="classname">.classic-shared-worker</span>
 </p>
@@ -57,7 +62,9 @@ <h2 class="format-iife">format iife:</h2>
 <h2 class="format-es"></h2>
 
 <p>
-  worker emit chunk
+  worker emit chunk <br />
+  module and worker:worker in worker file <br />
+  module and worker:module in worker file <br />
   <span class="classname">.emti-chunk-worker</span>
 </p>
 <code class="emti-chunk-worker"></code>
@@ -68,6 +75,12 @@ <h2 class="format-es"></h2>
 </p>
 <code class="emti-chunk-dynamic-import-worker"></code>
 
+<p>
+  module and worker:worker in simple file
+  <span class="classname">.module-and-worker-worker</span>
+</p>
+<code class="module-and-worker-worker"></code>
+
 <style>
   p {
     background: rgba(0, 0, 0, 0.1);
diff --git a/packages/playground/worker/module-and-worker.js b/packages/playground/worker/module-and-worker.js
new file mode 100644
index 00000000000000..659e556f08e4a6
--- /dev/null
+++ b/packages/playground/worker/module-and-worker.js
@@ -0,0 +1,5 @@
+import constant from './modules/module'
+
+self.postMessage(constant)
+
+export const module = 'module and worker'
diff --git a/packages/playground/worker/package.json b/packages/playground/worker/package.json
index 54b737ca2d9cc4..ba4e7fe87e4a98 100644
--- a/packages/playground/worker/package.json
+++ b/packages/playground/worker/package.json
@@ -9,6 +9,15 @@
     "dev:es": "vite --config ./vite.config-es.js dev",
     "build:es": "vite --config ./vite.config-es.js build",
     "preview:es": "vite --config ./vite.config-es.js preview",
+    "dev:sourcemap": "cross-env WORKER_MODE=sourcemap vite --config ./vite.config-sourcemap.js dev",
+    "build:sourcemap": "cross-env WORKER_MODE=sourcemap vite --config ./vite.config-sourcemap.js build",
+    "preview:sourcemap": "cross-env WORKER_MODE=sourcemap vite --config ./vite.config-sourcemap.js preview",
+    "dev:sourcemap-hidden": "cross-env WORKER_MODE=hidden vite --config ./vite.config-sourcemap.js dev",
+    "build:sourcemap-hidden": "cross-env WORKER_MODE=hidden vite --config ./vite.config-sourcemap.js build",
+    "preview:sourcemap-hidden": "cross-env WORKER_MODE=hidden vite --config ./vite.config-sourcemap.js preview",
+    "dev:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js dev",
+    "build:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js build",
+    "preview:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js preview",
     "debug": "node --inspect-brk ../../vite/bin/vite"
   },
   "devDependencies": {
diff --git a/packages/playground/worker/sub-worker.js b/packages/playground/worker/sub-worker.js
index eec65b86a0382a..eff49dfbb46ba6 100644
--- a/packages/playground/worker/sub-worker.js
+++ b/packages/playground/worker/sub-worker.js
@@ -1,5 +1,5 @@
 self.onmessage = (event) => {
   if (event.data === 'ping') {
-    self.postMessage('pong')
+    self.postMessage(`pong ${import.meta.url}`)
   }
 }
diff --git a/packages/playground/worker/url-worker.js b/packages/playground/worker/url-worker.js
index 79d05da0f06082..c25cbefdff89ec 100644
--- a/packages/playground/worker/url-worker.js
+++ b/packages/playground/worker/url-worker.js
@@ -1 +1 @@
-self.postMessage('A string' + import.meta.env.BASE_URL)
+self.postMessage('A string' + import.meta.env.BASE_URL + import.meta.url)
diff --git a/packages/playground/worker/vite.config-sourcemap.js b/packages/playground/worker/vite.config-sourcemap.js
new file mode 100644
index 00000000000000..ea1c66a33a44d7
--- /dev/null
+++ b/packages/playground/worker/vite.config-sourcemap.js
@@ -0,0 +1,24 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+
+module.exports = vite.defineConfig((sourcemap) => {
+  sourcemap = process.env.WORKER_MODE || sourcemap
+  if (sourcemap === 'sourcemap') {
+    sourcemap = true
+  }
+  return {
+    base: `/iife-${
+      typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap
+    }/`,
+    worker: {
+      format: 'iife',
+      plugins: [vueJsx()]
+    },
+    build: {
+      outDir: `dist/iife-${
+        typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap
+      }/`,
+      sourcemap: sourcemap
+    }
+  }
+})
diff --git a/packages/playground/worker/worker/main-format-es.js b/packages/playground/worker/worker/main-format-es.js
index aa16636c34c73a..801c13469151a3 100644
--- a/packages/playground/worker/worker/main-format-es.js
+++ b/packages/playground/worker/worker/main-format-es.js
@@ -8,8 +8,17 @@ function text(el, text) {
 text('.format-es', 'format es:')
 
 const nestedWorker = new NestedWorker()
+const dataList = []
 nestedWorker.addEventListener('message', (ev) => {
-  text('.emti-chunk-worker', JSON.stringify(ev.data))
+  dataList.push(ev.data)
+  text(
+    '.emti-chunk-worker',
+    JSON.stringify(
+      dataList.sort(
+        (a, b) => JSON.stringify(a).length - JSON.stringify(b).length
+      )
+    )
+  )
 })
 
 const dynamicImportWorker = new Worker(
@@ -21,3 +30,12 @@ const dynamicImportWorker = new Worker(
 dynamicImportWorker.addEventListener('message', (ev) => {
   text('.emti-chunk-dynamic-import-worker', JSON.stringify(ev.data))
 })
+
+const moduleWorker = new Worker(
+  new URL('../module-and-worker.js', import.meta.url),
+  { type: 'module' }
+)
+
+moduleWorker.addEventListener('message', (ev) => {
+  text('.module-and-worker-worker', JSON.stringify(ev.data))
+})
diff --git a/packages/playground/worker/worker/main-module.js b/packages/playground/worker/worker/main-module.js
index b66c7299cdf690..417cf1728c4b09 100644
--- a/packages/playground/worker/worker/main-module.js
+++ b/packages/playground/worker/worker/main-module.js
@@ -28,6 +28,7 @@ inlineWorker.addEventListener('message', (e) => {
 })
 
 document.querySelector('.ping-inline').addEventListener('click', () => {
+  console.log('111')
   inlineWorker.postMessage('ping')
 })
 
diff --git a/packages/plugin-legacy/CHANGELOG.md b/packages/plugin-legacy/CHANGELOG.md
index e92ca1e12357fe..ced87d2efd665c 100644
--- a/packages/plugin-legacy/CHANGELOG.md
+++ b/packages/plugin-legacy/CHANGELOG.md
@@ -1,3 +1,17 @@
+## 1.8.0 (2022-03-30)
+
+* fix(deps): update all non-major dependencies (#6782) ([e38be3e](https://github.com/vitejs/vite/commit/e38be3e)), closes [#6782](https://github.com/vitejs/vite/issues/6782)
+* fix(deps): update all non-major dependencies (#7392) ([b63fc3b](https://github.com/vitejs/vite/commit/b63fc3b)), closes [#7392](https://github.com/vitejs/vite/issues/7392)
+* fix(plugin-legacy): always fallback legacy build when CSP (#6535) ([a118a1d](https://github.com/vitejs/vite/commit/a118a1d)), closes [#6535](https://github.com/vitejs/vite/issues/6535)
+* fix(plugin-legacy): polyfill latest features (#7514) ([cb388e2](https://github.com/vitejs/vite/commit/cb388e2)), closes [#7514](https://github.com/vitejs/vite/issues/7514)
+* fix(plugin-legacy): require Vite 2.8.0 (#6272) (#6869) ([997b8f1](https://github.com/vitejs/vite/commit/997b8f1)), closes [#6272](https://github.com/vitejs/vite/issues/6272) [#6869](https://github.com/vitejs/vite/issues/6869)
+* chore(deps): update all non-major dependencies (#6905) ([839665c](https://github.com/vitejs/vite/commit/839665c)), closes [#6905](https://github.com/vitejs/vite/issues/6905)
+* docs(vite-legacy): Note about using `regenerator-runtime` in Content Security Policy environment (#7 ([0fd6422](https://github.com/vitejs/vite/commit/0fd6422)), closes [#7234](https://github.com/vitejs/vite/issues/7234)
+* workflow: separate version bumping and publishing on release (#6879) ([fe8ef39](https://github.com/vitejs/vite/commit/fe8ef39)), closes [#6879](https://github.com/vitejs/vite/issues/6879)
+* release: plugin-legacy@1.7.1 ([19a58dd](https://github.com/vitejs/vite/commit/19a58dd))
+
+
+
 ## [1.7.1](https://github.com/vitejs/vite/compare/plugin-legacy@1.7.0...plugin-legacy@1.7.1) (2022-02-11)
 
 ### Bug Fixes
diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md
index ec7e630c87755a..36da971c6a17c2 100644
--- a/packages/plugin-legacy/README.md
+++ b/packages/plugin-legacy/README.md
@@ -1,8 +1,6 @@
 # @vitejs/plugin-legacy [![npm](https://img.shields.io/npm/v/@vitejs/plugin-legacy.svg)](https://npmjs.com/package/@vitejs/plugin-legacy)
 
-**Note: this plugin requires `vite@^2.0.0`**.
-
-Vite's default browser support baseline is [Native ESM](https://caniuse.com/es6-module). This plugin provides support for legacy browsers that do not support native ESM.
+Vite's default browser support baseline is [Native ESM](https://caniuse.com/es6-module). This plugin provides support for legacy browsers that do not support native ESM when building for production.
 
 By default, this plugin will:
 
diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js
index 626b48f85ea955..41f7157ebfc533 100644
--- a/packages/plugin-legacy/index.js
+++ b/packages/plugin-legacy/index.js
@@ -330,7 +330,10 @@ function viteLegacyPlugin(options = {}) {
               loose: false,
               useBuiltIns: needPolyfills ? 'usage' : false,
               corejs: needPolyfills
-                ? { version: 3, proposals: false }
+                ? {
+                    version: require('core-js/package.json').version,
+                    proposals: false
+                  }
                 : undefined,
               shippedProposals: true,
               ignoreBrowserslistConfig: options.ignoreBrowserslistConfig
diff --git a/packages/plugin-legacy/package.json b/packages/plugin-legacy/package.json
index 6f3e44cc3e9fdd..eb974d790f1e71 100644
--- a/packages/plugin-legacy/package.json
+++ b/packages/plugin-legacy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-legacy",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "license": "MIT",
   "author": "Evan You",
   "files": [
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#readme",
   "dependencies": {
-    "@babel/standalone": "^7.17.8",
+    "@babel/standalone": "^7.17.9",
     "core-js": "^3.21.1",
     "magic-string": "^0.26.1",
     "regenerator-runtime": "^0.13.9",
diff --git a/packages/plugin-react/CHANGELOG.md b/packages/plugin-react/CHANGELOG.md
index b1d1b8bddba63e..c05c0989d6beb4 100644
--- a/packages/plugin-react/CHANGELOG.md
+++ b/packages/plugin-react/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 1.3.0 (2022-03-30)
+
+* feat(plugin-react): adding jsxPure option (#7088) ([d451435](https://github.com/vitejs/vite/commit/d451435)), closes [#7088](https://github.com/vitejs/vite/issues/7088)
+* fix(deps): update all non-major dependencies (#6782) ([e38be3e](https://github.com/vitejs/vite/commit/e38be3e)), closes [#6782](https://github.com/vitejs/vite/issues/6782)
+* fix(deps): update all non-major dependencies (#7392) ([b63fc3b](https://github.com/vitejs/vite/commit/b63fc3b)), closes [#7392](https://github.com/vitejs/vite/issues/7392)
+* chore: fix publish, build vite before plugin-react and plugin-vue (#6988) ([620a9bd](https://github.com/vitejs/vite/commit/620a9bd)), closes [#6988](https://github.com/vitejs/vite/issues/6988)
+* chore(deps): update all non-major dependencies (#6905) ([839665c](https://github.com/vitejs/vite/commit/839665c)), closes [#6905](https://github.com/vitejs/vite/issues/6905)
+* workflow: separate version bumping and publishing on release (#6879) ([fe8ef39](https://github.com/vitejs/vite/commit/fe8ef39)), closes [#6879](https://github.com/vitejs/vite/issues/6879)
+
+
+
 # [1.2.0](https://github.com/vitejs/vite/compare/plugin-react@1.1.4...plugin-react@1.2.0) (2022-02-09)
 
 
diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md
index 588f947ec8b08c..e8d27d0e57242b 100644
--- a/packages/plugin-react/README.md
+++ b/packages/plugin-react/README.md
@@ -75,7 +75,7 @@ react({
 })
 ```
 
-This option does not enable _code transformation_. That is handled by ESBuild.
+This option does not enable _code transformation_. That is handled by esbuild.
 
 **Note:** TypeScript syntax is handled automatically.
 
diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json
index f182a7f5a2fb10..e7fc9544120b11 100644
--- a/packages/plugin-react/package.json
+++ b/packages/plugin-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -33,13 +33,13 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/plugin-transform-react-jsx-development": "^7.16.7",
     "@babel/plugin-transform-react-jsx-self": "^7.16.7",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
     "@rollup/pluginutils": "^4.2.0",
-    "react-refresh": "^0.11.0",
+    "react-refresh": "^0.12.0",
     "resolve": "^1.22.0"
   }
 }
diff --git a/packages/plugin-react/src/fast-refresh.ts b/packages/plugin-react/src/fast-refresh.ts
index 70562bbbdfc5b7..4672e26f6264e3 100644
--- a/packages/plugin-react/src/fast-refresh.ts
+++ b/packages/plugin-react/src/fast-refresh.ts
@@ -1,10 +1,15 @@
 import type { types as t } from '@babel/core'
 import fs from 'fs'
+import path from 'path'
 
 export const runtimePublicPath = '/@react-refresh'
 
-const runtimeFilePath = require.resolve(
-  'react-refresh/cjs/react-refresh-runtime.development.js'
+const reactRefreshDir = path.dirname(
+  require.resolve('react-refresh/package.json')
+)
+const runtimeFilePath = path.join(
+  reactRefreshDir,
+  'cjs/react-refresh-runtime.development.js'
 )
 
 export const runtimeCode = `
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index 76f6c6c2a799f3..cefab59d94fe53 100644
--- a/packages/plugin-react/src/index.ts
+++ b/packages/plugin-react/src/index.ts
@@ -176,7 +176,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           if (isReactModule && filter(id)) {
             useFastRefresh = true
             plugins.push([
-              await loadPlugin('react-refresh/babel.js'),
+              await loadPlugin('react-refresh/babel'),
               { skipEnvCheck: true }
             ])
           }
diff --git a/packages/plugin-vue-jsx/CHANGELOG.md b/packages/plugin-vue-jsx/CHANGELOG.md
index 43632e9a88ade8..3a1b9e681b45ea 100644
--- a/packages/plugin-vue-jsx/CHANGELOG.md
+++ b/packages/plugin-vue-jsx/CHANGELOG.md
@@ -1,3 +1,10 @@
+## <small>1.3.9 (2022-03-30)</small>
+
+* fix(deps): update all non-major dependencies (#7392) ([b63fc3b](https://github.com/vitejs/vite/commit/b63fc3b)), closes [#7392](https://github.com/vitejs/vite/issues/7392)
+* chore(deps): update all non-major dependencies (#6905) ([839665c](https://github.com/vitejs/vite/commit/839665c)), closes [#6905](https://github.com/vitejs/vite/issues/6905)
+
+
+
 ## [1.3.8](https://github.com/vitejs/vite/compare/plugin-vue@2.2.4...plugin-vue@1.3.8) (2022-02-28)
 
 
diff --git a/packages/plugin-vue-jsx/package.json b/packages/plugin-vue-jsx/package.json
index ed807955ed0c87..d8057b91f8ab24 100644
--- a/packages/plugin-vue-jsx/package.json
+++ b/packages/plugin-vue-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue-jsx",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "license": "MIT",
   "author": "Evan You",
   "files": [
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx#readme",
   "dependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-transform-typescript": "^7.16.8",
     "@rollup/pluginutils": "^4.2.0",
diff --git a/packages/plugin-vue/CHANGELOG.md b/packages/plugin-vue/CHANGELOG.md
index c4b3f8e1a1ddb0..135daffbfaaa67 100644
--- a/packages/plugin-vue/CHANGELOG.md
+++ b/packages/plugin-vue/CHANGELOG.md
@@ -1,3 +1,17 @@
+## <small>2.3.1 (2022-03-30)</small>
+
+* chore(plugin-vue): revert #7527, lower vite peer dep ([447bbeb](https://github.com/vitejs/vite/commit/447bbeb)), closes [#7527](https://github.com/vitejs/vite/issues/7527)
+
+
+
+## 2.3.0 (2022-03-30)
+
+* chore(plugin-vue): bump vite peer dep to 2.9.0 (#7472) ([12fd1d9](https://github.com/vitejs/vite/commit/12fd1d9)), closes [#7472](https://github.com/vitejs/vite/issues/7472)
+* feat(css): css.devSourcemap option (#7471) ([57f14cb](https://github.com/vitejs/vite/commit/57f14cb)), closes [#7471](https://github.com/vitejs/vite/issues/7471)
+* fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting (#4984) ([90e812a](https://github.com/vitejs/vite/commit/90e812a)), closes [#4984](https://github.com/vitejs/vite/issues/4984)
+
+
+
 ## 2.3.0-beta.0 (2022-03-22)
 
 * fix(deps): update all non-major dependencies (#7392) ([b63fc3b](https://github.com/vitejs/vite/commit/b63fc3b)), closes [#7392](https://github.com/vitejs/vite/issues/7392)
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
index bf4749ac8ee428..39b3bc87a8b1df 100644
--- a/packages/plugin-vue/package.json
+++ b/packages/plugin-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "2.3.0-beta.0",
+  "version": "2.3.1",
   "license": "MIT",
   "author": "Evan You",
   "files": [
diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index b79c75db3260f0..0f91a004602caa 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,76 +1,112 @@
-## 2.9.0-beta.9 (2022-03-26)
+## <small>2.9.1 (2022-03-31)</small>
 
-* feat: support importing css with ?raw (#5796) ([fedb106](https://github.com/vitejs/vite/commit/fedb106)), closes [#5796](https://github.com/vitejs/vite/issues/5796)
-* feat(css): css.devSourcemap option (#7471) ([57f14cb](https://github.com/vitejs/vite/commit/57f14cb)), closes [#7471](https://github.com/vitejs/vite/issues/7471)
-* feat(dev): expose APIs for client-server communication (#7437) ([e29ea8e](https://github.com/vitejs/vite/commit/e29ea8e)), closes [#7437](https://github.com/vitejs/vite/issues/7437)
-* fix: errors in worker handling (#7236) ([77dc1a1](https://github.com/vitejs/vite/commit/77dc1a1)), closes [#7236](https://github.com/vitejs/vite/issues/7236)
+* fix: allow port 0 to be provided to server (#7530) ([173e4c9](https://github.com/vitejs/vite/commit/173e4c9)), closes [#7530](https://github.com/vitejs/vite/issues/7530)
+* fix: brotli let for reassignment (#7544) ([d0253d7](https://github.com/vitejs/vite/commit/d0253d7)), closes [#7544](https://github.com/vitejs/vite/issues/7544)
+* fix: dynamic import warning with @vite-ignore (#7533) ([29c1ec0](https://github.com/vitejs/vite/commit/29c1ec0)), closes [#7533](https://github.com/vitejs/vite/issues/7533)
+* fix: remove unneeded skipping optimization log (#7531) ([41fa2f5](https://github.com/vitejs/vite/commit/41fa2f5)), closes [#7531](https://github.com/vitejs/vite/issues/7531)
+* docs(changelog): fix raw glob imports syntax (#7540) ([87fbe13](https://github.com/vitejs/vite/commit/87fbe13)), closes [#7540](https://github.com/vitejs/vite/issues/7540)
+* chore: 2.9 release notes (#7525) ([4324f48](https://github.com/vitejs/vite/commit/4324f48)), closes [#7525](https://github.com/vitejs/vite/issues/7525)
 
 
 
-## 2.9.0-beta.8 (2022-03-24)
+# [2.9.0](https://github.com/vitejs/vite/compare/v2.8.6...v2.9.0) (2022-03-30)
 
-* fix: consider undefined port when checking port (#7318) ([c7fc7c3](https://github.com/vitejs/vite/commit/c7fc7c3)), closes [#7318](https://github.com/vitejs/vite/issues/7318)
-* fix: inline style css sourcemap (#7434) ([47668b5](https://github.com/vitejs/vite/commit/47668b5)), closes [#7434](https://github.com/vitejs/vite/issues/7434)
-* fix: sourcemap missing source files warning with cached vue (#7442) ([a2ce20d](https://github.com/vitejs/vite/commit/a2ce20d)), closes [#7442](https://github.com/vitejs/vite/issues/7442)
-* fix: update tsconfck to 1.2.1 (#7424) ([a90b03b](https://github.com/vitejs/vite/commit/a90b03b)), closes [#7424](https://github.com/vitejs/vite/issues/7424)
-* fix: virtual html sourcemap warning (#7440) ([476786b](https://github.com/vitejs/vite/commit/476786b)), closes [#7440](https://github.com/vitejs/vite/issues/7440)
-* fix(less): empty less file error (#7412) ([0535c70](https://github.com/vitejs/vite/commit/0535c70)), closes [#7412](https://github.com/vitejs/vite/issues/7412)
-* fix(resolve): skip `module` field when the importer is a `require` call (#7438) ([fe4c1ed](https://github.com/vitejs/vite/commit/fe4c1ed)), closes [#7438](https://github.com/vitejs/vite/issues/7438)
-* feat: hide optimized deps found during scan phase logs (#7419) ([f4934e8](https://github.com/vitejs/vite/commit/f4934e8)), closes [#7419](https://github.com/vitejs/vite/issues/7419)
+### Faster Cold Start
 
+Before 2.9, the first time dev was run on a project Vite needed to perform a scan phase to discover dependencies and then pre-bundle them before starting the server. In 2.9 both scanning [#7379](https://github.com/vitejs/vite/issues/7379) and pre-bundling [#6758](https://github.com/vitejs/vite/issues/6758) of dependencies are now non-blocking, so the server starts right away during cold start. We also now allow requests to flow through the pipeline improving initial cold start load speed and increasing the chances of discovering new missing dependencies when re-processing and letting Vite populate the module graph and the browser to process files. In many cases, there is also no need to full-reload the page when new dependencies are discovered.
 
+### CSS Sourcemap support during dev (experimental)
 
-## 2.9.0-beta.7 (2022-03-23)
+Vite now supports CSS sourcemaps [#7173](https://github.com/vitejs/vite/issues/7173). This feature is still experimental, and it is disabled by default to avoid incurring a performance penalty for users that don't need it. To enable it, set [css.devSourcemap](https://vitejs.dev/config/#css-devsourcemap) to `true`.
 
-* feat: non-blocking scanning of dependencies (#7379) ([676f545](https://github.com/vitejs/vite/commit/676f545)), closes [#7379](https://github.com/vitejs/vite/issues/7379)
+### Avoid splitting vendor chunks by default
 
+Vite's default chunking strategy was a good fit for most SPAs, but it wasn't ideal in some other use cases. Vite doesn't have enough context to make the best decision here, so in Vite 2.9 the previous chunking strategy is now [opt-in](https://vitejs.dev/guide/build.html#chunking-strategy) [#6534](https://github.com/vitejs/vite/issues/6534) and Vite will no longer split vendor libs in a separate chunk.
 
+### Web Workers enhancements
 
-## 2.9.0-beta.6 (2022-03-22)
+Web Workers now supports source map generation (see [#5417](https://github.com/vitejs/vite/issues/5417)). The implementation is also now more robust, fixing several issues encountered in previous versions ([#6599](https://github.com/vitejs/vite/issues/6599)).
 
+### Raw Glob Imports
 
+Glob imports support for the `raw` modifier syntax has changed to using `{ as: 'raw' }`, which works in the same way as the `?raw` suffix in regular imports:
 
+```js
+const examples = import.meta.globEager('./examples/*.html', { as: 'raw' })
+```
 
-## 2.9.0-beta.5 (2022-03-22)
+The `{ assert: { type: 'raw' }}` syntax introduced in v2.8 has been deprecated. See [#7017](https://github.com/vitejs/vite/issues/7017) for more information.
 
-* fix: avoid mangling code from incorrect magic-string usage (#7397) ([68d76c9](https://github.com/vitejs/vite/commit/68d76c9)), closes [#7397](https://github.com/vitejs/vite/issues/7397)
-* fix(config): server restart on config dependencies changed on windows (#7366) ([c43467a](https://github.com/vitejs/vite/commit/c43467a)), closes [#7366](https://github.com/vitejs/vite/issues/7366)
-* fix(deps): update all non-major dependencies (#7392) ([b63fc3b](https://github.com/vitejs/vite/commit/b63fc3b)), closes [#7392](https://github.com/vitejs/vite/issues/7392)
-* feat: css sourcemap support during dev (#7173) ([38a655f](https://github.com/vitejs/vite/commit/38a655f)), closes [#7173](https://github.com/vitejs/vite/issues/7173)
+### `envDir` changes
 
+The `envDir` now correctly loads `.env` files in the specified directory only (defaults to `root`). Previously, it would load files above the directory, which imposed security issues. If you had relied on the previous behaviour, make sure you move your `.env` files to the correct directory, or configure the `envDir` option.
 
+### New tools for Plugin and Framework Authors
 
-## 2.9.0-beta.4 (2022-03-19)
+#### Client Server Communication API
 
-* fix: add version to optimized chunks, fix #7323 (#7350) ([1be1db6](https://github.com/vitejs/vite/commit/1be1db6)), closes [#7323](https://github.com/vitejs/vite/issues/7323) [#7350](https://github.com/vitejs/vite/issues/7350)
-* fix: browser cache of newly discovered deps (#7378) ([392a0de](https://github.com/vitejs/vite/commit/392a0de)), closes [#7378](https://github.com/vitejs/vite/issues/7378)
-* fix: do not warn (about not being able to bundle non module scripts) when src is an external url (#7 ([0646fe8](https://github.com/vitejs/vite/commit/0646fe8)), closes [#7380](https://github.com/vitejs/vite/issues/7380)
-* fix: overwrite deps info browserHash only on commit (#7359) ([1e9615d](https://github.com/vitejs/vite/commit/1e9615d)), closes [#7359](https://github.com/vitejs/vite/issues/7359)
-* chore: fix typo in comment (#7370) ([e682863](https://github.com/vitejs/vite/commit/e682863)), closes [#7370](https://github.com/vitejs/vite/issues/7370)
-* chore: update es-module-lexer (#7357) ([fde0f3c](https://github.com/vitejs/vite/commit/fde0f3c)), closes [#7357](https://github.com/vitejs/vite/issues/7357)
-* chore(deps): update all non-major dependencies (#6905) ([839665c](https://github.com/vitejs/vite/commit/839665c)), closes [#6905](https://github.com/vitejs/vite/issues/6905)
+Vite now provides utilities for plugins to help handle the communication with clients connected to Vite's server [#7437](https://github.com/vitejs/vite/issues/7437). Reusing the open WebSocket connection between the server and clients several use cases can be simplified ([vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect), [SliDev](https://sli.dev), and many others). Check out the [Client Server Communication docs](https://vitejs.dev/guide/api-plugin.html#client-server-communication) for more information.
 
+```js
+// Send a message from the client to the server
+if (import.meta.hot) {
+  import.meta.hot.send('my:from-client', { msg: 'Hey!' })
+}
+```
 
+```js
+// And listen to client messages in a plugin
+  configureServer(server) {
+    server.ws.on('my:from-client', (data, client) => {
+      console.log('Message from client:', data.msg) // Hey!
+      // ...
+    })
+  }
+```
 
-## 2.9.0-beta.3 (2022-03-16)
+#### `importedCss` and `importedAssets` to RenderedChunk type
 
-* fix: delayed full page reload (#7347) ([fa0820a](https://github.com/vitejs/vite/commit/fa0820a)), closes [#7347](https://github.com/vitejs/vite/issues/7347)
-* fix: early discovery of missing deps, fix #7333 (#7346) ([7d2f37c](https://github.com/vitejs/vite/commit/7d2f37c)), closes [#7333](https://github.com/vitejs/vite/issues/7333) [#7346](https://github.com/vitejs/vite/issues/7346)
-* fix: unhandled exception on eager transformRequest (#7345) ([c3260a4](https://github.com/vitejs/vite/commit/c3260a4)), closes [#7345](https://github.com/vitejs/vite/issues/7345)
-* fix: update to esbuild 0.14.27, fix #6994 (#7320) ([65aaeee](https://github.com/vitejs/vite/commit/65aaeee)), closes [#6994](https://github.com/vitejs/vite/issues/6994) [#7320](https://github.com/vitejs/vite/issues/7320)
-* chore: comment typo (#7344) ([61df324](https://github.com/vitejs/vite/commit/61df324)), closes [#7344](https://github.com/vitejs/vite/issues/7344)
+Replace the internal `chunkToEmittedCssFileMap` and `chunkToEmittedAssetsMap` variables with public properties added by Vite to `RenderedChunk` objects in the `renderChunk` phase. These is useful for Vite-based frameworks that generate their own HTML. See [#6629](https://github.com/vitejs/vite/issues/6629).
+
+#### Optimize Custom Extensions (experimental)
 
+A new `optimizeDeps.extensions: string[]` option is available to enable pre-bundling of custom extensions. A respective esbuild plugin is required to handle that extension. e.g. `['.svelte', '.svelte.md']`. See [#6801](https://github.com/vitejs/vite/issues/6801) for more information.
 
 
-## 2.9.0-beta.2 (2022-03-14)
+### Bug Fixes
 
+* fix: build path error on Windows (#7383) ([e3c7c7a](https://github.com/vitejs/vite/commit/e3c7c7a)), closes [#7383](https://github.com/vitejs/vite/issues/7383)
+* fix: import url worker two times (#7468) ([f05a813](https://github.com/vitejs/vite/commit/f05a813)), closes [#7468](https://github.com/vitejs/vite/issues/7468)
+* fix: import with query with exports/browser field (#7098) ([9ce6732](https://github.com/vitejs/vite/commit/9ce6732)), closes [#7098](https://github.com/vitejs/vite/issues/7098)
+* fix: make @fs URLs work with special characters (#7510) ([2b7dad1](https://github.com/vitejs/vite/commit/2b7dad1)), closes [#7510](https://github.com/vitejs/vite/issues/7510)
+* fix: tailwind css sourcemap warning (#7480) ([90df0bb](https://github.com/vitejs/vite/commit/90df0bb)), closes [#7480](https://github.com/vitejs/vite/issues/7480)
+* fix: worker match only run in js (#7500) ([9481c7d](https://github.com/vitejs/vite/commit/9481c7d)), closes [#7500](https://github.com/vitejs/vite/issues/7500)
+* fix: Correctly process urls when they are rewritten to contain space (#7452) ([9ee2cf6](https://github.com/vitejs/vite/commit/9ee2cf6)), closes [#7452](https://github.com/vitejs/vite/issues/7452)
+* fix: custom event payload type (#7498) ([28b0660](https://github.com/vitejs/vite/commit/28b0660)), closes [#7498](https://github.com/vitejs/vite/issues/7498)
+* fix: handle relative path glob raw import, fix #7307 (#7371) ([7f8dc58](https://github.com/vitejs/vite/commit/7f8dc58)), closes [#7307](https://github.com/vitejs/vite/issues/7307) [#7371](https://github.com/vitejs/vite/issues/7371)
+* fix: import.meta.url in worker (#7464) ([8ac4b12](https://github.com/vitejs/vite/commit/8ac4b12)), closes [#7464](https://github.com/vitejs/vite/issues/7464)
+* fix: optimizeDeps.entries default ignore paths (#7469) ([4c95e99](https://github.com/vitejs/vite/commit/4c95e99)), closes [#7469](https://github.com/vitejs/vite/issues/7469)
+* fix: errors in worker handling (#7236) ([77dc1a1](https://github.com/vitejs/vite/commit/77dc1a1)), closes [#7236](https://github.com/vitejs/vite/issues/7236)
+* fix: consider undefined port when checking port (#7318) ([c7fc7c3](https://github.com/vitejs/vite/commit/c7fc7c3)), closes [#7318](https://github.com/vitejs/vite/issues/7318)
+* fix: inline style css sourcemap (#7434) ([47668b5](https://github.com/vitejs/vite/commit/47668b5)), closes [#7434](https://github.com/vitejs/vite/issues/7434)
+* fix: sourcemap missing source files warning with cached vue (#7442) ([a2ce20d](https://github.com/vitejs/vite/commit/a2ce20d)), closes [#7442](https://github.com/vitejs/vite/issues/7442)
+* fix: update tsconfck to 1.2.1 (#7424) ([a90b03b](https://github.com/vitejs/vite/commit/a90b03b)), closes [#7424](https://github.com/vitejs/vite/issues/7424)
+* fix: virtual html sourcemap warning (#7440) ([476786b](https://github.com/vitejs/vite/commit/476786b)), closes [#7440](https://github.com/vitejs/vite/issues/7440)
+* fix(less): empty less file error (#7412) ([0535c70](https://github.com/vitejs/vite/commit/0535c70)), closes [#7412](https://github.com/vitejs/vite/issues/7412)
+* fix(resolve): skip `module` field when the importer is a `require` call (#7438) ([fe4c1ed](https://github.com/vitejs/vite/commit/fe4c1ed)), closes [#7438](https://github.com/vitejs/vite/issues/7438)
+* fix: avoid mangling code from incorrect magic-string usage (#7397) ([68d76c9](https://github.com/vitejs/vite/commit/68d76c9)), closes [#7397](https://github.com/vitejs/vite/issues/7397)
+* fix(config): server restart on config dependencies changed on windows (#7366) ([c43467a](https://github.com/vitejs/vite/commit/c43467a)), closes [#7366](https://github.com/vitejs/vite/issues/7366)
+* fix(deps): update all non-major dependencies (#7392) ([b63fc3b](https://github.com/vitejs/vite/commit/b63fc3b)), closes [#7392](https://github.com/vitejs/vite/issues/7392)
+* fix: add version to optimized chunks, fix #7323 (#7350) ([1be1db6](https://github.com/vitejs/vite/commit/1be1db6)), closes [#7323](https://github.com/vitejs/vite/issues/7323) [#7350](https://github.com/vitejs/vite/issues/7350)
+* fix: browser cache of newly discovered deps (#7378) ([392a0de](https://github.com/vitejs/vite/commit/392a0de)), closes [#7378](https://github.com/vitejs/vite/issues/7378)
+* fix: do not warn (about not being able to bundle non module scripts) when src is an external url (#7 ([0646fe8](https://github.com/vitejs/vite/commit/0646fe8)), closes [#7380](https://github.com/vitejs/vite/issues/7380)
+* fix: overwrite deps info browserHash only on commit (#7359) ([1e9615d](https://github.com/vitejs/vite/commit/1e9615d)), closes [#7359](https://github.com/vitejs/vite/issues/7359)
+* fix: delayed full page reload (#7347) ([fa0820a](https://github.com/vitejs/vite/commit/fa0820a)), closes [#7347](https://github.com/vitejs/vite/issues/7347)
+* fix: early discovery of missing deps, fix #7333 (#7346) ([7d2f37c](https://github.com/vitejs/vite/commit/7d2f37c)), closes [#7333](https://github.com/vitejs/vite/issues/7333) [#7346](https://github.com/vitejs/vite/issues/7346)
+* fix: unhandled exception on eager transformRequest (#7345) ([c3260a4](https://github.com/vitejs/vite/commit/c3260a4)), closes [#7345](https://github.com/vitejs/vite/issues/7345)
+* fix: update to esbuild 0.14.27, fix #6994 (#7320) ([65aaeee](https://github.com/vitejs/vite/commit/65aaeee)), closes [#6994](https://github.com/vitejs/vite/issues/6994) [#7320](https://github.com/vitejs/vite/issues/7320)
 * fix: `ssrExternal` should not skip nested dependencies (#7154) ([f8f934a](https://github.com/vitejs/vite/commit/f8f934a)), closes [#7154](https://github.com/vitejs/vite/issues/7154)
 * fix: dep with dynamic import wrong error log (#7313) ([769f535](https://github.com/vitejs/vite/commit/769f535)), closes [#7313](https://github.com/vitejs/vite/issues/7313)
-
-
-
-## 2.9.0-beta.1 (2022-03-14)
-
 * fix: avoid caching transform result of invalidated module (#7254) ([2d7ba72](https://github.com/vitejs/vite/commit/2d7ba72)), closes [#7254](https://github.com/vitejs/vite/issues/7254)
 * fix: dont replace define in json (#7294) ([fc5c937](https://github.com/vitejs/vite/commit/fc5c937)), closes [#7294](https://github.com/vitejs/vite/issues/7294)
 * fix: main browserHash after stable optimization rerun (#7284) ([98eefa8](https://github.com/vitejs/vite/commit/98eefa8)), closes [#7284](https://github.com/vitejs/vite/issues/7284)
@@ -81,15 +117,6 @@
 * fix: use relative paths in _metadata.json (#7299) ([8b945f5](https://github.com/vitejs/vite/commit/8b945f5)), closes [#7299](https://github.com/vitejs/vite/issues/7299)
 * fix(asset): allow non-existent url (#7306) ([6bc45a2](https://github.com/vitejs/vite/commit/6bc45a2)), closes [#7306](https://github.com/vitejs/vite/issues/7306)
 * fix(hmr): hmr style tag no support in html (#7262) ([fae120a](https://github.com/vitejs/vite/commit/fae120a)), closes [#7262](https://github.com/vitejs/vite/issues/7262)
-* chore: clarify writableEnded guard comment (#7256) ([dddda1e](https://github.com/vitejs/vite/commit/dddda1e)), closes [#7256](https://github.com/vitejs/vite/issues/7256)
-* chore: new line for non-existent url (#7308) ([522faf8](https://github.com/vitejs/vite/commit/522faf8)), closes [#7308](https://github.com/vitejs/vite/issues/7308)
-* chore: remove unused code (#7303) ([467512b](https://github.com/vitejs/vite/commit/467512b)), closes [#7303](https://github.com/vitejs/vite/issues/7303)
-* feat: expose ssrRewriteStacktrace (#7091) ([d4ae45d](https://github.com/vitejs/vite/commit/d4ae45d)), closes [#7091](https://github.com/vitejs/vite/issues/7091)
-
-
-
-## 2.9.0-beta.0 (2022-03-09)
-
 * fix: `import.meta.url` should not throw (#7219) ([5de3a98](https://github.com/vitejs/vite/commit/5de3a98)), closes [#7219](https://github.com/vitejs/vite/issues/7219)
 * fix: allow `localhost` as a valid hostname (#7092) ([4194cce](https://github.com/vitejs/vite/commit/4194cce)), closes [#7092](https://github.com/vitejs/vite/issues/7092)
 * fix: build optimize deps metada location (#7214) ([dc46adf](https://github.com/vitejs/vite/commit/dc46adf)), closes [#7214](https://github.com/vitejs/vite/issues/7214)
@@ -115,18 +142,93 @@
 * fix(server): base middleware redirect with search and hash (#6574) ([a516e85](https://github.com/vitejs/vite/commit/a516e85)), closes [#6574](https://github.com/vitejs/vite/issues/6574)
 * fix(server): ensure consistency for url to file mapping in importAnalysis and static middleware (#65 ([b214115](https://github.com/vitejs/vite/commit/b214115)), closes [#6518](https://github.com/vitejs/vite/issues/6518)
 * fix(ssr): bypass missing resolve error in SSR (#7164) ([a4927c5](https://github.com/vitejs/vite/commit/a4927c5)), closes [#7164](https://github.com/vitejs/vite/issues/7164)
-* chore: replace SourceMapConsumer with trace-mapping (#6746) ([ed4d191](https://github.com/vitejs/vite/commit/ed4d191)), closes [#6746](https://github.com/vitejs/vite/issues/6746)
+
+
+### Features
+
+* feat(worker): Add sourcemap support for worker bundles (#5417) ([465b6b9](https://github.com/vitejs/vite/commit/465b6b9)), closes [#5417](https://github.com/vitejs/vite/issues/5417)
+* feat(type): support typing for custom events (#7476) ([50a8765](https://github.com/vitejs/vite/commit/50a8765)), closes [#7476](https://github.com/vitejs/vite/issues/7476)
+* refactor(types): share hot context type (#7475) ([64ddff0](https://github.com/vitejs/vite/commit/64ddff0)), closes [#7475](https://github.com/vitejs/vite/issues/7475)
+* feat: support importing css with ?raw (#5796) ([fedb106](https://github.com/vitejs/vite/commit/fedb106)), closes [#5796](https://github.com/vitejs/vite/issues/5796)
+* feat(css): css.devSourcemap option (#7471) ([57f14cb](https://github.com/vitejs/vite/commit/57f14cb)), closes [#7471](https://github.com/vitejs/vite/issues/7471)
+* feat(dev): expose APIs for client-server communication (#7437) ([e29ea8e](https://github.com/vitejs/vite/commit/e29ea8e)), closes [#7437](https://github.com/vitejs/vite/issues/7437)
+* feat: hide optimized deps found during scan phase logs (#7419) ([f4934e8](https://github.com/vitejs/vite/commit/f4934e8)), closes [#7419](https://github.com/vitejs/vite/issues/7419)
+* feat: non-blocking scanning of dependencies (#7379) ([676f545](https://github.com/vitejs/vite/commit/676f545)), closes [#7379](https://github.com/vitejs/vite/issues/7379)
+* feat: css sourcemap support during dev (#7173) ([38a655f](https://github.com/vitejs/vite/commit/38a655f)), closes [#7173](https://github.com/vitejs/vite/issues/7173)
+* feat: expose ssrRewriteStacktrace (#7091) ([d4ae45d](https://github.com/vitejs/vite/commit/d4ae45d)), closes [#7091](https://github.com/vitejs/vite/issues/7091)
 * feat: add `importedCss` and `importedAssets` to RenderedChunk type (#6629) ([8d0fc90](https://github.com/vitejs/vite/commit/8d0fc90)), closes [#6629](https://github.com/vitejs/vite/issues/6629)
 * feat: non-blocking pre bundling of dependencies (#6758) ([24bb3e4](https://github.com/vitejs/vite/commit/24bb3e4)), closes [#6758](https://github.com/vitejs/vite/issues/6758)
 * feat: optimize custom extensions (#6801) ([c11af23](https://github.com/vitejs/vite/commit/c11af23)), closes [#6801](https://github.com/vitejs/vite/issues/6801)
 * feat: show all prebundle deps when debug (#6726) ([e626055](https://github.com/vitejs/vite/commit/e626055)), closes [#6726](https://github.com/vitejs/vite/issues/6726)
-* feat(config): hmr add disable port config (#6624) ([ce07a0a](https://github.com/vitejs/vite/commit/ce07a0a)), closes [#6624](https://github.com/vitejs/vite/issues/6624)
 * feat(glob): import.meta.glob support alias path (#6526) ([86882ad](https://github.com/vitejs/vite/commit/86882ad)), closes [#6526](https://github.com/vitejs/vite/issues/6526)
 * feat(perf): tsconfck perf improvement (#7055) ([993ea39](https://github.com/vitejs/vite/commit/993ea39)), closes [#7055](https://github.com/vitejs/vite/issues/7055)
 * feat(worker): bundle worker emit asset file (#6599) ([0ade335](https://github.com/vitejs/vite/commit/0ade335)), closes [#6599](https://github.com/vitejs/vite/issues/6599)
 * refactor: avoid splitting vendor chunk by default (#6534) ([849e845](https://github.com/vitejs/vite/commit/849e845)), closes [#6534](https://github.com/vitejs/vite/issues/6534)
 
 
+### Beta Changelogs
+
+
+#### [2.9.0-beta.11](https://github.com/vitejs/vite/compare/v2.9.0-beta.10...v2.9.0-beta.11) (2022-03-29)
+
+See [2.9.0-beta.11 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.11/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.10](https://github.com/vitejs/vite/compare/v2.9.0-beta.9...v2.9.0-beta.10) (2022-03-28)
+
+See [2.9.0-beta.10 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.10/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.9](https://github.com/vitejs/vite/compare/v2.9.0-beta.8...v2.9.0-beta.9) (2022-03-26)
+
+See [2.9.0-beta.9 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.9/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.8](https://github.com/vitejs/vite/compare/v2.9.0-beta.7...v2.9.0-beta.8) (2022-03-24)
+
+See [2.9.0-beta.8 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.8/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.7](https://github.com/vitejs/vite/compare/v2.9.0-beta.6...v2.9.0-beta.7) (2022-03-23)
+
+See [2.9.0-beta.7 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.7/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.6](https://github.com/vitejs/vite/compare/v2.9.0-beta.5...v2.9.0-beta.6) (2022-03-22)
+
+See [2.9.0-beta.6 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.6/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.5](https://github.com/vitejs/vite/compare/v2.9.0-beta.4...v2.9.0-beta.5) (2022-03-22)
+
+See [2.9.0-beta.5 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.5/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.4](https://github.com/vitejs/vite/compare/v2.9.0-beta.3...v2.9.0-beta.4) (2022-03-19)
+
+See [2.9.0-beta.4 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.4/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.3](https://github.com/vitejs/vite/compare/v2.9.0-beta.2...v2.9.0-beta.3) (2022-03-16)
+
+See [2.9.0-beta.3 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.3/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.2](https://github.com/vitejs/vite/compare/v2.9.0-beta.1...v2.9.0-beta.2) (2022-03-14)
+
+See [2.9.0-beta.2 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.2/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.1](https://github.com/vitejs/vite/compare/v2.9.0-beta.0...v2.9.0-beta.1) (2022-03-14)
+
+See [2.9.0-beta.1 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.1/packages/vite/CHANGELOG.md)
+
+
+#### [2.9.0-beta.0](https://github.com/vitejs/vite/compare/v2.8.6...v2.9.0-beta.0) (2022-03-09)
+
+See [2.9.0-beta.0 changelog](https://github.com/vitejs/vite/blob/v2.9.0-beta.0/packages/vite/CHANGELOG.md)
+
+
 
 ## [2.8.6](https://github.com/vitejs/vite/compare/v2.8.5...v2.8.6) (2022-03-01)
 
@@ -226,7 +328,7 @@
 
 ### Default preview port
 
-New default port for `vite preview` is 4173 (avoid conflicts in MacOS that took over the 5000 port)
+New default port for `vite preview` is 4173 (avoid conflicts in macOS that took over the 5000 port)
 
 ### Workers using standard syntax
 
diff --git a/packages/vite/package.json b/packages/vite/package.json
index ddb89d3970fc26..adf73956a5c33a 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.9.0-beta.9",
+  "version": "2.9.1",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",
@@ -53,11 +53,11 @@
   },
   "devDependencies": {
     "@ampproject/remapping": "^2.1.2",
-    "@babel/parser": "^7.17.8",
+    "@babel/parser": "^7.17.9",
     "@babel/types": "^7.17.0",
     "@jridgewell/trace-mapping": "^0.3.4",
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "13.1.3",
@@ -74,7 +74,7 @@
     "@types/node": "^16.11.26",
     "@types/resolve": "^1.20.1",
     "@types/sass": "~1.43.1",
-    "@types/stylus": "^0.48.36",
+    "@types/stylus": "^0.48.37",
     "@types/ws": "^8.5.3",
     "@vue/compiler-dom": "^3.2.31",
     "acorn": "^8.7.0",
@@ -88,7 +88,7 @@
     "debug": "^4.3.4",
     "dotenv": "^14.3.2",
     "dotenv-expand": "^5.1.0",
-    "es-module-lexer": "^0.10.4",
+    "es-module-lexer": "^0.10.5",
     "estree-walker": "^2.0.2",
     "etag": "^1.8.1",
     "fast-glob": "^3.2.11",
@@ -96,15 +96,15 @@
     "json5": "^2.2.1",
     "launch-editor-middleware": "^2.3.0",
     "magic-string": "^0.26.1",
-    "micromatch": "^4.0.4",
+    "micromatch": "^4.0.5",
     "mrmime": "^1.0.0",
-    "node-forge": "^1.3.0",
+    "node-forge": "^1.3.1",
     "okie": "^1.0.1",
     "open": "^8.4.0",
     "periscopic": "^2.0.3",
     "picocolors": "^1.0.0",
-    "postcss-import": "^14.0.2",
-    "postcss-load-config": "^3.1.3",
+    "postcss-import": "^14.1.0",
+    "postcss-load-config": "^3.1.4",
     "postcss-modules": "^4.3.1",
     "resolve.exports": "^1.1.0",
     "rollup-plugin-license": "^2.6.1",
@@ -113,7 +113,7 @@
     "source-map-support": "^0.5.21",
     "strip-ansi": "^6.0.1",
     "terser": "^5.12.1",
-    "tsconfck": "^1.2.1",
+    "tsconfck": "^1.2.2",
     "tslib": "^2.3.1",
     "types": "link:./types",
     "ws": "^8.5.0"
diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index c180714f5a69bf..420d084ef9a981 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -9,7 +9,7 @@ import '@vite/env'
 declare const __BASE__: string
 declare const __HMR_PROTOCOL__: string
 declare const __HMR_HOSTNAME__: string
-declare const __HMR_PORT__: string | false
+declare const __HMR_PORT__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
@@ -18,10 +18,7 @@ console.log('[vite] connecting...')
 // use server configuration, then fallback to inference
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
-const socketHost = __HMR_PORT__
-  ? `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
-  : `${__HMR_HOSTNAME__ || location.hostname}`
-
+const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
 const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
 const base = __BASE__ || '/'
 const messageBuffer: string[] = []
diff --git a/packages/vite/src/node/__tests__/cleanString.spec.ts b/packages/vite/src/node/__tests__/cleanString.spec.ts
new file mode 100644
index 00000000000000..1065a2d4985ceb
--- /dev/null
+++ b/packages/vite/src/node/__tests__/cleanString.spec.ts
@@ -0,0 +1,160 @@
+import { emptyString } from '../../node/cleanString'
+
+test('comments', () => {
+  expect(
+    emptyString(`
+    // comment1 // comment
+    // comment1
+    /* coment2 */
+    /*
+      // coment3
+    */
+    /* // coment3 */
+    /* // coment3 */ // comment
+    // comment 4 /* comment 5 */
+  `).trim()
+  ).toBe('')
+})
+
+test('strings', () => {
+  const clean = emptyString(`
+    // comment1
+    const a = 'aaaa'
+    /* coment2 */
+    const b = "bbbb"
+    /*
+      // coment3
+    */
+    /* // coment3 */
+    // comment 4 /* comment 5 */
+  `)
+  expect(clean).toMatch("const a = '\0\0\0\0'")
+  expect(clean).toMatch('const b = "\0\0\0\0"')
+})
+
+test('strings comment nested', () => {
+  expect(
+    emptyString(`
+    // comment 1 /* " */
+    const a = "a //"
+    // comment 2 /* " */
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+
+  expect(
+    emptyString(`
+    // comment 1 /* ' */
+    const a = "a //"
+    // comment 2 /* ' */
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+
+  expect(
+    emptyString(`
+    // comment 1 /* \` */
+    const a = "a //"
+    // comment 2 /* \` */
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+
+  expect(
+    emptyString(`
+    const a = "a //"
+    console.log("console")
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+
+  expect(
+    emptyString(`
+    const a = "a /*"
+    console.log("console")
+    const b = "b */"
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+
+  expect(
+    emptyString(`
+    const a = "a ' "
+    console.log("console")
+    const b = "b ' "
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+
+  expect(
+    emptyString(`
+    const a = "a \` "
+    console.log("console")
+    const b = "b \` "
+  `)
+  ).toMatch('const a = "\0\0\0\0"')
+})
+
+test('find empty string flag in raw index', () => {
+  const str = `
+    const a = "aaaaa"
+    const b = "bbbbb"
+  `
+  const clean = emptyString(str)
+  expect(clean).toMatch('const a = "\0\0\0\0\0"')
+  expect(clean).toMatch('const b = "\0\0\0\0\0"')
+
+  const aIndex = str.indexOf('const a = "aaaaa"')
+  const aStart = clean.indexOf('\0\0\0\0\0', aIndex)
+  expect(str.slice(aStart, aStart + 5)).toMatch('aaaaa')
+
+  const bIndex = str.indexOf('const b = "bbbbb"')
+  const bStart = clean.indexOf('\0\0\0\0\0', bIndex)
+  expect(str.slice(bStart, bStart + 5)).toMatch('bbbbb')
+})
+
+test('template string nested', () => {
+  let str = '`aaaa`'
+  let res = '`\0\0\0\0`'
+  let clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str = '`aaaa` `aaaa`'
+  res = '`\0\0\0\0` `\0\0\0\0`'
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str = '`aa${a}aa`'
+  res = '`\0\0${a}\0\0`'
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str = '`aa${a + `a` + a}aa`'
+  res = '`\0\0${a + `\0` + a}\0\0`'
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str = '`aa${a + `a` + a}aa` `aa${a + `a` + a}aa`'
+  res = '`\0\0${a + `\0` + a}\0\0` `\0\0${a + `\0` + a}\0\0`'
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str = '`aa${a + `aaaa${c + (a = {b: 1}) + d}` + a}aa`'
+  res = '`\0\0${a + `\0\0\0\0${c + (a = {b: 1}) + d}` + a}\0\0`'
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str =
+    '`aa${a + `aaaa${c + (a = {b: 1}) + d}` + a}aa` `aa${a + `aaaa${c + (a = {b: 1}) + d}` + a}aa`'
+  res =
+    '`\0\0${a + `\0\0\0\0${c + (a = {b: 1}) + d}` + a}\0\0` `\0\0${a + `\0\0\0\0${c + (a = {b: 1}) + d}` + a}\0\0`'
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+
+  str = '`aaaa'
+  res = ''
+  try {
+    clean = emptyString(str)
+  } catch {}
+  expect(clean).toMatch(res)
+
+  str =
+    "<img src=\"${new URL('../assets/images/loading/loading.gif', import.meta.url).href}\" alt=''>"
+  res = `<img src="\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0" alt=''>`
+  clean = emptyString(str)
+  expect(clean).toMatch(res)
+})
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 6b4d38836b6c51..ff03352a20d7a7 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -19,7 +19,6 @@ import type {
 } from 'rollup'
 import type Rollup from 'rollup'
 import { buildReporterPlugin } from './plugins/reporter'
-import { buildHtmlPlugin } from './plugins/html'
 import { buildEsbuildPlugin } from './plugins/esbuild'
 import { terserPlugin } from './plugins/terser'
 import type { Terser } from 'types/terser'
@@ -40,6 +39,7 @@ import { getDepsCacheDir, findKnownImports } from './optimizer'
 import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl'
 import { loadFallbackPlugin } from './plugins/loadFallback'
 import { watchPackageDataPlugin } from './packages'
+import { ensureWatchPlugin } from './plugins/ensureWatch'
 
 export interface BuildOptions {
   /**
@@ -309,8 +309,8 @@ export function resolveBuildPlugins(config: ResolvedConfig): {
 
   return {
     pre: [
+      ...(options.watch ? [ensureWatchPlugin()] : []),
       watchPackageDataPlugin(config),
-      buildHtmlPlugin(config),
       commonjsPlugin(options.commonjsOptions),
       dataURIPlugin(),
       dynamicImportVars(options.dynamicImportVarsOptions),
@@ -321,7 +321,7 @@ export function resolveBuildPlugins(config: ResolvedConfig): {
     ],
     post: [
       buildImportAnalysisPlugin(config),
-      buildEsbuildPlugin(config),
+      ...(config.esbuild !== false ? [buildEsbuildPlugin(config)] : []),
       ...(options.minify ? [terserPlugin(config)] : []),
       ...(options.manifest ? [manifestPlugin(config)] : []),
       ...(options.ssrManifest ? [ssrManifestPlugin(config)] : []),
diff --git a/packages/vite/src/node/cleanString.ts b/packages/vite/src/node/cleanString.ts
new file mode 100644
index 00000000000000..05163ea055b631
--- /dev/null
+++ b/packages/vite/src/node/cleanString.ts
@@ -0,0 +1,125 @@
+import type { RollupError } from 'rollup'
+// bank on the non-overlapping nature of regex matches and combine all filters into one giant regex
+// /`([^`\$\{\}]|\$\{(`|\g<1>)*\})*`/g can match nested string template
+// but js not support match expression(\g<0>). so clean string template(`...`) in other ways.
+const cleanerRE = /"[^"]*"|'[^']*'|\/\*(.|[\r\n])*?\*\/|\/\/.*/g
+
+const blankReplacer = (s: string) => ' '.repeat(s.length)
+const stringBlankReplacer = (s: string) =>
+  `${s[0]}${'\0'.repeat(s.length - 2)}${s[0]}`
+
+export function emptyString(raw: string): string {
+  let res = raw.replace(cleanerRE, (s: string) =>
+    s[0] === '/' ? blankReplacer(s) : stringBlankReplacer(s)
+  )
+
+  let lastEnd = 0
+  let start = 0
+  while ((start = res.indexOf('`', lastEnd)) >= 0) {
+    let clean
+    ;[clean, lastEnd] = lexStringTemplateExpression(res, start)
+    res = replaceAt(res, start, lastEnd, clean)
+  }
+
+  return res
+}
+
+const enum LexerState {
+  inTemplateString,
+  inInterpolationExpression,
+  inObjectExpression
+}
+
+function replaceAt(
+  string: string,
+  start: number,
+  end: number,
+  replacement: string
+): string {
+  return string.slice(0, start) + replacement + string.slice(end)
+}
+
+/**
+ * lex string template and clean it.
+ */
+function lexStringTemplateExpression(
+  code: string,
+  start: number
+): [string, number] {
+  let state = LexerState.inTemplateString as LexerState
+  let clean = '`'
+  const opStack: LexerState[] = [state]
+
+  function pushStack(newState: LexerState) {
+    state = newState
+    opStack.push(state)
+  }
+
+  function popStack() {
+    opStack.pop()
+    state = opStack[opStack.length - 1]
+  }
+
+  let i = start + 1
+  outer: for (; i < code.length; i++) {
+    const char = code.charAt(i)
+    switch (state) {
+      case LexerState.inTemplateString:
+        if (char === '$' && code.charAt(i + 1) === '{') {
+          pushStack(LexerState.inInterpolationExpression)
+          clean += '${'
+          i++ // jump next
+        } else if (char === '`') {
+          popStack()
+          clean += char
+          if (opStack.length === 0) {
+            break outer
+          }
+        } else {
+          clean += '\0'
+        }
+        break
+      case LexerState.inInterpolationExpression:
+        if (char === '{') {
+          pushStack(LexerState.inObjectExpression)
+          clean += char
+        } else if (char === '}') {
+          popStack()
+          clean += char
+        } else if (char === '`') {
+          pushStack(LexerState.inTemplateString)
+          clean += char
+        } else {
+          clean += char
+        }
+        break
+      case LexerState.inObjectExpression:
+        if (char === '}') {
+          popStack()
+          clean += char
+        } else if (char === '`') {
+          pushStack(LexerState.inTemplateString)
+          clean += char
+        } else {
+          clean += char
+        }
+        break
+      default:
+        throw new Error('unknown string template lexer state')
+    }
+  }
+
+  if (opStack.length !== 0) {
+    error(start)
+  }
+
+  return [clean, i + 1]
+}
+
+function error(pos: number) {
+  const err = new Error(
+    `can not match string template expression.`
+  ) as RollupError
+  err.pos = pos
+  throw err
+}
diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts
index 9612cd8c96460d..1741bf2dd7a94b 100644
--- a/packages/vite/src/node/constants.ts
+++ b/packages/vite/src/node/constants.ts
@@ -6,6 +6,21 @@ export const DEFAULT_MAIN_FIELDS = [
   'jsnext'
 ]
 
+/**
+ * A non-exhaustive list of known-to-be-ES-module entry names.
+ * From <https://github.com/stereobooster/package.json#package-bundlers>
+ */
+export const KNOWN_ESM_MAIN_FIELDS = [
+  'module',
+  'jsnext:main',
+  'jsnext',
+  'esnext',
+  'es2015',
+  'es2020',
+  'fesm2015',
+  'fesm2020'
+]
+
 export const DEFAULT_EXTENSIONS = [
   '.mjs',
   '.js',
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index 8ed3ba66d09744..a759bee2b5fa59 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -147,7 +147,7 @@ export async function transformImportGlob(
         )
       }
       entries += ` ${JSON.stringify(file)}: ${JSON.stringify(
-        await fsp.readFile(path.join(base, file), 'utf-8')
+        await fsp.readFile(path.join(base, files[i]), 'utf-8')
       )},`
     } else {
       const importeeUrl = isCSSRequest(importee) ? `${importee}?used` : importee
diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
index 37294aea459c15..88c41801938b98 100644
--- a/packages/vite/src/node/optimizer/index.ts
+++ b/packages/vite/src/node/optimizer/index.ts
@@ -371,7 +371,6 @@ export async function runOptimizeDeps(
       commit() {
         // Write metadata file, delete `deps` folder and rename the `processing` folder to `deps`
         commitProcessingDepsCacheSync()
-        config.logger.info(`No dependencies to bundle. Skipping.\n\n\n`)
       },
       cancel
     }
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index 549f748d9a2b58..e940617386eb35 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -142,7 +142,10 @@ function globEntries(pattern: string | string[], config: ResolvedConfig) {
     ignore: [
       '**/node_modules/**',
       `**/${config.build.outDir}/**`,
-      `**/__tests__/**`
+      // if there aren't explicit entries, also ignore other common folders
+      ...(config.optimizeDeps.entries
+        ? []
+        : [`**/__tests__/**`, `**/coverage/**`])
     ],
     absolute: true
   })
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index b0c59bed808604..b8c16f76d2b93f 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -3,7 +3,7 @@ import MagicString from 'magic-string'
 import path from 'path'
 import { fileToUrl } from './asset'
 import type { ResolvedConfig } from '../config'
-import { multilineCommentsRE, singlelineCommentsRE } from '../utils'
+import { emptyString } from '../cleanString'
 
 /**
  * Convert `new URL('./foo.png', import.meta.url)` to its resolved built URL
@@ -24,15 +24,18 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
         code.includes('new URL') &&
         code.includes(`import.meta.url`)
       ) {
-        const importMetaUrlRE =
+        let s: MagicString | undefined
+        const assetImportMetaUrlRE =
           /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g
-        const noCommentsCode = code
-          .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
-          .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))
-        let s: MagicString | null = null
+        const cleanString = emptyString(code)
+
         let match: RegExpExecArray | null
-        while ((match = importMetaUrlRE.exec(noCommentsCode))) {
-          const { 0: exp, 1: rawUrl, index } = match
+        while ((match = assetImportMetaUrlRE.exec(cleanString))) {
+          const { 0: exp, 1: emptyUrl, index } = match
+
+          const urlStart = cleanString.indexOf(emptyUrl, index)
+          const urlEnd = urlStart + emptyUrl.length
+          const rawUrl = code.slice(urlStart, urlEnd)
 
           if (!s) s = new MagicString(code)
 
@@ -63,8 +66,9 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           // Get final asset URL. Catch error if the file does not exist,
           // in which we can resort to the initial URL and let it resolve in runtime
           const builtUrl = await fileToUrl(file, config, this).catch(() => {
+            const rawExp = code.slice(index, index + exp.length)
             config.logger.warnOnce(
-              `\n${exp} doesn't exist at build time, it will remain unchanged to be resolved at runtime`
+              `\n${rawExp} doesn't exist at build time, it will remain unchanged to be resolved at runtime`
             )
             return url
           })
diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
index e86bec0826d72f..1c9a0d393327c7 100644
--- a/packages/vite/src/node/plugins/clientInjections.ts
+++ b/packages/vite/src/node/plugins/clientInjections.ts
@@ -23,7 +23,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         const protocol = options.protocol || null
         const timeout = options.timeout || 30000
         const overlay = options.overlay !== false
-        let port: number | string | false | undefined
+        let port: number | string | undefined
         if (isObject(config.server.hmr)) {
           port = config.server.hmr.clientPort || config.server.hmr.port
         }
@@ -41,14 +41,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         }
 
         return code
-          .replace(/__MODE__/g, JSON.stringify(config.mode))
-          .replace(/__BASE__/g, JSON.stringify(config.base))
-          .replace(/__DEFINES__/g, serializeDefine(config.define || {}))
-          .replace(/__HMR_PROTOCOL__/g, JSON.stringify(protocol))
-          .replace(/__HMR_HOSTNAME__/g, JSON.stringify(host))
-          .replace(/__HMR_PORT__/g, JSON.stringify(port))
-          .replace(/__HMR_TIMEOUT__/g, JSON.stringify(timeout))
-          .replace(/__HMR_ENABLE_OVERLAY__/g, JSON.stringify(overlay))
+          .replace(`__MODE__`, JSON.stringify(config.mode))
+          .replace(`__BASE__`, JSON.stringify(config.base))
+          .replace(`__DEFINES__`, serializeDefine(config.define || {}))
+          .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
+          .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
+          .replace(`__HMR_PORT__`, JSON.stringify(port))
+          .replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout))
+          .replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay))
       } else if (!options?.ssr && code.includes('process.env.NODE_ENV')) {
         // replace process.env.NODE_ENV instead of defining a global
         // for it to avoid shimming a `process` object during dev,
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 87de63ef3ec306..adef254950c5e5 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -36,7 +36,7 @@ import {
   checkPublicFile
 } from './asset'
 import MagicString from 'magic-string'
-import type * as Postcss from 'postcss'
+import type * as PostCSS from 'postcss'
 import type Sass from 'sass'
 // We need to disable check of extraneous import which is buggy for stylus,
 // and causes the CI tests fail, see: https://github.com/vitejs/vite/pull/2860
@@ -59,8 +59,8 @@ export interface CSSOptions {
   preprocessorOptions?: Record<string, any>
   postcss?:
     | string
-    | (Postcss.ProcessOptions & {
-        plugins?: Postcss.Plugin[]
+    | (PostCSS.ProcessOptions & {
+        plugins?: PostCSS.Plugin[]
       })
   /**
    * Enables css sourcemaps during dev
@@ -358,14 +358,21 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         styles.set(id, css)
       }
 
+      let code: string
+      if (usedRE.test(id)) {
+        if (inlined) {
+          code = `export default ${JSON.stringify(
+            await minifyCSS(css, config)
+          )}`
+        } else {
+          code = modulesCode || `export default ${JSON.stringify(css)}`
+        }
+      } else {
+        code = `export default ''`
+      }
+
       return {
-        code:
-          modulesCode ||
-          (usedRE.test(id)
-            ? `export default ${JSON.stringify(
-                inlined ? await minifyCSS(css, config) : css
-              )}`
-            : `export default ''`),
+        code,
         map: { mappings: '' },
         // avoid the css module from being tree-shaken so that we can retrieve
         // it in renderChunk()
@@ -420,10 +427,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             return `./${path.posix.basename(filename)}`
           }
         })
-        // only external @imports should exist at this point - and they need to
-        // be hoisted to the top of the CSS chunk per spec (#1845)
-        if (css.includes('@import')) {
-          css = await hoistAtImports(css)
+        // only external @imports and @charset should exist at this point
+        // hoist them to the top of the CSS chunk per spec (#1845 and #6333)
+        if (css.includes('@import') || css.includes('@charset')) {
+          css = await hoistAtRules(css)
         }
         if (minify && config.build.minify) {
           css = await minifyCSS(css, config)
@@ -617,7 +624,7 @@ async function compileCSS(
 ): Promise<{
   code: string
   map?: SourceMapInput
-  ast?: Postcss.Result
+  ast?: PostCSS.Result
   modules?: Record<string, string>
   deps?: Set<string>
 }> {
@@ -735,7 +742,7 @@ async function compileCSS(
   postcssPlugins.push(
     UrlRewritePostcssPlugin({
       replacer: urlReplacer
-    }) as Postcss.Plugin
+    }) as PostCSS.Plugin
   )
 
   if (isModule) {
@@ -783,7 +790,9 @@ async function compileCSS(
       map: {
         inline: false,
         annotation: false,
-        sourcesContent: false
+        // postcss may return virtual files
+        // we cannot obtain content of them, so this needs to be enabled
+        sourcesContent: true
         // when "prev: preprocessorMap", the result map may include duplicate filename in `postcssResult.map.sources`
         // prev: preprocessorMap,
       }
@@ -862,19 +871,33 @@ export function formatPostcssSourceMap(
   file: string
 ): ExistingRawSourceMap {
   const inputFileDir = path.dirname(file)
-  const sources = rawMap.sources
+
+  const sources: string[] = []
+  const sourcesContent: string[] = []
+  for (const [i, source] of rawMap.sources.entries()) {
     // remove <no source> from sources, to prevent source map to be combined incorrectly
-    .filter((source) => source !== '<no source>')
-    .map((source) => {
-      const cleanSource = cleanUrl(decodeURIComponent(source))
-      return normalizePath(path.resolve(inputFileDir, cleanSource))
-    })
+    if (source === '<no source>') continue
+
+    const cleanSource = cleanUrl(decodeURIComponent(source))
+
+    // postcss returns virtual files
+    if (/^<.+>$/.test(cleanSource)) {
+      sources.push(`\0${cleanSource}`)
+    } else {
+      sources.push(normalizePath(path.resolve(inputFileDir, cleanSource)))
+    }
+
+    if (rawMap.sourcesContent) {
+      sourcesContent.push(rawMap.sourcesContent[i])
+    }
+  }
 
   return {
     file,
     mappings: rawMap.mappings,
     names: rawMap.names,
     sources,
+    sourcesContent,
     version: rawMap.version
   }
 }
@@ -895,8 +918,8 @@ function combineSourcemapsIfExists(
 }
 
 interface PostCSSConfigResult {
-  options: Postcss.ProcessOptions
-  plugins: Postcss.Plugin[]
+  options: PostCSS.ProcessOptions
+  plugins: PostCSS.Plugin[]
 }
 
 async function resolvePostcssConfig(
@@ -942,10 +965,12 @@ type CssUrlReplacer = (
 // https://drafts.csswg.org/css-syntax-3/#identifier-code-point
 export const cssUrlRE =
   /(?<=^|[^\w\-\u0080-\uffff])url\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
+export const cssDataUriRE =
+  /(?<=^|[^\w\-\u0080-\uffff])data-uri\(\s*('[^']+'|"[^"]+"|[^'")]+)\s*\)/
 export const importCssRE = /@import ('[^']+\.css'|"[^"]+\.css"|[^'")]+\.css)/
 const cssImageSetRE = /image-set\(([^)]+)\)/
 
-const UrlRewritePostcssPlugin: Postcss.PluginCreator<{
+const UrlRewritePostcssPlugin: PostCSS.PluginCreator<{
   replacer: CssUrlReplacer
 }> = (opts) => {
   if (!opts) {
@@ -992,6 +1017,16 @@ function rewriteCssUrls(
   })
 }
 
+function rewriteCssDataUris(
+  css: string,
+  replacer: CssUrlReplacer
+): Promise<string> {
+  return asyncReplace(css, cssDataUriRE, async (match) => {
+    const [matched, rawUrl] = match
+    return await doUrlReplace(rawUrl, matched, replacer, 'data-uri')
+  })
+}
+
 function rewriteImportCss(
   css: string,
   replacer: CssUrlReplacer
@@ -1017,7 +1052,8 @@ function rewriteCssImageSet(
 async function doUrlReplace(
   rawUrl: string,
   matched: string,
-  replacer: CssUrlReplacer
+  replacer: CssUrlReplacer,
+  funcName: string = 'url'
 ) {
   let wrap = ''
   const first = rawUrl[0]
@@ -1029,7 +1065,12 @@ async function doUrlReplace(
     return matched
   }
 
-  return `url(${wrap}${await replacer(rawUrl)}${wrap})`
+  const newUrl = await replacer(rawUrl)
+  if (wrap === '' && newUrl !== encodeURI(newUrl)) {
+    // The new url might need wrapping even if the original did not have it, e.g. if a space was added during replacement
+    wrap = "'"
+  }
+  return `${funcName}(${wrap}${newUrl}${wrap})`
 }
 
 async function doImportCSSReplace(
@@ -1068,27 +1109,33 @@ async function minifyCSS(css: string, config: ResolvedConfig) {
 // #1845
 // CSS @import can only appear at top of the file. We need to hoist all @import
 // to top when multiple files are concatenated.
-async function hoistAtImports(css: string) {
+// #6333
+// CSS @charset must be the top-first in the file, hoist to top too
+async function hoistAtRules(css: string) {
   const postcss = await import('postcss')
-  return (await postcss.default([AtImportHoistPlugin]).process(css)).css
+  return (await postcss.default([AtRuleHoistPlugin]).process(css)).css
 }
 
-const AtImportHoistPlugin: Postcss.PluginCreator<any> = () => {
+const AtRuleHoistPlugin: PostCSS.PluginCreator<any> = () => {
   return {
-    postcssPlugin: 'vite-hoist-at-imports',
+    postcssPlugin: 'vite-hoist-at-rules',
     Once(root) {
-      const imports: Postcss.AtRule[] = []
+      const imports: PostCSS.AtRule[] = []
+      let charset: PostCSS.AtRule | undefined
       root.walkAtRules((rule) => {
         if (rule.name === 'import') {
           // record in reverse so that can simply prepend to preserve order
           imports.unshift(rule)
+        } else if (!charset && rule.name === 'charset') {
+          charset = rule
         }
       })
       imports.forEach((i) => root.prepend(i))
+      if (charset) root.prepend(charset)
     }
   }
 }
-AtImportHoistPlugin.postcss = true
+AtRuleHoistPlugin.postcss = true
 
 // Preprocessor support. This logic is largely replicated from @vue/compiler-sfc
 
@@ -1279,10 +1326,12 @@ async function rebaseUrls(
   const content = fs.readFileSync(file, 'utf-8')
   // no url()
   const hasUrls = cssUrlRE.test(content)
+  // data-uri() calls
+  const hasDataUris = cssDataUriRE.test(content)
   // no @import xxx.css
   const hasImportCss = importCssRE.test(content)
 
-  if (!hasUrls && !hasImportCss) {
+  if (!hasUrls && !hasDataUris && !hasImportCss) {
     return { file }
   }
 
@@ -1311,6 +1360,10 @@ async function rebaseUrls(
     rebased = await rewriteCssUrls(rebased || content, rebaseFn)
   }
 
+  if (hasDataUris) {
+    rebased = await rewriteCssDataUris(rebased || content, rebaseFn)
+  }
+
   return {
     file,
     contents: rebased
diff --git a/packages/vite/src/node/plugins/ensureWatch.ts b/packages/vite/src/node/plugins/ensureWatch.ts
new file mode 100644
index 00000000000000..30a6fb3d6df819
--- /dev/null
+++ b/packages/vite/src/node/plugins/ensureWatch.ts
@@ -0,0 +1,17 @@
+import type { Plugin } from '../plugin'
+import { cleanUrl, queryRE } from '../utils'
+
+/**
+ * plugin to ensure rollup can watch correctly.
+ */
+export function ensureWatchPlugin(): Plugin {
+  return {
+    name: 'vite:ensure-watch',
+    load(id) {
+      if (queryRE.test(id)) {
+        this.addWatchFile(cleanUrl(id))
+      }
+      return null
+    }
+  }
+}
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 16406a12cbb732..57ed5c1c37e60c 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -380,7 +380,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             // will transform with css plugin and cache result with css-post plugin
             js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
 
-            // will transfrom in `applyHtmlTransforms`
+            // will transform in `applyHtmlTransforms`
             s.overwrite(
               styleNode.loc.start.offset,
               styleNode.loc.end.offset,
@@ -608,7 +608,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           }
         }
 
-        const shortEmitName = path.posix.relative(config.root, id)
         // no use assets plugin because it will emit file
         let match: RegExpExecArray | null
         let s: MagicString | undefined
@@ -626,8 +625,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         if (s) {
           result = s.toString()
         }
+        const relativeUrlPath = path.posix.relative(config.root, id)
         result = await applyHtmlTransforms(result, postHooks, {
-          path: '/' + shortEmitName,
+          path: '/' + relativeUrlPath,
           filename: id,
           bundle,
           chunk
@@ -642,6 +642,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           delete bundle[chunk.fileName]
         }
 
+        const shortEmitName = path.relative(config.root, id)
         this.emitFile({
           type: 'asset',
           fileName: shortEmitName,
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index e7336ae4947677..31e9cd76faa8a0 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -122,6 +122,12 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
     },
 
     async transform(source, importer, options) {
+      // In a real app `server` is always defined, but it is undefined when
+      // running src/node/server/__tests__/pluginContainer.spec.ts
+      if (!server) {
+        return null
+      }
+
       const ssr = options?.ssr === true
       const prettyImporter = prettifyUrl(importer, root)
 
@@ -159,7 +165,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
         )
       }
 
+      const { moduleGraph } = server
+      // since we are already in the transform phase of the importer, it must
+      // have been loaded so its entry is guaranteed in the module graph.
+      const importerModule = moduleGraph.getModuleById(importer)!
+
       if (!imports.length) {
+        importerModule.isSelfAccepting = false
         isDebug &&
           debug(
             `${timeFrom(start)} ${colors.dim(`[no imports] ${prettyImporter}`)}`
@@ -173,11 +185,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
       let needQueryInjectHelper = false
       let s: MagicString | undefined
       const str = () => s || (s = new MagicString(source))
-      // vite-only server context
-      const { moduleGraph } = server
-      // since we are already in the transform phase of the importer, it must
-      // have been loaded so its entry is guaranteed in the module graph.
-      const importerModule = moduleGraph.getModuleById(importer)!
       const importedUrls = new Set<string>()
       const staticImportedUrls = new Set<string>()
       const acceptedUrls = new Set<{
@@ -518,7 +525,10 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           }
         } else if (!importer.startsWith(clientDir) && !ssr) {
           // check @vite-ignore which suppresses dynamic import warning
-          const hasViteIgnore = /\/\*\s*@vite-ignore\s*\*\//.test(rawUrl)
+          const hasViteIgnore = /\/\*\s*@vite-ignore\s*\*\//.test(
+            // complete expression inside parens
+            source.slice(dynamicIndex + 1, end)
+          )
 
           const url = rawUrl
             .replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '')
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 825798a73c8493..2d34b99aebf1c5 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -9,7 +9,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlInlineProxyPlugin } from './html'
+import { buildHtmlPlugin, htmlInlineProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
@@ -17,6 +17,7 @@ import { preAliasPlugin } from './preAlias'
 import { definePlugin } from './define'
 import { ssrRequireHookPlugin } from './ssrRequireHook'
 import { workerImportMetaUrlPlugin } from './workerImportMetaUrl'
+import { ensureWatchPlugin } from './ensureWatch'
 import { metadataPlugin } from './metadata'
 
 export async function resolvePlugins(
@@ -26,12 +27,14 @@ export async function resolvePlugins(
   postPlugins: Plugin[]
 ): Promise<Plugin[]> {
   const isBuild = config.command === 'build'
+  const isWatch = isBuild && !!config.build.watch
 
   const buildPlugins = isBuild
     ? (await import('../build')).resolveBuildPlugins(config)
     : { pre: [], post: [] }
 
   return [
+    isWatch ? ensureWatchPlugin() : null,
     isBuild ? metadataPlugin() : null,
     isBuild ? null : preAliasPlugin(),
     aliasPlugin({ entries: config.resolve.alias }),
@@ -61,12 +64,13 @@ export async function resolvePlugins(
     ),
     wasmPlugin(config),
     webWorkerPlugin(config),
-    workerImportMetaUrlPlugin(config),
     assetPlugin(config),
     ...normalPlugins,
     definePlugin(config),
     cssPostPlugin(config),
     config.build.ssr ? ssrRequireHookPlugin(config) : null,
+    isBuild && buildHtmlPlugin(config),
+    workerImportMetaUrlPlugin(config),
     ...buildPlugins.pre,
     ...postPlugins,
     ...buildPlugins.post,
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 686c08b12c3248..10e2989af1114f 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -7,6 +7,7 @@ import {
   SPECIAL_QUERY_RE,
   DEFAULT_EXTENSIONS,
   DEFAULT_MAIN_FIELDS,
+  KNOWN_ESM_MAIN_FIELDS,
   OPTIMIZABLE_ENTRY_RE,
   DEP_VERSION_RE
 } from '../constants'
@@ -332,23 +333,28 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
   }
 }
 
-function tryFsResolve(
-  fsPath: string,
-  options: InternalResolveOptions,
-  tryIndex = true,
-  targetWeb = true
-): string | undefined {
-  let file = fsPath
+function splitFileAndPostfix(path: string) {
+  let file = path
   let postfix = ''
 
-  let postfixIndex = fsPath.indexOf('?')
+  let postfixIndex = path.indexOf('?')
   if (postfixIndex < 0) {
-    postfixIndex = fsPath.indexOf('#')
+    postfixIndex = path.indexOf('#')
   }
   if (postfixIndex > 0) {
-    file = fsPath.slice(0, postfixIndex)
-    postfix = fsPath.slice(postfixIndex)
+    file = path.slice(0, postfixIndex)
+    postfix = path.slice(postfixIndex)
   }
+  return { file, postfix }
+}
+
+function tryFsResolve(
+  fsPath: string,
+  options: InternalResolveOptions,
+  tryIndex = true,
+  targetWeb = true
+): string | undefined {
+  const { file, postfix } = splitFileAndPostfix(fsPath)
 
   let res: string | undefined
 
@@ -772,6 +778,11 @@ export function resolvePackageEntry(
 
     if (!entryPoint || entryPoint.endsWith('.mjs')) {
       for (const field of options.mainFields || DEFAULT_MAIN_FIELDS) {
+        // If the initiator is a `require` call, don't use the ESM entries
+        if (options.isRequire && KNOWN_ESM_MAIN_FIELDS.includes(field)) {
+          continue
+        }
+
         if (typeof data[field] === 'string') {
           entryPoint = data[field]
           break
@@ -842,6 +853,7 @@ function resolveExports(
   if (options.conditions) {
     conditions.push(...options.conditions)
   }
+
   return _resolveExports(pkg, key, {
     browser: targetWeb,
     require: options.isRequire,
@@ -872,12 +884,14 @@ function resolveDeepImport(
   // map relative based on exports data
   if (exportsField) {
     if (isObject(exportsField) && !Array.isArray(exportsField)) {
-      relativeId = resolveExports(
-        data,
-        cleanUrl(relativeId),
-        options,
-        targetWeb
-      )
+      // resolve without postfix (see #7098)
+      const { file, postfix } = splitFileAndPostfix(relativeId)
+      const exportsId = resolveExports(data, file, options, targetWeb)
+      if (exportsId !== undefined) {
+        relativeId = exportsId + postfix
+      } else {
+        relativeId = undefined
+      }
     } else {
       // not exposed
       relativeId = undefined
@@ -889,9 +903,11 @@ function resolveDeepImport(
       )
     }
   } else if (targetWeb && isObject(browserField)) {
-    const mapped = mapWithBrowserField(relativeId, browserField)
+    // resolve without postfix (see #7098)
+    const { file, postfix } = splitFileAndPostfix(relativeId)
+    const mapped = mapWithBrowserField(file, browserField)
     if (mapped) {
-      relativeId = mapped
+      relativeId = mapped + postfix
     } else if (mapped === false) {
       return (webResolvedImports[id] = browserExternalId)
     }
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 70bfd916e21cab..4113b7153f9b35 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -6,13 +6,71 @@ import type Rollup from 'rollup'
 import { ENV_PUBLIC_PATH } from '../constants'
 import path from 'path'
 import { onRollupWarning } from '../build'
+import type { TransformPluginContext, EmittedFile } from 'rollup'
+
+interface WorkerCache {
+  // save worker bundle emitted files avoid overwrites the same file.
+  // <chunk_filename, hash>
+  assets: Map<string, string>
+  chunks: Map<string, string>
+  // worker bundle don't deps on any more worker runtime info an id only had an result.
+  // save worker bundled file id to avoid repeated execution of bundles
+  // <filename, hash>
+  bundle: Map<string, string>
+  // nested worker bundle context don't had file what emitted by outside bundle
+  // save the hash to id to rewrite truth id.
+  // <hash, id>
+  emitted: Map<string, string>
+}
 
 const WorkerFileId = 'worker_file'
+const workerCache = new WeakMap<ResolvedConfig, WorkerCache>()
+
+function emitWorkerFile(
+  ctx: Rollup.TransformPluginContext,
+  config: ResolvedConfig,
+  asset: EmittedFile,
+  type: 'assets' | 'chunks'
+): string {
+  const fileName = asset.fileName!
+  const workerMap = workerCache.get(config)!
+
+  if (workerMap[type].has(fileName)) {
+    return workerMap[type].get(fileName)!
+  }
+  const hash = ctx.emitFile(asset)
+  workerMap[type].set(fileName, hash)
+  workerMap.emitted.set(hash, fileName)
+  return hash
+}
+
+function emitWorkerAssets(
+  ctx: Rollup.TransformPluginContext,
+  config: ResolvedConfig,
+  asset: EmittedFile
+) {
+  const { format } = config.worker
+  return emitWorkerFile(
+    ctx,
+    config,
+    asset,
+    format === 'es' ? 'chunks' : 'assets'
+  )
+}
+
+function emitWorkerChunks(
+  ctx: Rollup.TransformPluginContext,
+  config: ResolvedConfig,
+  asset: EmittedFile
+) {
+  return emitWorkerFile(ctx, config, asset, 'chunks')
+}
 
 export async function bundleWorkerEntry(
   ctx: Rollup.TransformPluginContext,
   config: ResolvedConfig,
-  id: string
+  id: string,
+  query: Record<string, string> | null
 ): Promise<Buffer> {
   // bundle the file as entry to support imports
   const rollup = require('rollup') as typeof Rollup
@@ -26,22 +84,24 @@ export async function bundleWorkerEntry(
     },
     preserveEntrySignatures: false
   })
-  let code: string
+  let chunk: Rollup.OutputChunk
   try {
     const {
-      output: [outputCode, ...outputChunks]
+      output: [outputChunk, ...outputChunks]
     } = await bundle.generate({
       format,
       sourcemap: config.build.sourcemap
     })
-    code = outputCode.code
+    chunk = outputChunk
     outputChunks.forEach((outputChunk) => {
       if (outputChunk.type === 'asset') {
-        ctx.emitFile(outputChunk)
-      }
-      if (outputChunk.type === 'chunk') {
-        ctx.emitFile({
-          fileName: `${config.build.assetsDir}/${outputChunk.fileName}`,
+        emitWorkerAssets(ctx, config, outputChunk)
+      } else if (outputChunk.type === 'chunk') {
+        emitWorkerChunks(ctx, config, {
+          fileName: path.posix.join(
+            config.build.assetsDir,
+            outputChunk.fileName
+          ),
           source: outputChunk.code,
           type: 'asset'
         })
@@ -50,15 +110,104 @@ export async function bundleWorkerEntry(
   } finally {
     await bundle.close()
   }
+  return emitSourcemapForWorkerEntry(ctx, config, id, query, chunk)
+}
+
+function emitSourcemapForWorkerEntry(
+  context: TransformPluginContext,
+  config: ResolvedConfig,
+  id: string,
+  query: Record<string, string> | null,
+  chunk: Rollup.OutputChunk
+): Buffer {
+  let { code, map: sourcemap } = chunk
+  if (sourcemap) {
+    if (config.build.sourcemap === 'inline') {
+      // Manually add the sourcemap to the code if configured for inline sourcemaps.
+      // TODO: Remove when https://github.com/rollup/rollup/issues/3913 is resolved
+      // Currently seems that it won't be resolved until Rollup 3
+      const dataUrl = sourcemap.toUrl()
+      code += `//# sourceMappingURL=${dataUrl}`
+    } else if (
+      config.build.sourcemap === 'hidden' ||
+      config.build.sourcemap === true
+    ) {
+      const basename = path.parse(cleanUrl(id)).name
+      const data = sourcemap.toString()
+      const content = Buffer.from(data)
+      const contentHash = getAssetHash(content)
+      const fileName = `${basename}.${contentHash}.js.map`
+      const filePath = path.posix.join(config.build.assetsDir, fileName)
+      if (!context.cache.has(contentHash)) {
+        context.cache.set(contentHash, true)
+        context.emitFile({
+          fileName: filePath,
+          type: 'asset',
+          source: data
+        })
+      }
+
+      // Emit the comment that tells the JS debugger where it can find the
+      // sourcemap file.
+      // 'hidden' causes the sourcemap file to be created but
+      // the comment in the file to be omitted.
+      if (config.build.sourcemap === true) {
+        // inline web workers need to use the full sourcemap path
+        // non-inline web workers can use a relative path
+        const sourceMapUrl = query?.inline != null ? filePath : fileName
+        code += `//# sourceMappingURL=${sourceMapUrl}`
+      }
+    }
+  }
+
   return Buffer.from(code)
 }
 
+export async function workerFileToUrl(
+  ctx: Rollup.TransformPluginContext,
+  config: ResolvedConfig,
+  id: string,
+  query: Record<string, string> | null
+): Promise<string> {
+  const workerMap = workerCache.get(config)!
+
+  let hash = workerMap.bundle.get(id)
+  if (hash) {
+    // rewrite truth id, no need to replace by asset plugin
+    return config.base + workerMap.emitted.get(hash)!
+  }
+  const code = await bundleWorkerEntry(ctx, config, id, query)
+  const basename = path.parse(cleanUrl(id)).name
+  const contentHash = getAssetHash(code)
+  const fileName = path.posix.join(
+    config.build.assetsDir,
+    `${basename}.${contentHash}.js`
+  )
+  hash = emitWorkerAssets(ctx, config, {
+    fileName,
+    type: 'asset',
+    source: code
+  })
+  workerMap.bundle.set(id, hash)
+  return `__VITE_ASSET__${hash}__`
+}
+
 export function webWorkerPlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
+  const isWorker = config.isWorker
 
   return {
     name: 'vite:worker',
 
+    buildStart() {
+      workerCache.set(config, {
+        assets: new Map(),
+        chunks: new Map(),
+        bundle: new Map(),
+        emitted: new Map()
+      })
+    },
+
     load(id) {
       if (isBuild) {
         const parsedQuery = parseRequest(id)
@@ -87,12 +236,13 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       let url: string
       if (isBuild) {
-        const code = await bundleWorkerEntry(this, config, id)
         if (query.inline != null) {
+          const code = await bundleWorkerEntry(this, config, id, query)
           const { format } = config.worker
           const workerOptions = format === 'es' ? '{type: "module"}' : '{}'
           // inline as blob data url
-          return `const encodedJs = "${code.toString('base64')}";
+          return {
+            code: `const encodedJs = "${code.toString('base64')}";
             const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
             export default function WorkerWrapper() {
               const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
@@ -101,19 +251,13 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
               } finally {
                 objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
               }
-            }`
+            }`,
+
+            // Empty sourcemap to supress Rollup warning
+            map: { mappings: '' }
+          }
         } else {
-          const basename = path.parse(cleanUrl(id)).name
-          const contentHash = getAssetHash(code)
-          const fileName = path.posix.join(
-            config.build.assetsDir,
-            `${basename}.${contentHash}.js`
-          )
-          url = `__VITE_ASSET__${this.emitFile({
-            fileName,
-            type: 'asset',
-            source: code
-          })}__`
+          url = await workerFileToUrl(this, config, id, query)
         }
       } else {
         url = await fileToUrl(cleanUrl(id), config, this)
@@ -124,11 +268,20 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         query.sharedworker != null ? 'SharedWorker' : 'Worker'
       const workerOptions = { type: 'module' }
 
-      return `export default function WorkerWrapper() {
-        return new ${workerConstructor}(${JSON.stringify(
-        url
-      )}, ${JSON.stringify(workerOptions, null, 2)})
-      }`
+      return {
+        code: `export default function WorkerWrapper() {
+          return new ${workerConstructor}(${JSON.stringify(
+          url
+        )}, ${JSON.stringify(workerOptions, null, 2)})
+        }`,
+        map: { mappings: '' } // Empty sourcemap to supress Rolup warning
+      }
+    },
+
+    renderChunk(code) {
+      if (isWorker && code.includes('import.meta.url')) {
+        return code.replace('import.meta.url', 'self.location.href')
+      }
     }
   }
 }
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 233d83d066bcb7..c8ab20fe21694c 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -1,42 +1,34 @@
 import JSON5 from 'json5'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { getAssetHash, fileToUrl } from './asset'
-import {
-  blankReplacer,
-  cleanUrl,
-  injectQuery,
-  multilineCommentsRE,
-  singlelineCommentsRE
-} from '../utils'
+import { fileToUrl } from './asset'
+import { cleanUrl, injectQuery } from '../utils'
 import path from 'path'
-import { bundleWorkerEntry } from './worker'
+import { workerFileToUrl } from './worker'
 import { parseRequest } from '../utils'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import MagicString from 'magic-string'
 import type { ViteDevServer } from '..'
 import type { RollupError } from 'rollup'
+import { emptyString } from '../cleanString'
 
 type WorkerType = 'classic' | 'module' | 'ignore'
+const ignoreFlagRE = /\/\*\s*@vite-ignore\s*\*\//
 
 const WORKER_FILE_ID = 'worker_url_file'
 
-function getWorkerType(
-  code: string,
-  noCommentsCode: string,
-  i: number
-): WorkerType {
+function getWorkerType(raw: string, clean: string, i: number): WorkerType {
   function err(e: string, pos: number) {
     const error = new Error(e) as RollupError
     error.pos = pos
     throw error
   }
 
-  const commaIndex = noCommentsCode.indexOf(',', i)
+  const commaIndex = clean.indexOf(',', i)
   if (commaIndex === -1) {
     return 'classic'
   }
-  const endIndex = noCommentsCode.indexOf(')', i)
+  const endIndex = clean.indexOf(')', i)
 
   // case: ') ... ,' mean no worker options params
   if (commaIndex > endIndex) {
@@ -44,22 +36,22 @@ function getWorkerType(
   }
 
   // need to find in comment code
-  let workerOptsString = code.substring(commaIndex + 1, endIndex)
+  const workerOptString = raw.substring(commaIndex + 1, endIndex)
 
-  const hasViteIgnore = /\/\*\s*@vite-ignore\s*\*\//.test(workerOptsString)
+  const hasViteIgnore = ignoreFlagRE.test(workerOptString)
   if (hasViteIgnore) {
     return 'ignore'
   }
 
   // need to find in no comment code
-  workerOptsString = noCommentsCode.substring(commaIndex + 1, endIndex)
-  if (!workerOptsString.trim().length) {
+  const cleanWorkerOptString = clean.substring(commaIndex + 1, endIndex)
+  if (!cleanWorkerOptString.trim().length) {
     return 'classic'
   }
 
   let workerOpts: { type: WorkerType } = { type: 'classic' }
   try {
-    workerOpts = JSON5.parse(workerOptsString)
+    workerOpts = JSON5.parse(workerOptString)
   } catch (e) {
     // can't parse by JSON5, so the worker options had unexpect char.
     err(
@@ -112,22 +104,25 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           code: injectEnv + code
         }
       }
+      let s: MagicString | undefined
       if (
         (code.includes('new Worker') || code.includes('new ShareWorker')) &&
         code.includes('new URL') &&
         code.includes(`import.meta.url`)
       ) {
-        const importMetaUrlRE =
+        const cleanString = emptyString(code)
+        const workerImportMetaUrlRE =
           /\bnew\s+(Worker|SharedWorker)\s*\(\s*(new\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*\))/g
-        const noCommentsCode = code
-          .replace(multilineCommentsRE, blankReplacer)
-          .replace(singlelineCommentsRE, blankReplacer)
+
         let match: RegExpExecArray | null
-        let s: MagicString | null = null
-        while ((match = importMetaUrlRE.exec(noCommentsCode))) {
-          const { 0: allExp, 2: exp, 3: rawUrl, index } = match
+        while ((match = workerImportMetaUrlRE.exec(cleanString))) {
+          const { 0: allExp, 2: exp, 3: emptyUrl, index } = match
           const urlIndex = allExp.indexOf(exp) + index
 
+          const urlStart = cleanString.indexOf(emptyUrl, index)
+          const urlEnd = urlStart + emptyUrl.length
+          const rawUrl = code.slice(urlStart, urlEnd)
+
           if (options?.ssr) {
             this.error(
               `\`new URL(url, import.meta.url)\` is not supported in SSR.`,
@@ -146,24 +141,13 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s ||= new MagicString(code)
           const workerType = getWorkerType(
             code,
-            noCommentsCode,
+            cleanString,
             index + allExp.length
           )
           const file = path.resolve(path.dirname(id), rawUrl.slice(1, -1))
           let url: string
           if (isBuild) {
-            const content = await bundleWorkerEntry(this, config, file)
-            const basename = path.parse(cleanUrl(file)).name
-            const contentHash = getAssetHash(content)
-            const fileName = path.posix.join(
-              config.build.assetsDir,
-              `${basename}.${contentHash}.js`
-            )
-            url = `__VITE_ASSET__${this.emitFile({
-              fileName,
-              type: 'asset',
-              source: content
-            })}__`
+            url = await workerFileToUrl(this, config, file, query)
           } else {
             url = await fileToUrl(cleanUrl(file), config, this)
             url = injectQuery(url, WORKER_FILE_ID)
@@ -173,12 +157,14 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             contentOnly: true
           })
         }
+
         if (s) {
           return {
             code: s.toString(),
             map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
           }
         }
+
         return null
       }
     }
diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts
index 56dee04e2e2e07..c00f62a9cb8f0c 100644
--- a/packages/vite/src/node/preview.ts
+++ b/packages/vite/src/node/preview.ts
@@ -78,8 +78,9 @@ export async function preview(
   }
 
   // proxy
-  if (config.preview.proxy) {
-    app.use(proxyMiddleware(httpServer, config))
+  const { proxy } = config.preview
+  if (proxy) {
+    app.use(proxyMiddleware(httpServer, proxy, config))
   }
 
   app.use(compression())
diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts
index edb73785247b6f..8d33554706dee2 100644
--- a/packages/vite/src/node/server/hmr.ts
+++ b/packages/vite/src/node/server/hmr.ts
@@ -18,7 +18,7 @@ const normalizedClientDir = normalizePath(CLIENT_DIR)
 export interface HmrOptions {
   protocol?: string
   host?: string
-  port?: number | false
+  port?: number
   clientPort?: number
   path?: string
   timeout?: number
@@ -44,6 +44,7 @@ export async function handleHMRUpdate(
 ): Promise<any> {
   const { ws, config, moduleGraph } = server
   const shortFile = getShortName(file, config.root)
+  const fileName = path.basename(file)
 
   const isConfig = file === config.configFile
   const isConfigDependency = config.configFileDependencies.some(
@@ -51,7 +52,7 @@ export async function handleHMRUpdate(
   )
   const isEnv =
     config.inlineConfig.envFile !== false &&
-    (file === '.env' || file.startsWith('.env.'))
+    (fileName === '.env' || fileName.startsWith('.env.'))
   if (isConfig || isConfigDependency || isEnv) {
     // auto restart server
     debugHmr(`[config change] ${colors.dim(shortFile)}`)
@@ -225,6 +226,13 @@ function propagateUpdate(
   }>,
   currentChain: ModuleNode[] = [node]
 ): boolean /* hasDeadEnd */ {
+  // #7561
+  // if the imports of `node` have not been analyzed, then `node` has not
+  // been loaded in the browser and we should stop propagation.
+  if (node.id && node.isSelfAccepting === undefined) {
+    return false
+  }
+
   if (node.isSelfAccepting) {
     boundaries.add({
       boundary: node,
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index e8d4c3f1e5626d..de80ac1147ff0f 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -516,7 +516,7 @@ export async function createServer(
   // proxy
   const { proxy } = serverConfig
   if (proxy) {
-    middlewares.use(proxyMiddleware(httpServer, config))
+    middlewares.use(proxyMiddleware(httpServer, proxy, config))
   }
 
   // base
@@ -607,7 +607,7 @@ async function startServer(
   }
 
   const options = server.config.server
-  const port = inlinePort || options.port || 3000
+  const port = inlinePort ?? options.port ?? 3000
   const hostname = resolveHostname(options.host)
 
   const protocol = options.https ? 'https' : 'http'
diff --git a/packages/vite/src/node/server/middlewares/compression.ts b/packages/vite/src/node/server/middlewares/compression.ts
index 7a97044985ac0e..bafae7ef2023c6 100644
--- a/packages/vite/src/node/server/middlewares/compression.ts
+++ b/packages/vite/src/node/server/middlewares/compression.ts
@@ -13,7 +13,7 @@ const noop = () => {}
 const mimes = /text|javascript|\/json|xml/i
 const threshold = 1024
 const level = -1
-const brotli = false
+let brotli = false
 const gzip = true
 
 const getChunkSize = (chunk, enc) => (chunk ? Buffer.byteLength(chunk, enc) : 0)
diff --git a/packages/vite/src/node/server/middlewares/proxy.ts b/packages/vite/src/node/server/middlewares/proxy.ts
index aa1100f13d5229..97de98a8331a7a 100644
--- a/packages/vite/src/node/server/middlewares/proxy.ts
+++ b/packages/vite/src/node/server/middlewares/proxy.ts
@@ -5,7 +5,7 @@ import { HMR_HEADER } from '../ws'
 import type { Connect } from 'types/connect'
 import type { HttpProxy } from 'types/http-proxy'
 import colors from 'picocolors'
-import type { ResolvedConfig } from '../..'
+import type { CommonServerOptions, ResolvedConfig } from '../..'
 
 const debug = createDebugger('vite:proxy')
 
@@ -30,10 +30,9 @@ export interface ProxyOptions extends HttpProxy.ServerOptions {
 
 export function proxyMiddleware(
   httpServer: http.Server | null,
+  options: NonNullable<CommonServerOptions['proxy']>,
   config: ResolvedConfig
 ): Connect.NextHandleFunction {
-  const options = config.server.proxy!
-
   // lazy require only when proxy is used
   const proxies: Record<string, [HttpProxy.Server, ProxyOptions]> = {}
 
diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
index a6623338783cc8..5fb4f7fad2e055 100644
--- a/packages/vite/src/node/server/middlewares/static.ts
+++ b/packages/vite/src/node/server/middlewares/static.ts
@@ -111,7 +111,7 @@ export function serveRawFsMiddleware(
 
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return function viteServeRawFsMiddleware(req, res, next) {
-    let url = req.url!
+    let url = decodeURI(req.url!)
     // In some cases (e.g. linked monorepos) files outside of root will
     // reference assets that are also out of served root. In such cases
     // the paths are rewritten to `/@fs/` prefixed paths and must be served by
diff --git a/packages/vite/src/node/server/moduleGraph.ts b/packages/vite/src/node/server/moduleGraph.ts
index 44e76deef98b6f..e470fafb05d8fd 100644
--- a/packages/vite/src/node/server/moduleGraph.ts
+++ b/packages/vite/src/node/server/moduleGraph.ts
@@ -27,7 +27,7 @@ export class ModuleNode {
   importers = new Set<ModuleNode>()
   importedModules = new Set<ModuleNode>()
   acceptedHmrDeps = new Set<ModuleNode>()
-  isSelfAccepting = false
+  isSelfAccepting?: boolean
   transformResult: TransformResult | null = null
   ssrTransformResult: TransformResult | null = null
   ssrModule: Record<string, any> | null = null
diff --git a/packages/vite/src/node/server/ws.ts b/packages/vite/src/node/server/ws.ts
index a01d0bd3225571..6d4e66ec1a22ae 100644
--- a/packages/vite/src/node/server/ws.ts
+++ b/packages/vite/src/node/server/ws.ts
@@ -5,6 +5,7 @@ import type { ServerOptions as HttpsServerOptions } from 'https'
 import { createServer as createHttpsServer } from 'https'
 import type { ServerOptions, WebSocket as WebSocketRaw } from 'ws'
 import { WebSocketServer as WebSocketServerRaw } from 'ws'
+import type { WebSocket as WebSocketTypes } from 'types/ws'
 import type { CustomPayload, ErrorPayload, HMRPayload } from 'types/hmrPayload'
 import type { InferCustomEventPayload } from 'types/customEvent'
 import type { ResolvedConfig } from '..'
@@ -38,7 +39,7 @@ export interface WebSocketServer {
   /**
    * Handle custom event emitted by `import.meta.hot.send`
    */
-  on: WebSocketServerRaw['on'] & {
+  on: WebSocketTypes.Server['on'] & {
     <T extends string>(
       event: T,
       listener: WebSocketCustomListener<InferCustomEventPayload<T>>
@@ -47,7 +48,7 @@ export interface WebSocketServer {
   /**
    * Unregister event listener.
    */
-  off: WebSocketServerRaw['off'] & {
+  off: WebSocketTypes.Server['off'] & {
     (event: string, listener: Function): void
   }
 }
@@ -65,7 +66,7 @@ export interface WebSocketClient {
    * The raw WebSocket instance
    * @advanced
    */
-  socket: WebSocketRaw
+  socket: WebSocketTypes
 }
 
 const wsServerEvents = [
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index edb3410751868a..16391df8c73df3 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -83,6 +83,7 @@ export function resolveFrom(
 ): string {
   return resolve.sync(id, {
     basedir,
+    paths: [],
     extensions: ssr ? ssrExtensions : DEFAULT_EXTENSIONS,
     // necessary to work with pnpm
     preserveSymlinks: preserveSymlinks || isRunningWithYarnPnp || false
diff --git a/packages/vite/types/customEvent.d.ts b/packages/vite/types/customEvent.d.ts
index aacf1554b0de75..af4db5d14fbe97 100644
--- a/packages/vite/types/customEvent.d.ts
+++ b/packages/vite/types/customEvent.d.ts
@@ -13,4 +13,4 @@ export interface CustomEventMap {
 }
 
 export type InferCustomEventPayload<T extends string> =
-  T extends keyof CustomEventMap ? CustomEventMap[T] : unknown
+  T extends keyof CustomEventMap ? CustomEventMap[T] : any
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22de761586a2f2..fbc05e51fbfc7a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,77 +4,79 @@ overrides:
   vite: workspace:*
   '@vitejs/plugin-vue': workspace:*
 
+packageExtensionsChecksum: 696422bac84dd936748019990f84746e
+
 importers:
 
   .:
     specifiers:
-      '@microsoft/api-extractor': ^7.19.5
+      '@microsoft/api-extractor': ^7.21.2
       '@types/fs-extra': ^9.0.13
       '@types/jest': ^27.4.1
       '@types/node': ^16.11.26
       '@types/prompts': ^2.0.14
       '@types/semver': ^7.3.9
-      '@typescript-eslint/eslint-plugin': ^5.16.0
-      '@typescript-eslint/parser': ^5.16.0
+      '@typescript-eslint/eslint-plugin': ^5.18.0
+      '@typescript-eslint/parser': ^5.18.0
       conventional-changelog-cli: ^2.2.2
       cross-env: ^7.0.3
       esbuild: ^0.14.27
-      eslint: ^8.11.0
+      eslint: ^8.13.0
       eslint-define-config: ^1.3.0
       eslint-plugin-node: ^11.1.0
       execa: ^5.1.1
       fs-extra: ^10.0.1
       jest: ^27.5.1
       lint-staged: ^12.3.7
-      minimist: ^1.2.5
+      minimist: ^1.2.6
       node-fetch: ^2.6.6
       npm-run-all: ^4.1.5
       picocolors: ^1.0.0
-      playwright-chromium: ^1.20.0
-      prettier: 2.6.0
+      playwright-chromium: ^1.20.2
+      prettier: 2.6.2
       prompts: ^2.4.2
       rimraf: ^3.0.2
       rollup: ^2.59.0
-      semver: ^7.3.5
+      semver: ^7.3.6
       simple-git-hooks: ^2.7.0
       sirv: ^2.0.2
-      ts-jest: ^27.1.3
+      ts-jest: ^27.1.4
       ts-node: ^10.4.0
       typescript: ~4.5.4
       vite: workspace:*
       vitepress: ^0.22.3
     devDependencies:
-      '@microsoft/api-extractor': 7.19.5
+      '@microsoft/api-extractor': 7.21.2
       '@types/fs-extra': 9.0.13
       '@types/jest': 27.4.1
       '@types/node': 16.11.26
       '@types/prompts': 2.0.14
       '@types/semver': 7.3.9
-      '@typescript-eslint/eslint-plugin': 5.16.0_1324a086488ab25887f801dfb12f1aba
-      '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.5.4
+      '@typescript-eslint/eslint-plugin': 5.18.0_423061f51ca07e3dd1eb999a8074f5cd
+      '@typescript-eslint/parser': 5.18.0_eslint@8.13.0+typescript@4.5.4
       conventional-changelog-cli: 2.2.2
       cross-env: 7.0.3
       esbuild: 0.14.27
-      eslint: 8.11.0
+      eslint: 8.13.0
       eslint-define-config: 1.3.0
-      eslint-plugin-node: 11.1.0_eslint@8.11.0
+      eslint-plugin-node: 11.1.0_eslint@8.13.0
       execa: 5.1.1
       fs-extra: 10.0.1
       jest: 27.5.1_ts-node@10.4.0
       lint-staged: 12.3.7
-      minimist: 1.2.5
+      minimist: 1.2.6
       node-fetch: 2.6.6
       npm-run-all: 4.1.5
       picocolors: 1.0.0
-      playwright-chromium: 1.20.0
-      prettier: 2.6.0
+      playwright-chromium: 1.20.2
+      prettier: 2.6.2
       prompts: 2.4.2
       rimraf: 3.0.2
       rollup: 2.62.0
-      semver: 7.3.5
+      semver: 7.3.6
       simple-git-hooks: 2.7.0
       sirv: 2.0.2
-      ts-jest: 27.1.3_4dfe14e0e8266437469ae0475a5c09ac
+      ts-jest: 27.1.4_4dfe14e0e8266437469ae0475a5c09ac
       ts-node: 10.4.0_44ef5af6cbbc24239b4e70b5c7b0d7a6
       typescript: 4.5.4
       vite: link:packages/vite
@@ -83,17 +85,19 @@ importers:
   packages/create-vite:
     specifiers:
       kolorist: ^1.5.1
-      minimist: ^1.2.5
+      minimist: ^1.2.6
       prompts: ^2.4.2
     dependencies:
       kolorist: 1.5.1
-      minimist: 1.2.5
+      minimist: 1.2.6
       prompts: 2.4.2
 
   packages/playground:
     specifiers:
+      convert-source-map: ^1.8.0
       css-color-names: ^1.0.1
     devDependencies:
+      convert-source-map: 1.8.0
       css-color-names: 1.0.1
 
   packages/playground/alias:
@@ -152,13 +156,11 @@ importers:
 
   packages/playground/css-sourcemap:
     specifiers:
-      convert-source-map: ^1.8.0
       less: ^4.1.2
       magic-string: ^0.25.7
       sass: ^1.43.4
       stylus: ^0.55.0
     devDependencies:
-      convert-source-map: 1.8.0
       less: 4.1.2
       magic-string: 0.25.7
       sass: 1.45.1
@@ -223,6 +225,9 @@ importers:
   packages/playground/html:
     specifiers: {}
 
+  packages/playground/js-sourcemap:
+    specifiers: {}
+
   packages/playground/json:
     specifiers:
       json-module: file:./json-module
@@ -456,7 +461,8 @@ importers:
       '@babel/runtime': ^7.16.0
       es5-ext: 0.10.53
       normalize.css: ^8.0.1
-      require-pkg-with-module-field: link:./require-pkg-with-module-field
+      require-pkg-with-browser-and-module-field: link:./require-pkg-with-browser-and-module-field
+      require-pkg-with-esm-entries: link:./require-pkg-with-esm-entries
       resolve-browser-field: link:./browser-field
       resolve-custom-condition: link:./custom-condition
       resolve-custom-main-field: link:./custom-main-field
@@ -467,7 +473,8 @@ importers:
       '@babel/runtime': 7.16.5
       es5-ext: 0.10.53
       normalize.css: 8.0.1
-      require-pkg-with-module-field: link:require-pkg-with-module-field
+      require-pkg-with-browser-and-module-field: link:require-pkg-with-browser-and-module-field
+      require-pkg-with-esm-entries: link:require-pkg-with-esm-entries
       resolve-browser-field: link:browser-field
       resolve-custom-condition: link:custom-condition
       resolve-custom-main-field: link:custom-main-field
@@ -499,12 +506,18 @@ importers:
   packages/playground/resolve/inline-package:
     specifiers: {}
 
-  packages/playground/resolve/require-pkg-with-module-field:
+  packages/playground/resolve/require-pkg-with-browser-and-module-field:
     specifiers:
       bignumber.js: 9.0.2
     dependencies:
       bignumber.js: 9.0.2
 
+  packages/playground/resolve/require-pkg-with-esm-entries:
+    specifiers:
+      callbag-from-event: 1.3.0
+    dependencies:
+      callbag-from-event: 1.3.0
+
   packages/playground/ssr-deps:
     specifiers:
       bcrypt: ^5.0.1
@@ -661,6 +674,12 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue': link:../../plugin-vue
 
+  packages/playground/tailwind-sourcemap:
+    specifiers:
+      tailwindcss: ^3.0.23
+    dependencies:
+      tailwindcss: 3.0.23_ts-node@10.4.0
+
   packages/playground/tsconfig-json:
     specifiers: {}
 
@@ -711,7 +730,6 @@ importers:
   packages/playground/vue-sourcemap:
     specifiers:
       '@vitejs/plugin-vue': workspace:*
-      convert-source-map: ^1.8.0
       less: ^4.1.2
       sass: ^1.43.4
       vue: ^3.2.31
@@ -719,7 +737,6 @@ importers:
       vue: 3.2.31
     devDependencies:
       '@vitejs/plugin-vue': link:../../plugin-vue
-      convert-source-map: 1.8.0
       less: 4.1.2
       sass: 1.45.1
 
@@ -734,13 +751,13 @@ importers:
 
   packages/plugin-legacy:
     specifiers:
-      '@babel/standalone': ^7.17.8
+      '@babel/standalone': ^7.17.9
       core-js: ^3.21.1
       magic-string: ^0.26.1
       regenerator-runtime: ^0.13.9
       systemjs: ^6.12.1
     dependencies:
-      '@babel/standalone': 7.17.8
+      '@babel/standalone': 7.17.9
       core-js: 3.21.1
       magic-string: 0.26.1
       regenerator-runtime: 0.13.9
@@ -748,22 +765,22 @@ importers:
 
   packages/plugin-react:
     specifiers:
-      '@babel/core': ^7.17.8
+      '@babel/core': ^7.17.9
       '@babel/plugin-transform-react-jsx': ^7.17.3
       '@babel/plugin-transform-react-jsx-development': ^7.16.7
       '@babel/plugin-transform-react-jsx-self': ^7.16.7
       '@babel/plugin-transform-react-jsx-source': ^7.16.7
       '@rollup/pluginutils': ^4.2.0
-      react-refresh: ^0.11.0
+      react-refresh: ^0.12.0
       resolve: ^1.22.0
     dependencies:
-      '@babel/core': 7.17.8
-      '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.17.8
-      '@babel/plugin-transform-react-jsx-development': 7.16.7_@babel+core@7.17.8
-      '@babel/plugin-transform-react-jsx-self': 7.16.7_@babel+core@7.17.8
-      '@babel/plugin-transform-react-jsx-source': 7.16.7_@babel+core@7.17.8
+      '@babel/core': 7.17.9
+      '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.17.9
+      '@babel/plugin-transform-react-jsx-development': 7.16.7_@babel+core@7.17.9
+      '@babel/plugin-transform-react-jsx-self': 7.16.7_@babel+core@7.17.9
+      '@babel/plugin-transform-react-jsx-source': 7.16.7_@babel+core@7.17.9
       '@rollup/pluginutils': 4.2.0
-      react-refresh: 0.11.0
+      react-refresh: 0.12.0
       resolve: 1.22.0
 
   packages/plugin-vue:
@@ -788,28 +805,28 @@ importers:
 
   packages/plugin-vue-jsx:
     specifiers:
-      '@babel/core': ^7.17.8
+      '@babel/core': ^7.17.9
       '@babel/plugin-syntax-import-meta': ^7.10.4
       '@babel/plugin-transform-typescript': ^7.16.8
       '@rollup/pluginutils': ^4.2.0
       '@vue/babel-plugin-jsx': ^1.1.1
       hash-sum: ^2.0.0
     dependencies:
-      '@babel/core': 7.17.8
-      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.17.8
-      '@babel/plugin-transform-typescript': 7.16.8_@babel+core@7.17.8
+      '@babel/core': 7.17.9
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.17.9
+      '@babel/plugin-transform-typescript': 7.16.8_@babel+core@7.17.9
       '@rollup/pluginutils': 4.2.0
-      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.17.8
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.17.9
       hash-sum: 2.0.0
 
   packages/vite:
     specifiers:
       '@ampproject/remapping': ^2.1.2
-      '@babel/parser': ^7.17.8
+      '@babel/parser': ^7.17.9
       '@babel/types': ^7.17.0
       '@jridgewell/trace-mapping': ^0.3.4
       '@rollup/plugin-alias': ^3.1.9
-      '@rollup/plugin-commonjs': ^21.0.2
+      '@rollup/plugin-commonjs': ^21.0.3
       '@rollup/plugin-dynamic-import-vars': ^1.4.2
       '@rollup/plugin-json': ^4.1.0
       '@rollup/plugin-node-resolve': 13.1.3
@@ -826,7 +843,7 @@ importers:
       '@types/node': ^16.11.26
       '@types/resolve': ^1.20.1
       '@types/sass': ~1.43.1
-      '@types/stylus': ^0.48.36
+      '@types/stylus': ^0.48.37
       '@types/ws': ^8.5.3
       '@vue/compiler-dom': ^3.2.31
       acorn: ^8.7.0
@@ -840,7 +857,7 @@ importers:
       debug: ^4.3.4
       dotenv: ^14.3.2
       dotenv-expand: ^5.1.0
-      es-module-lexer: ^0.10.4
+      es-module-lexer: ^0.10.5
       esbuild: ^0.14.27
       estree-walker: ^2.0.2
       etag: ^1.8.1
@@ -850,16 +867,16 @@ importers:
       json5: ^2.2.1
       launch-editor-middleware: ^2.3.0
       magic-string: ^0.26.1
-      micromatch: ^4.0.4
+      micromatch: ^4.0.5
       mrmime: ^1.0.0
-      node-forge: ^1.3.0
+      node-forge: ^1.3.1
       okie: ^1.0.1
       open: ^8.4.0
       periscopic: ^2.0.3
       picocolors: ^1.0.0
       postcss: ^8.4.12
-      postcss-import: ^14.0.2
-      postcss-load-config: ^3.1.3
+      postcss-import: ^14.1.0
+      postcss-load-config: ^3.1.4
       postcss-modules: ^4.3.1
       resolve: ^1.22.0
       resolve.exports: ^1.1.0
@@ -870,7 +887,7 @@ importers:
       source-map-support: ^0.5.21
       strip-ansi: ^6.0.1
       terser: ^5.12.1
-      tsconfck: ^1.2.1
+      tsconfck: ^1.2.2
       tslib: ^2.3.1
       types: link:./types
       ws: ^8.5.0
@@ -883,11 +900,11 @@ importers:
       fsevents: 2.3.2
     devDependencies:
       '@ampproject/remapping': 2.1.2
-      '@babel/parser': 7.17.8
+      '@babel/parser': 7.17.9
       '@babel/types': 7.17.0
       '@jridgewell/trace-mapping': 0.3.4
       '@rollup/plugin-alias': 3.1.9_rollup@2.62.0
-      '@rollup/plugin-commonjs': 21.0.2_rollup@2.62.0
+      '@rollup/plugin-commonjs': 21.0.3_rollup@2.62.0
       '@rollup/plugin-dynamic-import-vars': 1.4.2_rollup@2.62.0
       '@rollup/plugin-json': 4.1.0_rollup@2.62.0
       '@rollup/plugin-node-resolve': 13.1.3_rollup@2.62.0
@@ -904,7 +921,7 @@ importers:
       '@types/node': 16.11.26
       '@types/resolve': 1.20.1
       '@types/sass': 1.43.1
-      '@types/stylus': 0.48.36
+      '@types/stylus': 0.48.37
       '@types/ws': 8.5.3
       '@vue/compiler-dom': 3.2.31
       acorn: 8.7.0
@@ -918,7 +935,7 @@ importers:
       debug: 4.3.4
       dotenv: 14.3.2
       dotenv-expand: 5.1.0
-      es-module-lexer: 0.10.4
+      es-module-lexer: 0.10.5
       estree-walker: 2.0.2
       etag: 1.8.1
       fast-glob: 3.2.11
@@ -926,15 +943,15 @@ importers:
       json5: 2.2.1
       launch-editor-middleware: 2.3.0
       magic-string: 0.26.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
       mrmime: 1.0.0
-      node-forge: 1.3.0
+      node-forge: 1.3.1
       okie: 1.0.1
       open: 8.4.0
       periscopic: 2.0.3
       picocolors: 1.0.0
-      postcss-import: 14.0.2_postcss@8.4.12
-      postcss-load-config: 3.1.3_ts-node@10.4.0
+      postcss-import: 14.1.0_postcss@8.4.12
+      postcss-load-config: 3.1.4_postcss@8.4.12+ts-node@10.4.0
       postcss-modules: 4.3.1_postcss@8.4.12
       resolve.exports: 1.1.0
       rollup-plugin-license: 2.6.1_rollup@2.62.0
@@ -943,7 +960,7 @@ importers:
       source-map-support: 0.5.21
       strip-ansi: 6.0.1
       terser: 5.12.1
-      tsconfck: 1.2.1_typescript@4.5.4
+      tsconfck: 1.2.2_typescript@4.5.4
       tslib: 2.3.1
       types: link:types
       ws: 8.5.0
@@ -1112,30 +1129,30 @@ packages:
       convert-source-map: 1.8.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
-      json5: 2.2.0
+      json5: 2.2.1
       semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/core/7.17.8:
-    resolution: {integrity: sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==}
+  /@babel/core/7.17.9:
+    resolution: {integrity: sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.1.2
       '@babel/code-frame': 7.16.7
-      '@babel/generator': 7.17.7
-      '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.17.8
+      '@babel/generator': 7.17.9
+      '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.17.9
       '@babel/helper-module-transforms': 7.17.7
-      '@babel/helpers': 7.17.8
-      '@babel/parser': 7.17.8
+      '@babel/helpers': 7.17.9
+      '@babel/parser': 7.17.9
       '@babel/template': 7.16.7
-      '@babel/traverse': 7.17.3
+      '@babel/traverse': 7.17.9
       '@babel/types': 7.17.0
       convert-source-map: 1.8.0
-      debug: 4.3.3
+      debug: 4.3.4
       gensync: 1.0.0-beta.2
-      json5: 2.2.0
+      json5: 2.2.1
       semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
@@ -1168,8 +1185,8 @@ packages:
       source-map: 0.5.7
     dev: true
 
-  /@babel/generator/7.17.7:
-    resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==}
+  /@babel/generator/7.17.9:
+    resolution: {integrity: sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.17.0
@@ -1197,26 +1214,26 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.8:
+  /@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/compat-data': 7.17.7
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-validator-option': 7.16.7
       browserslist: 4.19.1
       semver: 6.3.0
     dev: false
 
-  /@babel/helper-create-class-features-plugin/7.16.10_@babel+core@7.17.8:
+  /@babel/helper-create-class-features-plugin/7.16.10_@babel+core@7.17.9:
     resolution: {integrity: sha512-wDeej0pu3WN/ffTxMNCPW5UCiOav8IcLRxSIyp/9+IF2xJUM9h/OYjg0IJLHaL6F8oU8kqMz9nc1vryXhMsgXg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-annotate-as-pure': 7.16.7
       '@babel/helper-environment-visitor': 7.16.7
       '@babel/helper-function-name': 7.16.7
@@ -1242,6 +1259,14 @@ packages:
       '@babel/template': 7.16.7
       '@babel/types': 7.17.0
 
+  /@babel/helper-function-name/7.17.9:
+    resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.16.7
+      '@babel/types': 7.17.0
+    dev: false
+
   /@babel/helper-get-function-arity/7.16.7:
     resolution: {integrity: sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==}
     engines: {node: '>=6.9.0'}
@@ -1306,7 +1331,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.16.7
       '@babel/helper-validator-identifier': 7.16.7
       '@babel/template': 7.16.7
-      '@babel/traverse': 7.17.3
+      '@babel/traverse': 7.17.9
       '@babel/types': 7.17.0
     transitivePeerDependencies:
       - supports-color
@@ -1383,12 +1408,12 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helpers/7.17.8:
-    resolution: {integrity: sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==}
+  /@babel/helpers/7.17.9:
+    resolution: {integrity: sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.16.7
-      '@babel/traverse': 7.17.3
+      '@babel/traverse': 7.17.9
       '@babel/types': 7.17.0
     transitivePeerDependencies:
       - supports-color
@@ -1432,6 +1457,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  /@babel/parser/7.17.9:
+    resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   /@babel/plugin-proposal-pipeline-operator/7.16.5:
     resolution: {integrity: sha512-aMw3gPJYa2F6mVnL6QuHr9NtAScspBPTVXU2kaup7FVl02Hr4tY2diaGNdismAOmiroWa/2ENy4EFyoz81ACLg==}
     engines: {node: '>=6.9.0'}
@@ -1478,12 +1508,12 @@ packages:
       '@babel/helper-plugin-utils': 7.16.5
     dev: true
 
-  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.17.8:
+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.17.9:
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-plugin-utils': 7.16.5
     dev: false
 
@@ -1505,23 +1535,23 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
-  /@babel/plugin-syntax-jsx/7.16.5_@babel+core@7.17.8:
+  /@babel/plugin-syntax-jsx/7.16.5_@babel+core@7.17.9:
     resolution: {integrity: sha512-42OGssv9NPk4QHKVgIHlzeLgPOW5rGgfV5jzG90AhcXXIv6hu/eqj63w4VgvRxdvZY3AlYeDgPiSJ3BqAd1Y6Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
 
-  /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.8:
+  /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
 
@@ -1608,70 +1638,70 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
-  /@babel/plugin-syntax-typescript/7.16.7_@babel+core@7.17.8:
+  /@babel/plugin-syntax-typescript/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
 
-  /@babel/plugin-transform-react-jsx-development/7.16.7_@babel+core@7.17.8:
+  /@babel/plugin-transform-react-jsx-development/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
-      '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.17.8
+      '@babel/core': 7.17.9
+      '@babel/plugin-transform-react-jsx': 7.17.3_@babel+core@7.17.9
     dev: false
 
-  /@babel/plugin-transform-react-jsx-self/7.16.7_@babel+core@7.17.8:
+  /@babel/plugin-transform-react-jsx-self/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
 
-  /@babel/plugin-transform-react-jsx-source/7.16.7_@babel+core@7.17.8:
+  /@babel/plugin-transform-react-jsx-source/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-plugin-utils': 7.16.7
     dev: false
 
-  /@babel/plugin-transform-react-jsx/7.17.3_@babel+core@7.17.8:
+  /@babel/plugin-transform-react-jsx/7.17.3_@babel+core@7.17.9:
     resolution: {integrity: sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
+      '@babel/core': 7.17.9
       '@babel/helper-annotate-as-pure': 7.16.7
       '@babel/helper-module-imports': 7.16.7
       '@babel/helper-plugin-utils': 7.16.7
-      '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.17.8
+      '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.17.9
       '@babel/types': 7.17.0
     dev: false
 
-  /@babel/plugin-transform-typescript/7.16.8_@babel+core@7.17.8:
+  /@babel/plugin-transform-typescript/7.16.8_@babel+core@7.17.9:
     resolution: {integrity: sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.17.8
-      '@babel/helper-create-class-features-plugin': 7.16.10_@babel+core@7.17.8
+      '@babel/core': 7.17.9
+      '@babel/helper-create-class-features-plugin': 7.16.10_@babel+core@7.17.9
       '@babel/helper-plugin-utils': 7.16.7
-      '@babel/plugin-syntax-typescript': 7.16.7_@babel+core@7.17.8
+      '@babel/plugin-syntax-typescript': 7.16.7_@babel+core@7.17.9
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -1682,8 +1712,8 @@ packages:
     dependencies:
       regenerator-runtime: 0.13.9
 
-  /@babel/standalone/7.17.8:
-    resolution: {integrity: sha512-tr3SDpVnxR/fzrxyG+HZPAyEA9eTHZIAjy4eqrc7m+KBwsdo1YvTbUfJ6teWHQ177mk6GmdmltsIiOYCcvRPWA==}
+  /@babel/standalone/7.17.9:
+    resolution: {integrity: sha512-9wL9AtDlga8avxUrBvQJmhUtJWrelsUL0uV+TcP+49Sb6Pj8/bNIzQzU4dDp0NAPOvnZR/7msFIKsKoCl/W1/w==}
     engines: {node: '>=6.9.0'}
     dev: false
 
@@ -1758,19 +1788,19 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/traverse/7.17.3:
-    resolution: {integrity: sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==}
+  /@babel/traverse/7.17.9:
+    resolution: {integrity: sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.16.7
-      '@babel/generator': 7.17.7
+      '@babel/generator': 7.17.9
       '@babel/helper-environment-visitor': 7.16.7
-      '@babel/helper-function-name': 7.16.7
+      '@babel/helper-function-name': 7.17.9
       '@babel/helper-hoist-variables': 7.16.7
       '@babel/helper-split-export-declaration': 7.16.7
-      '@babel/parser': 7.17.8
+      '@babel/parser': 7.17.9
       '@babel/types': 7.17.0
-      debug: 4.3.3
+      debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -2165,17 +2195,6 @@ packages:
       - supports-color
     dev: true
 
-  /@jest/types/27.4.2:
-    resolution: {integrity: sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      '@types/istanbul-lib-coverage': 2.0.4
-      '@types/istanbul-reports': 3.0.1
-      '@types/node': 16.11.26
-      '@types/yargs': 16.0.4
-      chalk: 4.1.2
-    dev: true
-
   /@jest/types/27.5.1:
     resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -2217,28 +2236,28 @@ packages:
       - supports-color
     dev: false
 
-  /@microsoft/api-extractor-model/7.15.4:
-    resolution: {integrity: sha512-9bIXQKKQr5jAH1c9atXrukr4ua30fhqxMwWIOOjEnexPBPu3nhy9lC4/GpE0kPUp1Al3wSXgFnOEGzEH+HFz+w==}
+  /@microsoft/api-extractor-model/7.16.1:
+    resolution: {integrity: sha512-+1mlvy/ji+mUuH7WdVZ6fTo/aCKfS6m37aAFVOFWLfkMvmR+I9SjPfiv9qOg83If7GOrk2HPiHHibv6kA80VTg==}
     dependencies:
       '@microsoft/tsdoc': 0.13.2
       '@microsoft/tsdoc-config': 0.15.2
-      '@rushstack/node-core-library': 3.45.1
+      '@rushstack/node-core-library': 3.45.2
     dev: true
 
-  /@microsoft/api-extractor/7.19.5:
-    resolution: {integrity: sha512-ra5r8P7PocOpemrZRccI3Tf1+wukI0gT6ncRB448QSxSYlmqKuvez95YUSYPwHIN/ztKL0cn5PfMOauU1lZfGQ==}
+  /@microsoft/api-extractor/7.21.2:
+    resolution: {integrity: sha512-m0+YPaXVou01O/V9swugZG7Gn4mw6HSWY+uisf0j2JPRZcoEDyoYe4hg0ERKXOEf0hByOnMLT28nQ82v8ig9Yw==}
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.15.4
+      '@microsoft/api-extractor-model': 7.16.1
       '@microsoft/tsdoc': 0.13.2
       '@microsoft/tsdoc-config': 0.15.2
-      '@rushstack/node-core-library': 3.45.1
-      '@rushstack/rig-package': 0.3.8
-      '@rushstack/ts-command-line': 4.10.7
+      '@rushstack/node-core-library': 3.45.2
+      '@rushstack/rig-package': 0.3.9
+      '@rushstack/ts-command-line': 4.10.8
       colors: 1.2.5
       lodash: 4.17.21
       resolve: 1.17.0
-      semver: 7.3.5
+      semver: 7.3.6
       source-map: 0.6.1
       typescript: 4.5.4
     dev: true
@@ -2325,8 +2344,8 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /@rollup/plugin-commonjs/21.0.2_rollup@2.62.0:
-    resolution: {integrity: sha512-d/OmjaLVO4j/aQX69bwpWPpbvI3TJkQuxoAk7BH8ew1PyoMBLTOuvJTjzG8oEoW7drIIqB0KCJtfFLu/2GClWg==}
+  /@rollup/plugin-commonjs/21.0.3_rollup@2.62.0:
+    resolution: {integrity: sha512-ThGfwyvcLc6cfP/MWxA5ACF+LZCvsuhUq7V5134Az1oQWsiC7lNpLT4mJI86WQunK7BYmpUiHmMk2Op6OAHs0g==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
       rollup: ^2.38.3
@@ -2412,8 +2431,8 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.0
 
-  /@rushstack/node-core-library/3.45.1:
-    resolution: {integrity: sha512-BwdssTNe007DNjDBxJgInHg8ePytIPyT0La7ZZSQZF9+rSkT42AygXPGvbGsyFfEntjr4X37zZSJI7yGzL16cQ==}
+  /@rushstack/node-core-library/3.45.2:
+    resolution: {integrity: sha512-MJKdB6mxOoIkks3htGVCo7aiTzllm2I6Xua+KbTSb0cp7rBp8gTCOF/4d8R4HFMwpRdEdwzKgqMM6k9rAK73iw==}
     dependencies:
       '@types/node': 12.20.24
       colors: 1.2.5
@@ -2421,20 +2440,20 @@ packages:
       import-lazy: 4.0.0
       jju: 1.4.0
       resolve: 1.17.0
-      semver: 7.3.5
+      semver: 7.3.6
       timsort: 0.3.0
       z-schema: 5.0.2
     dev: true
 
-  /@rushstack/rig-package/0.3.8:
-    resolution: {integrity: sha512-MDWg1xovea99PWloSiYMjFcCLsrdjFtYt6aOyHNs5ojn5mxrzR6U9F83hvbQjTWnKPMvZtr0vcek+4n+OQOp3Q==}
+  /@rushstack/rig-package/0.3.9:
+    resolution: {integrity: sha512-z3Oxpfb4n9mGXwseX+ifpkmUf9B8Fy8oieVwg8eFgpCbzllkgOwEiwLKEnRWVQ8owFcd46NCKz+7ICH35CRsAw==}
     dependencies:
       resolve: 1.17.0
       strip-json-comments: 3.1.1
     dev: true
 
-  /@rushstack/ts-command-line/4.10.7:
-    resolution: {integrity: sha512-CjS+DfNXUSO5Ab2wD1GBGtUTnB02OglRWGqfaTcac9Jn45V5MeUOsq/wA8wEeS5Y/3TZ2P1k+IWdVDiuOFP9Og==}
+  /@rushstack/ts-command-line/4.10.8:
+    resolution: {integrity: sha512-G7CQYY/m3aZU5fVxbebv35yDeua7sSumrDAB2pJp0d60ZEsxGkUQW8771CeMcGWwSKqT9PxPzKpmIakiWv54sA==}
     dependencies:
       '@types/argparse': 1.0.38
       argparse: 1.0.10
@@ -2668,8 +2687,8 @@ packages:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
     dev: true
 
-  /@types/stylus/0.48.36:
-    resolution: {integrity: sha512-7klEq45BUE8ZJWkYWy1E442DcCs0wi0FkFY1Tjr6EJ7edL77t9w/QmOwlkFumBMqHlatDBtrA2xgfRrGqkUkzg==}
+  /@types/stylus/0.48.37:
+    resolution: {integrity: sha512-IkLnS/GzdDK3rgAmQwLr8LqPvUMa43SHlCnXqsfXNukwaIpiXBNgSHil3ro8aemhF4k4ZiMoa4URE7mwBHPJnQ==}
     dependencies:
       '@types/node': 16.11.26
     dev: true
@@ -2698,8 +2717,8 @@ packages:
     dev: true
     optional: true
 
-  /@typescript-eslint/eslint-plugin/5.16.0_1324a086488ab25887f801dfb12f1aba:
-    resolution: {integrity: sha512-SJoba1edXvQRMmNI505Uo4XmGbxCK9ARQpkvOd00anxzri9RNQk0DDCxD+LIl+jYhkzOJiOMMKYEHnHEODjdCw==}
+  /@typescript-eslint/eslint-plugin/5.18.0_423061f51ca07e3dd1eb999a8074f5cd:
+    resolution: {integrity: sha512-tzrmdGMJI/uii9/V6lurMo4/o+dMTKDH82LkNjhJ3adCW22YQydoRs5MwTiqxGF9CSYxPxQ7EYb4jLNlIs+E+A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -2709,24 +2728,24 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.5.4
-      '@typescript-eslint/scope-manager': 5.16.0
-      '@typescript-eslint/type-utils': 5.16.0_eslint@8.11.0+typescript@4.5.4
-      '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.5.4
+      '@typescript-eslint/parser': 5.18.0_eslint@8.13.0+typescript@4.5.4
+      '@typescript-eslint/scope-manager': 5.18.0
+      '@typescript-eslint/type-utils': 5.18.0_eslint@8.13.0+typescript@4.5.4
+      '@typescript-eslint/utils': 5.18.0_eslint@8.13.0+typescript@4.5.4
       debug: 4.3.4
-      eslint: 8.11.0
+      eslint: 8.13.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
       regexpp: 3.2.0
-      semver: 7.3.5
+      semver: 7.3.6
       tsutils: 3.21.0_typescript@4.5.4
       typescript: 4.5.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.16.0_eslint@8.11.0+typescript@4.5.4:
-    resolution: {integrity: sha512-fkDq86F0zl8FicnJtdXakFs4lnuebH6ZADDw6CYQv0UZeIjHvmEw87m9/29nk2Dv5Lmdp0zQ3zDQhiMWQf/GbA==}
+  /@typescript-eslint/parser/5.18.0_eslint@8.13.0+typescript@4.5.4:
+    resolution: {integrity: sha512-+08nYfurBzSSPndngnHvFw/fniWYJ5ymOrn/63oMIbgomVQOvIDhBoJmYZ9lwQOCnQV9xHGvf88ze3jFGUYooQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -2735,26 +2754,26 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.16.0
-      '@typescript-eslint/types': 5.16.0
-      '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.5.4
+      '@typescript-eslint/scope-manager': 5.18.0
+      '@typescript-eslint/types': 5.18.0
+      '@typescript-eslint/typescript-estree': 5.18.0_typescript@4.5.4
       debug: 4.3.4
-      eslint: 8.11.0
+      eslint: 8.13.0
       typescript: 4.5.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.16.0:
-    resolution: {integrity: sha512-P+Yab2Hovg8NekLIR/mOElCDPyGgFZKhGoZA901Yax6WR6HVeGLbsqJkZ+Cvk5nts/dAlFKm8PfL43UZnWdpIQ==}
+  /@typescript-eslint/scope-manager/5.18.0:
+    resolution: {integrity: sha512-C0CZML6NyRDj+ZbMqh9FnPscg2PrzSaVQg3IpTmpe0NURMVBXlghGZgMYqBw07YW73i0MCqSDqv2SbywnCS8jQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.16.0
-      '@typescript-eslint/visitor-keys': 5.16.0
+      '@typescript-eslint/types': 5.18.0
+      '@typescript-eslint/visitor-keys': 5.18.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.16.0_eslint@8.11.0+typescript@4.5.4:
-    resolution: {integrity: sha512-SKygICv54CCRl1Vq5ewwQUJV/8padIWvPgCxlWPGO/OgQLCijY9G7lDu6H+mqfQtbzDNlVjzVWQmeqbLMBLEwQ==}
+  /@typescript-eslint/type-utils/5.18.0_eslint@8.13.0+typescript@4.5.4:
+    resolution: {integrity: sha512-vcn9/6J5D6jtHxpEJrgK8FhaM8r6J1/ZiNu70ZUJN554Y3D9t3iovi6u7JF8l/e7FcBIxeuTEidZDR70UuCIfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -2763,22 +2782,22 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.5.4
+      '@typescript-eslint/utils': 5.18.0_eslint@8.13.0+typescript@4.5.4
       debug: 4.3.4
-      eslint: 8.11.0
+      eslint: 8.13.0
       tsutils: 3.21.0_typescript@4.5.4
       typescript: 4.5.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.16.0:
-    resolution: {integrity: sha512-oUorOwLj/3/3p/HFwrp6m/J2VfbLC8gjW5X3awpQJ/bSG+YRGFS4dpsvtQ8T2VNveV+LflQHjlLvB6v0R87z4g==}
+  /@typescript-eslint/types/5.18.0:
+    resolution: {integrity: sha512-bhV1+XjM+9bHMTmXi46p1Led5NP6iqQcsOxgx7fvk6gGiV48c6IynY0apQb7693twJDsXiVzNXTflhplmaiJaw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.16.0_typescript@4.5.4:
-    resolution: {integrity: sha512-SE4VfbLWUZl9MR+ngLSARptUv2E8brY0luCdgmUevU6arZRY/KxYoLI/3V/yxaURR8tLRN7bmZtJdgmzLHI6pQ==}
+  /@typescript-eslint/typescript-estree/5.18.0_typescript@4.5.4:
+    resolution: {integrity: sha512-wa+2VAhOPpZs1bVij9e5gyVu60ReMi/KuOx4LKjGx2Y3XTNUDJgQ+5f77D49pHtqef/klglf+mibuHs9TrPxdQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -2786,41 +2805,41 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.16.0
-      '@typescript-eslint/visitor-keys': 5.16.0
+      '@typescript-eslint/types': 5.18.0
+      '@typescript-eslint/visitor-keys': 5.18.0
       debug: 4.3.4
       globby: 11.0.4
       is-glob: 4.0.3
-      semver: 7.3.5
+      semver: 7.3.6
       tsutils: 3.21.0_typescript@4.5.4
       typescript: 4.5.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.16.0_eslint@8.11.0+typescript@4.5.4:
-    resolution: {integrity: sha512-iYej2ER6AwmejLWMWzJIHy3nPJeGDuCqf8Jnb+jAQVoPpmWzwQOfa9hWVB8GIQE5gsCv/rfN4T+AYb/V06WseQ==}
+  /@typescript-eslint/utils/5.18.0_eslint@8.13.0+typescript@4.5.4:
+    resolution: {integrity: sha512-+hFGWUMMri7OFY26TsOlGa+zgjEy1ssEipxpLjtl4wSll8zy85x0GrUSju/FHdKfVorZPYJLkF3I4XPtnCTewA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.9
-      '@typescript-eslint/scope-manager': 5.16.0
-      '@typescript-eslint/types': 5.16.0
-      '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.5.4
-      eslint: 8.11.0
+      '@typescript-eslint/scope-manager': 5.18.0
+      '@typescript-eslint/types': 5.18.0
+      '@typescript-eslint/typescript-estree': 5.18.0_typescript@4.5.4
+      eslint: 8.13.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.11.0
+      eslint-utils: 3.0.0_eslint@8.13.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.16.0:
-    resolution: {integrity: sha512-jqxO8msp5vZDhikTwq9ubyMHqZ67UIvawohr4qF3KhlpL7gzSjOd+8471H3nh5LyABkaI85laEKKU8SnGUK5/g==}
+  /@typescript-eslint/visitor-keys/5.18.0:
+    resolution: {integrity: sha512-Hf+t+dJsjAKpKSkg3EHvbtEpFFb/1CiOHnvI8bjHgOD4/wAw3gKrA0i94LrbekypiZVanJu3McWJg7rWDMzRTg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.16.0
+      '@typescript-eslint/types': 5.18.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -2828,11 +2847,11 @@ packages:
     resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
     dev: false
 
-  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.17.8:
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.17.9:
     resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
     dependencies:
       '@babel/helper-module-imports': 7.16.0
-      '@babel/plugin-syntax-jsx': 7.16.5_@babel+core@7.17.8
+      '@babel/plugin-syntax-jsx': 7.16.5_@babel+core@7.17.9
       '@babel/template': 7.16.0
       '@babel/traverse': 7.16.5
       '@babel/types': 7.16.0
@@ -3075,7 +3094,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -3158,7 +3177,7 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.0
+      picomatch: 2.3.1
 
   /aproba/2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
@@ -3478,6 +3497,16 @@ packages:
       get-intrinsic: 1.1.1
     dev: true
 
+  /callbag-from-event/1.3.0:
+    resolution: {integrity: sha512-cAu82hKKFmMtKTmd50p/nlMfs1oKz+PGUZmmwhbzPbw4YtjNgTKg6pXjpcQprhBQdrqg/v8pHcAS8Qs6X7r8fw==}
+    dependencies:
+      callbag: 1.5.0
+    dev: false
+
+  /callbag/1.5.0:
+    resolution: {integrity: sha512-PH3id0HEb/cNS+BehYlF4Z5wzjKAIUao6ab2hWtMs2bi6aW+0PXl0jymqwnFyT2cQO2h30ggUgpQlmzOpAIKNg==}
+    dev: false
+
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -3561,7 +3590,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -4177,7 +4205,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /debug/4.3.4_supports-color@9.2.1:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -4437,8 +4464,8 @@ packages:
       unbox-primitive: 1.0.1
     dev: true
 
-  /es-module-lexer/0.10.4:
-    resolution: {integrity: sha512-n5bOGUnrmuCKyMkmHNtC1ObnUx8AgFcKWe2mbxb6jYzuK81W0Rk3Z//sCoGJuxWzos8R2w48TemGIFqZsTY6YA==}
+  /es-module-lexer/0.10.5:
+    resolution: {integrity: sha512-+7IwY/kiGAacQfY+YBhKMvEmyAJnw5grTUgjG85Pe7vcUI/6b7pZjZG8nQ7+48YhzEAEqrEgD2dCz/JIK+AYvw==}
     dev: true
 
   /es-to-primitive/1.2.1:
@@ -4700,25 +4727,25 @@ packages:
     engines: {node: '>= 16.9.0', npm: '>= 7.0.0', pnpm: '>= 6.32.2'}
     dev: true
 
-  /eslint-plugin-es/3.0.1_eslint@8.11.0:
+  /eslint-plugin-es/3.0.1_eslint@8.13.0:
     resolution: {integrity: sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=4.19.1'
     dependencies:
-      eslint: 8.11.0
+      eslint: 8.13.0
       eslint-utils: 2.1.0
       regexpp: 3.2.0
     dev: true
 
-  /eslint-plugin-node/11.1.0_eslint@8.11.0:
+  /eslint-plugin-node/11.1.0_eslint@8.13.0:
     resolution: {integrity: sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=5.16.0'
     dependencies:
-      eslint: 8.11.0
-      eslint-plugin-es: 3.0.1_eslint@8.11.0
+      eslint: 8.13.0
+      eslint-plugin-es: 3.0.1_eslint@8.13.0
       eslint-utils: 2.1.0
       ignore: 5.2.0
       minimatch: 3.0.4
@@ -4749,13 +4776,13 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.11.0:
+  /eslint-utils/3.0.0_eslint@8.13.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.11.0
+      eslint: 8.13.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -4774,8 +4801,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.11.0:
-    resolution: {integrity: sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==}
+  /eslint/8.13.0:
+    resolution: {integrity: sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -4784,11 +4811,11 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.3
+      debug: 4.3.4
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.11.0
+      eslint-utils: 3.0.0_eslint@8.13.0
       eslint-visitor-keys: 3.3.0
       espree: 9.3.1
       esquery: 1.4.0
@@ -5338,7 +5365,7 @@ packages:
     engines: {node: '>=0.4.7'}
     hasBin: true
     dependencies:
-      minimist: 1.2.5
+      minimist: 1.2.6
       neo-async: 2.6.2
       source-map: 0.6.1
       wordwrap: 1.0.0
@@ -5495,7 +5522,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.3
+      debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
 
@@ -6289,23 +6316,11 @@ packages:
       jest-util: 27.5.1
       natural-compare: 1.4.0
       pretty-format: 27.5.1
-      semver: 7.3.5
+      semver: 7.3.6
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /jest-util/27.4.2:
-    resolution: {integrity: sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      '@jest/types': 27.4.2
-      '@types/node': 16.11.26
-      chalk: 4.1.2
-      ci-info: 3.3.0
-      graceful-fs: 4.2.9
-      picomatch: 2.3.0
-    dev: true
-
   /jest-util/27.5.1:
     resolution: {integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -6469,18 +6484,10 @@ packages:
     resolution: {integrity: sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=}
     dev: true
 
-  /json5/2.2.0:
-    resolution: {integrity: sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.5
-
   /json5/2.2.1:
     resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
     engines: {node: '>=6'}
     hasBin: true
-    dev: true
 
   /jsonfile/4.0.0:
     resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
@@ -6581,6 +6588,11 @@ packages:
     resolution: {integrity: sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==}
     engines: {node: '>=10'}
 
+  /lilconfig/2.0.5:
+    resolution: {integrity: sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==}
+    engines: {node: '>=10'}
+    dev: true
+
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -6726,6 +6738,11 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /lru-cache/7.8.1:
+    resolution: {integrity: sha512-E1v547OCgJvbvevfjgK9sNKIVXO96NnsTsFPBlg4ZxjhsJSODoH9lk8Bm0OxvHNm6Vm5Yqkl/1fErDxhYL8Skg==}
+    engines: {node: '>=12'}
+    dev: true
+
   /magic-string/0.25.7:
     resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==}
     dependencies:
@@ -6824,6 +6841,14 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.0
 
+  /micromatch/4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /mime-db/1.46.0:
     resolution: {integrity: sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==}
     engines: {node: '>= 0.6'}
@@ -6937,6 +6962,10 @@ packages:
 
   /minimist/1.2.5:
     resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
+    dev: false
+
+  /minimist/1.2.6:
+    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
 
   /minipass/3.1.6:
     resolution: {integrity: sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==}
@@ -7066,8 +7095,8 @@ packages:
     engines: {node: '>= 6.0.0'}
     dev: true
 
-  /node-forge/1.3.0:
-    resolution: {integrity: sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==}
+  /node-forge/1.3.1:
+    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
     dev: true
 
@@ -7101,7 +7130,7 @@ packages:
     dependencies:
       hosted-git-info: 4.0.2
       is-core-module: 2.8.1
-      semver: 7.3.5
+      semver: 7.3.6
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -7411,6 +7440,10 @@ packages:
     resolution: {integrity: sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==}
     engines: {node: '>=8.6'}
 
+  /picomatch/2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
   /pidtree/0.3.1:
     resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
     engines: {node: '>=0.10'}
@@ -7458,21 +7491,21 @@ packages:
       find-up: 4.1.0
     dev: true
 
-  /playwright-chromium/1.20.0:
-    resolution: {integrity: sha512-5qyHaW2kFguX4eAne2MgS7AxZBfQ+hN2X0t5SD5mxOTAgwciEAhMNc06o9NxILnRcmF8QSXGg19OSb8VMUBLzg==}
+  /playwright-chromium/1.20.2:
+    resolution: {integrity: sha512-KsiPLRC1v56qLWqjzeEoDZNVW/eFrP5ad0PFQAa74u5EwnnId89LgOHEZFy487tt3xJdv3Ayyfdn8zwsUpS3Qg==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      playwright-core: 1.20.0
+      playwright-core: 1.20.2
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
     dev: true
 
-  /playwright-core/1.20.0:
-    resolution: {integrity: sha512-d25IRcdooS278Cijlp8J8A5fLQZ+/aY3dKRJvgX5yjXA69N0huIUdnh3xXSgn+LsQ9DCNmB7Ngof3eY630jgdA==}
+  /playwright-core/1.20.2:
+    resolution: {integrity: sha512-iV6+HftSPalynkq0CYJala1vaTOq7+gU9BRfKCdM9bAxNq/lFLrwbluug2Wt5OoUwbMABcnTThIEm3/qUhCdJQ==}
     engines: {node: '>=12'}
     hasBin: true
     dependencies:
@@ -7510,8 +7543,8 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /postcss-import/14.0.2_postcss@8.4.12:
-    resolution: {integrity: sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==}
+  /postcss-import/14.1.0_postcss@8.4.12:
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       postcss: ^8.0.0
@@ -7530,10 +7563,21 @@ packages:
       postcss: 8.4.5
     dev: false
 
+  /postcss-js/4.0.0_postcss@8.4.12:
+    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.12
+    dev: false
+
   /postcss-load-config/3.1.0_ts-node@10.4.0:
     resolution: {integrity: sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==}
     engines: {node: '>= 10'}
     peerDependencies:
+      postcss: '*'
       ts-node: '>=9.0.0'
     peerDependenciesMeta:
       ts-node:
@@ -7545,16 +7589,36 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /postcss-load-config/3.1.3_ts-node@10.4.0:
+  /postcss-load-config/3.1.3_postcss@8.4.12+ts-node@10.4.0:
     resolution: {integrity: sha512-5EYgaM9auHGtO//ljHH+v/aC/TQ5LHXtL7bQajNAUBKUVKiYE8rYpFms7+V26D9FncaGe2zwCoPQsFKb5zF/Hw==}
     engines: {node: '>= 10'}
     peerDependencies:
+      postcss: '*'
       ts-node: '>=9.0.0'
     peerDependenciesMeta:
       ts-node:
         optional: true
     dependencies:
       lilconfig: 2.0.4
+      postcss: 8.4.12
+      ts-node: 10.4.0_44ef5af6cbbc24239b4e70b5c7b0d7a6
+      yaml: 1.10.2
+    dev: false
+
+  /postcss-load-config/3.1.4_postcss@8.4.12+ts-node@10.4.0:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.5
+      postcss: 8.4.12
       ts-node: 10.4.0_44ef5af6cbbc24239b4e70b5c7b0d7a6
       yaml: 1.10.2
     dev: true
@@ -7624,6 +7688,16 @@ packages:
     dependencies:
       postcss-selector-parser: 6.0.8
 
+  /postcss-nested/5.0.6_postcss@8.4.12:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.12
+      postcss-selector-parser: 6.0.8
+    dev: false
+
   /postcss-selector-parser/6.0.8:
     resolution: {integrity: sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==}
     engines: {node: '>=4'}
@@ -7631,6 +7705,14 @@ packages:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  /postcss-selector-parser/6.0.9:
+    resolution: {integrity: sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
   /postcss-value-parser/3.3.1:
     resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
     dev: false
@@ -7668,8 +7750,8 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier/2.6.0:
-    resolution: {integrity: sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==}
+  /prettier/2.6.2:
+    resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     dev: true
@@ -7942,8 +8024,8 @@ packages:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
 
-  /react-refresh/0.11.0:
-    resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
+  /react-refresh/0.12.0:
+    resolution: {integrity: sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A==}
     engines: {node: '>=0.10.0'}
     dev: false
 
@@ -8065,7 +8147,7 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
     dependencies:
-      picomatch: 2.3.0
+      picomatch: 2.3.1
 
   /redent/3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
@@ -8315,6 +8397,15 @@ packages:
     hasBin: true
     dependencies:
       lru-cache: 6.0.0
+    dev: false
+
+  /semver/7.3.6:
+    resolution: {integrity: sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==}
+    engines: {node: ^10.0.0 || ^12.0.0 || ^14.0.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      lru-cache: 7.8.1
+    dev: true
 
   /send/0.17.2:
     resolution: {integrity: sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==}
@@ -8862,6 +8953,38 @@ packages:
       - ts-node
     dev: false
 
+  /tailwindcss/3.0.23_ts-node@10.4.0:
+    resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      autoprefixer: ^10.0.2
+    dependencies:
+      arg: 5.0.1
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      color-name: 1.1.4
+      cosmiconfig: 7.0.1
+      detective: 5.2.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.11
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      object-hash: 2.2.0
+      postcss: 8.4.12
+      postcss-js: 4.0.0_postcss@8.4.12
+      postcss-load-config: 3.1.3_postcss@8.4.12+ts-node@10.4.0
+      postcss-nested: 5.0.6_postcss@8.4.12
+      postcss-selector-parser: 6.0.9
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tar/6.1.11:
     resolution: {integrity: sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==}
     engines: {node: '>= 10'}
@@ -9026,15 +9149,15 @@ packages:
       utf8-byte-length: 1.0.4
     dev: true
 
-  /ts-jest/27.1.3_4dfe14e0e8266437469ae0475a5c09ac:
-    resolution: {integrity: sha512-6Nlura7s6uM9BVUAoqLH7JHyMXjz8gluryjpPXxr3IxZdAXnU6FhjvVLHFtfd1vsE1p8zD1OJfskkc0jhTSnkA==}
+  /ts-jest/27.1.4_4dfe14e0e8266437469ae0475a5c09ac:
+    resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
     peerDependencies:
       '@babel/core': '>=7.0.0-beta.0 <8'
       '@types/jest': ^27.0.0
       babel-jest: '>=27.0.0 <28'
-      esbuild: ~0.14.0
+      esbuild: '*'
       jest: ^27.0.0
       typescript: '>=3.8 <5.0'
     peerDependenciesMeta:
@@ -9052,11 +9175,11 @@ packages:
       esbuild: 0.14.27
       fast-json-stable-stringify: 2.1.0
       jest: 27.5.1_ts-node@10.4.0
-      jest-util: 27.4.2
-      json5: 2.2.0
+      jest-util: 27.5.1
+      json5: 2.2.1
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.3.5
+      semver: 7.3.6
       typescript: 4.5.4
       yargs-parser: 20.2.9
     dev: true
@@ -9091,8 +9214,8 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /tsconfck/1.2.1_typescript@4.5.4:
-    resolution: {integrity: sha512-x28dvgpazY0+Gdpheb+D47NiaepLoueunDXlNQ6gVruu9HJbUj3M07ORgjmOQBUpPbXUAQXyfACc8Mi/jlLDVw==}
+  /tsconfck/1.2.2_typescript@4.5.4:
+    resolution: {integrity: sha512-x5YpjOqjJnMs1EsJvQBQbrysrY32eGoZRRr5YvbN1hwlrXKc7jiphCOUrT7xbFdOWk8sh+EtMYbGPbTO8rDmcw==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     hasBin: true
     peerDependencies:
diff --git a/scripts/jestGlobalTeardown.cjs b/scripts/jestGlobalTeardown.cjs
index 583aa1d1caf4ce..fc3370d626683a 100644
--- a/scripts/jestGlobalTeardown.cjs
+++ b/scripts/jestGlobalTeardown.cjs
@@ -4,6 +4,6 @@ const path = require('path')
 module.exports = async () => {
   await global.__BROWSER_SERVER__.close()
   if (!process.env.VITE_PRESERVE_BUILD_ARTIFACTS) {
-    await fs.remove(path.resolve(__dirname, '../packages/temp'))
+    fs.removeSync(path.resolve(__dirname, '../packages/temp'))
   }
 }
diff --git a/scripts/jestPerTestSetup.ts b/scripts/jestPerTestSetup.ts
index 150c02eed5b76c..fcdca77ee9a6eb 100644
--- a/scripts/jestPerTestSetup.ts
+++ b/scripts/jestPerTestSetup.ts
@@ -175,6 +175,7 @@ afterAll(async () => {
   global.serverLogs = []
   await global.page?.close()
   await server?.close()
+  global.watcher?.close()
   const beforeAllErr = getBeforeAllError()
   if (beforeAllErr) {
     throw beforeAllErr
@@ -200,7 +201,7 @@ function startStaticServer(config?: InlineConfig): Promise<string> {
   }
 
   // start static file server
-  const serve = sirv(resolve(rootDir, 'dist'))
+  const serve = sirv(resolve(rootDir, 'dist'), { dev: !!config?.build?.watch })
   const httpServer = (server = http.createServer((req, res) => {
     if (req.url === '/ping') {
       res.statusCode = 200