diff --git a/docs/config/index.md b/docs/config/index.md
index c141e7be88712f..3a7f355452c814 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -485,6 +485,23 @@ export default defineConfig(async ({ command, mode }) => {
 
   When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to `{ usePolling: true }`. This is due to [a WSL2 limitation](https://github.com/microsoft/WSL/issues/4739) with the Windows filesystem.
 
+  The Vite server watcher skips `.git/` and `node_modules/` directories by default. If you want to watch a package inside `node_modules/`, you can pass a negated glob pattern to `server.watch.ignored`. That is:
+
+  ```js
+  export default defineConfig({
+    server: {
+      watch: {
+        ignored: ['!**/node_modules/your-package-name/**']
+      }
+    },
+    // The watched package must be excluded from optimization,
+    // so that it can appear in the dependency graph and trigger hot reload.
+    optimizeDeps: {
+      exclude: ['your-package-name']
+    }
+  })
+  ```
+
 ### server.middlewareMode
 
 - **Type:** `'ssr' | 'html'`
@@ -657,6 +674,17 @@ export default defineConfig({
 
   If disabled, all CSS in the entire project will be extracted into a single CSS file.
 
+### build.cssTarget
+
+- **Type:** `string | string[]`
+- **Default:** the same as [`build.target`](/config/#build-target)
+
+  This options allows users to set a different browser target for CSS minification from the one used for JavaScript transpilation.
+
+  It should only be used when you are targeting a non-mainstream browser.
+  One example is Android WeChat WebView, which supports most modern JavaScript features but not the [`#RGBA` hexadecimal color notation in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors).
+  In this case, you need to set `build.cssTarget` to `chrome61` to prevent vite from transform `rgba()` colors into `#RGBA` hexadecimal notations.
+
 ### build.sourcemap
 
 - **Type:** `boolean | 'inline' | 'hidden'`
@@ -730,7 +758,7 @@ export default defineConfig({
 - **Type:** `boolean`
 - **Default:** `true` if `outDir` is inside `root`
 
-  By default, Vite will empty the `outDir` on build if it is inside project root. It will emit a warning if `outDir` is outside of root to avoid accidentially removing important files. You can explicitly set this option to suppress the warning. This is also available via command line as `--emptyOutDir`.
+  By default, Vite will empty the `outDir` on build if it is inside project root. It will emit a warning if `outDir` is outside of root to avoid accidentally removing important files. You can explicitly set this option to suppress the warning. This is also available via command line as `--emptyOutDir`.
 
 ### build.brotliSize
 
diff --git a/docs/guide/index.md b/docs/guide/index.md
index dae44ce09b3910..43421f6b52b79a 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -20,6 +20,21 @@ You can learn more about the rationale behind the project in the [Why Vite](./wh
 
 - The default build targets browsers that support both [native ESM via script tags](https://caniuse.com/es6-module) and [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import). Legacy browsers can be supported via the official [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) - see the [Building for Production](./build) section for more details.
 
+## Trying Vite Online
+
+You can try Vite online on [StackBlitz](https://vite.new/). It runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine. You can navigate to `vite.new/{template}` to select which framework to use.
+
+The supported template presets are:
+
+| JavaScript | TypeScript |
+| :---: | :---: |
+| [vanilla](https://vite.new/vanilla) | [vanilla-ts](https://vite.new/vanilla-ts) |
+| [vue](https://vite.new/vue) | [vue-ts](https://vite.new/vue-ts) |
+| [react](https://vite.new/react) | [react-ts](https://vite.new/react-ts) |
+| [preact](https://vite.new/preact) | [preact-ts](https://vite.new/preact-ts) |
+| [lit](https://vite.new/lit) | [lit-ts](https://vite.new/lit-ts) |
+| [svelte](https://vite.new/svelte) | [svelte-ts](https://vite.new/svelte-ts) |
+
 ## Scaffolding Your First Vite Project
 
 ::: tip Compatibility Note
@@ -59,22 +74,7 @@ npm init vite@latest my-vue-app -- --template vue
 yarn create vite my-vue-app --template vue
 ```
 
-Supported template presets include:
-
-- `vanilla`
-- `vanilla-ts`
-- `vue`
-- `vue-ts`
-- `react`
-- `react-ts`
-- `preact`
-- `preact-ts`
-- `lit`
-- `lit-ts`
-- `svelte`
-- `svelte-ts`
-
-See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each template.
+See [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) for more details on each supported template: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`.
 
 ## Community Templates
 
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index ad5d9f344813e4..010f028a14ea82 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -338,3 +338,14 @@ test('inlined', async () => {
   // should not insert css
   expect(await getColor('.inlined')).toBe('black')
 })
+
+test('minify css', async () => {
+  if (!isBuild) {
+    return
+  }
+
+  // should keep the rgba() syntax
+  const cssFile = findAssetFile(/index\.\w+\.css$/)
+  expect(cssFile).toMatch('rgba(')
+  expect(cssFile).not.toMatch('#ffff00b3')
+})
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index cd2d6fda9ac0d5..24a278c8687940 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -1,3 +1,5 @@
+import './minify.css'
+
 import css from './imported.css'
 text('.imported-css', css)
 
diff --git a/packages/playground/css/minify.css b/packages/playground/css/minify.css
new file mode 100644
index 00000000000000..ada062407cdb38
--- /dev/null
+++ b/packages/playground/css/minify.css
@@ -0,0 +1,3 @@
+.test-minify {
+  color: rgba(255, 255, 0, 0.7);
+}
diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js
index d49dcf4207834d..e4dc8d5a9f265f 100644
--- a/packages/playground/css/vite.config.js
+++ b/packages/playground/css/vite.config.js
@@ -3,6 +3,9 @@ const path = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  build: {
+    cssTarget: 'chrome61'
+  },
   resolve: {
     alias: {
       '@': __dirname
diff --git a/packages/playground/ssr-html/__tests__/serve.js b/packages/playground/ssr-html/__tests__/serve.js
new file mode 100644
index 00000000000000..5ba5724f2b7a94
--- /dev/null
+++ b/packages/playground/ssr-html/__tests__/serve.js
@@ -0,0 +1,36 @@
+// @ts-check
+// this is automtically detected by scripts/jestPerTestSetup.ts and will replace
+// the default e2e test serve behavior
+
+const path = require('path')
+
+const port = (exports.port = 9530)
+
+/**
+ * @param {string} root
+ * @param {boolean} isProd
+ */
+exports.serve = async function serve(root, isProd) {
+  const { createServer } = require(path.resolve(root, 'server.js'))
+  const { app, vite } = await createServer(root, isProd)
+
+  return new Promise((resolve, reject) => {
+    try {
+      const server = app.listen(port, () => {
+        resolve({
+          // for test teardown
+          async close() {
+            await new Promise((resolve) => {
+              server.close(resolve)
+            })
+            if (vite) {
+              await vite.close()
+            }
+          }
+        })
+      })
+    } catch (e) {
+      reject(e)
+    }
+  })
+}
diff --git a/packages/playground/ssr-html/__tests__/ssr-html.spec.ts b/packages/playground/ssr-html/__tests__/ssr-html.spec.ts
new file mode 100644
index 00000000000000..e34b8a91fc3421
--- /dev/null
+++ b/packages/playground/ssr-html/__tests__/ssr-html.spec.ts
@@ -0,0 +1,39 @@
+import { port } from './serve'
+import fetch from 'node-fetch'
+
+const url = `http://localhost:${port}`
+
+describe('injected inline scripts', () => {
+  test('no injected inline scripts are present', async () => {
+    await page.goto(url)
+    const inlineScripts = await page.$$eval('script', (nodes) =>
+      nodes.filter((n) => !n.getAttribute('src') && n.innerHTML)
+    )
+    expect(inlineScripts).toHaveLength(0)
+  })
+
+  test('injected script proxied correctly', async () => {
+    await page.goto(url)
+    const proxiedScripts = await page.$$eval('script', (nodes) =>
+      nodes
+        .filter((n) => {
+          const src = n.getAttribute('src')
+          if (!src) return false
+          return src.includes('?html-proxy&index')
+        })
+        .map((n) => n.getAttribute('src'))
+    )
+
+    // assert at least 1 proxied script exists
+    expect(proxiedScripts).not.toHaveLength(0)
+
+    const scriptContents = await Promise.all(
+      proxiedScripts.map((src) => fetch(url + src).then((res) => res.text()))
+    )
+
+    // all proxied scripts return code
+    for (const code of scriptContents) {
+      expect(code).toBeTruthy()
+    }
+  })
+})
diff --git a/packages/playground/ssr-html/index.html b/packages/playground/ssr-html/index.html
new file mode 100644
index 00000000000000..c37dcc7e366ae8
--- /dev/null
+++ b/packages/playground/ssr-html/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SSR HTML</title>
+  </head>
+  <body>
+    <h1>SSR Dynamic HTML</h1>
+  </body>
+</html>
diff --git a/packages/playground/ssr-html/package.json b/packages/playground/ssr-html/package.json
new file mode 100644
index 00000000000000..a14756422a8b28
--- /dev/null
+++ b/packages/playground/ssr-html/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "test-ssr-html",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "node server",
+    "serve": "cross-env NODE_ENV=production node server",
+    "debug": "node --inspect-brk server"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "express": "^4.17.1"
+  }
+}
diff --git a/packages/playground/ssr-html/server.js b/packages/playground/ssr-html/server.js
new file mode 100644
index 00000000000000..ad115f1be01163
--- /dev/null
+++ b/packages/playground/ssr-html/server.js
@@ -0,0 +1,75 @@
+// @ts-check
+const fs = require('fs')
+const path = require('path')
+const express = require('express')
+
+const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
+
+const DYNAMIC_SCRIPTS = `
+  <script type="module">
+    const p = document.createElement('p');
+    p.innerHTML = '✅ Dynamically injected inline script';
+    document.body.appendChild(p);
+  </script>
+  <script type="module" src="/src/app.js"></script>
+`
+
+async function createServer(
+  root = process.cwd(),
+  isProd = process.env.NODE_ENV === 'production'
+) {
+  const resolve = (p) => path.resolve(__dirname, p)
+
+  const app = express()
+
+  /**
+   * @type {import('vite').ViteDevServer}
+   */
+  let vite
+  vite = await require('vite').createServer({
+    root,
+    logLevel: isTest ? 'error' : 'info',
+    server: {
+      middlewareMode: 'ssr',
+      watch: {
+        // During tests we edit the files too fast and sometimes chokidar
+        // misses change events, so enforce polling for consistency
+        usePolling: true,
+        interval: 100
+      }
+    }
+  })
+  // use vite's connect instance as middleware
+  app.use(vite.middlewares)
+
+  app.use('*', async (req, res) => {
+    try {
+      let [url] = req.originalUrl.split('?')
+      if (url.endsWith('/')) url += 'index.html'
+
+      const htmlLoc = resolve(`.${url}`)
+      let html = fs.readFileSync(htmlLoc, 'utf8')
+      html = html.replace('</body>', `${DYNAMIC_SCRIPTS}</body>`)
+      html = await vite.transformIndexHtml(url, html)
+
+      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+    } catch (e) {
+      vite && vite.ssrFixStacktrace(e)
+      console.log(e.stack)
+      res.status(500).end(e.stack)
+    }
+  })
+
+  return { app, vite }
+}
+
+if (!isTest) {
+  createServer().then(({ app }) =>
+    app.listen(3000, () => {
+      console.log('http://localhost:3000')
+    })
+  )
+}
+
+// for test use
+exports.createServer = createServer
diff --git a/packages/playground/ssr-html/src/app.js b/packages/playground/ssr-html/src/app.js
new file mode 100644
index 00000000000000..5b0175bb863d70
--- /dev/null
+++ b/packages/playground/ssr-html/src/app.js
@@ -0,0 +1,3 @@
+const p = document.createElement('p')
+p.innerHTML = '✅ Dynamically injected script from file'
+document.body.appendChild(p)
diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts
index b92da5fc22bd63..f0ab340bc0ae4b 100644
--- a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts
+++ b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts
@@ -142,3 +142,8 @@ test('client navigation', async () => {
   editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
   await untilUpdated(() => page.textContent('h1'), 'changed')
 })
+
+test('import.meta.url', async () => {
+  await page.goto(url)
+  expect(await page.textContent('.protocol')).toEqual('file:')
+})
\ No newline at end of file
diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue
index b0003df3e9d0c9..05d39cf69ff1ae 100644
--- a/packages/playground/ssr-vue/src/pages/Home.vue
+++ b/packages/playground/ssr-vue/src/pages/Home.vue
@@ -7,6 +7,8 @@
   <Foo />
   <p class="virtual">msg from virtual module: {{ foo.msg }}</p>
   <p class="inter">this will be styled with a font-face</p>
+  <p class="import-meta-url">{{ state.url }}</p>
+  <p class="protocol">{{ state.protocol }}</p>
 
   <ImportType />
 </template>
@@ -21,7 +23,13 @@ const Foo = defineAsyncComponent(() =>
 function load(file) {
   return defineAsyncComponent(() => import(`../components/${file}.vue`))
 }
-const state = reactive({ count: 0 })
+const url = import.meta.env.SSR ? import.meta.url : document.querySelector('.import-meta-url').textContent
+const protocol = new URL(url).protocol
+const state = reactive({
+  count: 0,
+  protocol,
+  url
+})
 </script>
 
 <style scoped>
diff --git a/packages/plugin-legacy/CHANGELOG.md b/packages/plugin-legacy/CHANGELOG.md
index 471d55be7bb243..92a2a5cac70aca 100644
--- a/packages/plugin-legacy/CHANGELOG.md
+++ b/packages/plugin-legacy/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [1.6.2](https://github.com/vitejs/vite/compare/plugin-legacy@1.6.1...plugin-legacy@1.6.2) (2021-10-11)
+
+
+### Features
+
+* add `build.cssTarget` option ([#5132](https://github.com/vitejs/vite/issues/5132)) ([b17444f](https://github.com/vitejs/vite/commit/b17444fd97b02bc54410c8575e7d3cb25e4058c2)), closes [#4746](https://github.com/vitejs/vite/issues/4746) [#5070](https://github.com/vitejs/vite/issues/5070) [#4930](https://github.com/vitejs/vite/issues/4930)
+
+
+
 ## [1.6.1](https://github.com/vitejs/vite/compare/plugin-legacy@1.6.0...plugin-legacy@1.6.1) (2021-10-05)
 
 
diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js
index f88b77c5f6a33e..bfa6ee491bcbf6 100644
--- a/packages/plugin-legacy/index.js
+++ b/packages/plugin-legacy/index.js
@@ -86,6 +86,15 @@ function viteLegacyPlugin(options = {}) {
       if (!config.build) {
         config.build = {}
       }
+
+      if (!config.build.cssTarget) {
+        // Hint for esbuild that we are targeting legacy browsers when minifying CSS.
+        // Full CSS compat table available at https://github.com/evanw/esbuild/blob/78e04680228cf989bdd7d471e02bbc2c8d345dc9/internal/compat/css_table.go
+        // But note that only the `HexRGBA` feature affects the minify outcome.
+        // HSL & rebeccapurple values will be minified away regardless the target.
+        // So targeting `chrome61` suffices to fix the compatiblity issue.
+        config.build.cssTarget = 'chrome61'
+      }
     }
   }
 
diff --git a/packages/plugin-legacy/package.json b/packages/plugin-legacy/package.json
index 438ca52d7ac690..4ba8e9138daf40 100644
--- a/packages/plugin-legacy/package.json
+++ b/packages/plugin-legacy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-legacy",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "license": "MIT",
   "author": "Evan You",
   "files": [
diff --git a/packages/plugin-react/CHANGELOG.md b/packages/plugin-react/CHANGELOG.md
index 286e22ed7201d2..a78eaf244774f0 100644
--- a/packages/plugin-react/CHANGELOG.md
+++ b/packages/plugin-react/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [1.0.4](https://github.com/vitejs/vite/compare/plugin-react@1.0.3...plugin-react@1.0.4) (2021-10-11)
+
+
+
+## [1.0.3](https://github.com/vitejs/vite/compare/plugin-react@1.0.2...plugin-react@1.0.3) (2021-10-11)
+
+
+### Bug Fixes
+
+* **plugin-react:** turn off jsx for .ts ([#5198](https://github.com/vitejs/vite/issues/5198)) ([916f9d3](https://github.com/vitejs/vite/commit/916f9d3984d5e83f7cb869b3606a1f043a814b97)), closes [#5102](https://github.com/vitejs/vite/issues/5102)
+
+
+
 ## [1.0.2](https://github.com/vitejs/vite/compare/plugin-react@1.0.1...plugin-react@1.0.2) (2021-10-05)
 
 
diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json
index 51026a8c88f1f8..a88ae5802303d9 100644
--- a/packages/plugin-react/package.json
+++ b/packages/plugin-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -18,7 +18,7 @@
     "build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:@babel/* --external:@rollup/* --external:resolve --external:react-refresh/* --outfile=dist/index.js",
     "build-types": "tsc -p . --emitDeclarationOnly --outDir temp && api-extractor run && rimraf temp",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . --lerna-package plugin-react",
-    "release": "node ../../scripts/release.js --skipBuild"
+    "release": "node ../../scripts/release.js"
   },
   "engines": {
     "node": ">=12.0.0"
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index 6d5f05aef8a32f..2cd118099594fb 100644
--- a/packages/plugin-react/src/index.ts
+++ b/packages/plugin-react/src/index.ts
@@ -58,7 +58,11 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   const userParserPlugins =
     opts.parserPlugins || opts.babel?.parserOpts?.plugins || []
 
-  const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React\s+/
+  // Support pattens like:
+  // - import * as React from 'react';
+  // - import React from 'react';
+  // - import React, {useEffect} from 'react';
+  const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/
 
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
@@ -92,7 +96,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       )
     },
     async transform(code, id, ssr) {
-      if (/\.[tj]sx?$/.test(id)) {
+      if (/\.(mjs|[tj]sx?)$/.test(id)) {
         const plugins = [...userPlugins]
 
         const parserPlugins: typeof userParserPlugins = [
diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
index 39e245bb9da9c8..a2ef5adb17b299 100644
--- a/packages/vite/CHANGELOG.md
+++ b/packages/vite/CHANGELOG.md
@@ -1,3 +1,32 @@
+## [2.6.7](https://github.com/vitejs/vite/compare/v2.6.6...v2.6.7) (2021-10-11)
+
+
+
+## [2.6.6](https://github.com/vitejs/vite/compare/v2.6.5...v2.6.6) (2021-10-11)
+
+
+### Bug Fixes
+
+* avoid unnecessary  pre-bundling warning ([b586098](https://github.com/vitejs/vite/commit/b58609829262255d73363229584a2341bc4f568d))
+* **server:** skipped for ended response ([#5230](https://github.com/vitejs/vite/issues/5230)) ([7255fd5](https://github.com/vitejs/vite/commit/7255fd5f04e71e81d80a0a28fad3ac72bffe186e))
+
+
+### Features
+
+* add `build.cssTarget` option ([#5132](https://github.com/vitejs/vite/issues/5132)) ([b17444f](https://github.com/vitejs/vite/commit/b17444fd97b02bc54410c8575e7d3cb25e4058c2)), closes [#4746](https://github.com/vitejs/vite/issues/4746) [#5070](https://github.com/vitejs/vite/issues/5070) [#4930](https://github.com/vitejs/vite/issues/4930)
+
+
+
+## [2.6.5](https://github.com/vitejs/vite/compare/v2.6.4...v2.6.5) (2021-10-07)
+
+
+### Features
+
+* **internal:** expose printHttpServerUrls ([f94a720](https://github.com/vitejs/vite/commit/f94a720478c4905463ddf36f4c666431b2a438a9))
+* **server:** expose server.printUrls() ([96a9ee4](https://github.com/vitejs/vite/commit/96a9ee4f3566e273db53ef9023222699520e4f8f))
+
+
+
 ## [2.6.4](https://github.com/vitejs/vite/compare/v2.6.3...v2.6.4) (2021-10-07)
 
 
diff --git a/packages/vite/package.json b/packages/vite/package.json
index e242fb8f515fb2..6f6a47c2507368 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.6.4",
+  "version": "2.6.7",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",
@@ -105,7 +105,7 @@
     "open": "^8.2.1",
     "periscopic": "^2.0.3",
     "postcss-import": "^14.0.2",
-    "postcss-load-config": "^3.0.0",
+    "postcss-load-config": "^3.1.0",
     "postcss-modules": "^4.2.2",
     "resolve.exports": "^1.0.2",
     "rollup-plugin-license": "^2.5.0",
diff --git a/packages/vite/rollup.config.js b/packages/vite/rollup.config.js
index 783c3c1d993de8..f7fb887a09c809 100644
--- a/packages/vite/rollup.config.js
+++ b/packages/vite/rollup.config.js
@@ -38,7 +38,7 @@ const envConfig = {
  */
 const clientConfig = {
   input: path.resolve(__dirname, 'src/client/client.ts'),
-  external: ['./env'],
+  external: ['./env', '@vite/env'],
   plugins: [
     typescript({
       target: 'es2018',
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index df707be2e85657..148833eabe9b30 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -102,6 +102,15 @@ export interface BuildOptions {
    * @default true
    */
   cssCodeSplit?: boolean
+  /**
+   * An optional separate target for CSS minification.
+   * As esbuild only supports configuring targets to mainstream
+   * browsers, users may need this option when they are targeting
+   * a niche browser that comes with most modern JavaScript features
+   * but has poor CSS support, e.g. Android WeChat WebView, which
+   * doesn't support the #RGBA syntax.
+   */
+  cssTarget?: TransformOptions['target'] | false
   /**
    * If `true`, a separate sourcemap file will be created. If 'inline', the
    * sourcemap will be appended to the resulting output file as data URI.
@@ -232,6 +241,7 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     assetsDir: 'assets',
     assetsInlineLimit: 4096,
     cssCodeSplit: !raw?.lib,
+    cssTarget: false,
     sourcemap: false,
     rollupOptions: {},
     minify: raw?.ssr ? false : 'esbuild',
@@ -275,6 +285,10 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     resolved.target = 'es2019'
   }
 
+  if (!resolved.cssTarget) {
+    resolved.cssTarget = resolved.target
+  }
+
   // normalize false string into actual false
   if ((resolved.minify as any) === 'false') {
     resolved.minify = false
diff --git a/packages/vite/src/node/cli.ts b/packages/vite/src/node/cli.ts
index 877f4d7edd8598..c990cfa282d90b 100644
--- a/packages/vite/src/node/cli.ts
+++ b/packages/vite/src/node/cli.ts
@@ -108,7 +108,7 @@ cli
         }
       )
 
-      printHttpServerUrls(server.httpServer, server.config)
+      server.printUrls()
 
       // @ts-ignore
       if (global.__vite_start_time) {
diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
index 9a64c1053174a1..6fb83f05174c31 100644
--- a/packages/vite/src/node/index.ts
+++ b/packages/vite/src/node/index.ts
@@ -4,7 +4,7 @@ export { preview } from './preview'
 export { build } from './build'
 export { optimizeDeps } from './optimizer'
 export { send } from './server/send'
-export { createLogger } from './logger'
+export { createLogger, printHttpServerUrls } from './logger'
 export { transformWithEsbuild } from './plugins/esbuild'
 export { resolvePackageData, resolvePackageEntry } from './plugins/resolve'
 export { normalizePath } from './utils'
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index 510981a4314853..aac6f24cd79f4b 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -27,6 +27,7 @@ import { init, parse } from 'es-module-lexer'
 import MagicString from 'magic-string'
 import { transformImportGlob } from '../importGlob'
 import { performance } from 'perf_hooks'
+import chalk from 'chalk'
 
 const debug = createDebugger('vite:deps')
 
@@ -51,7 +52,7 @@ export async function scanImports(config: ResolvedConfig): Promise<{
 
   let entries: string[] = []
 
-  const explicitEntryPatterns = config.optimizeDeps?.entries
+  const explicitEntryPatterns = config.optimizeDeps.entries
   const buildInput = config.build.rollupOptions?.input
 
   if (explicitEntryPatterns) {
@@ -80,9 +81,15 @@ export async function scanImports(config: ResolvedConfig): Promise<{
   )
 
   if (!entries.length) {
-    config.logger.warn(
-      'Could not determine entry point from rollupOptions or html files. Skipping dependency pre-bundling.'
-    )
+    if (!explicitEntryPatterns && !config.optimizeDeps.include) {
+      config.logger.warn(
+        chalk.yellow(
+          '(!) Could not auto-determine entry point from rollupOptions or html files ' +
+            'and there are no explicit optimizeDeps.include patterns. ' +
+            'Skipping dependency pre-bundling.'
+        )
+      )
+    }
     return { deps: {}, missing: {} }
   } else {
     debug(`Crawling dependencies using entries:\n  ${entries.join('\n  ')}`)
@@ -265,11 +272,15 @@ function esbuildScanPlugin(
             }
           }
 
-          if (!code.includes(`export default`)) {
-            js += `\nexport default {}`
+          // This will trigger incorrectly if `export default` is contained
+          // anywhere in a string. Svelte and Astro files can't have
+          // `export default` as code so we know if it's encountered it's a
+          // false positive (e.g. contained in a string)
+          if (!path.endsWith('.vue') || !js.includes('export default')) {
+            js += '\nexport default {}'
           }
 
-          if (code.includes('import.meta.glob')) {
+          if (js.includes('import.meta.glob')) {
             return {
               // transformGlob already transforms to js
               loader: 'js',
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index d7f8125c6c6622..a0da45f4aaf155 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -8,7 +8,7 @@ import { multilineCommentsRE, singlelineCommentsRE } from '../utils'
 /**
  * Convert `new URL('./foo.png', import.meta.url)` to its resolved built URL
  *
- * Supports tempalte string with dynamic segments:
+ * Supports template string with dynamic segments:
  * ```
  * new URL(`./dir/${name}.png`, import.meta.url)
  * // transformed to
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index dd7366874d984b..1a62bf7f028d13 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -906,7 +906,7 @@ async function minifyCSS(css: string, config: ResolvedConfig) {
   const { code, warnings } = await transform(css, {
     loader: 'css',
     minify: true,
-    target: config.build.target || undefined
+    target: config.build.cssTarget || undefined
   })
   if (warnings.length) {
     const msgs = await formatMessages(warnings, { kind: 'warning' })
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index b88983bb2d3ffc..f050f018db1f84 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -1,15 +1,14 @@
-import fs from 'fs'
 import path from 'path'
 import { Plugin } from '../plugin'
 import { ViteDevServer } from '../server'
 import { OutputAsset, OutputBundle, OutputChunk } from 'rollup'
 import {
-  slash,
   cleanUrl,
-  isExternalUrl,
-  isDataUrl,
   generateCodeFrame,
-  processSrcSet
+  isDataUrl,
+  isExternalUrl,
+  processSrcSet,
+  slash
 } from '../utils'
 import { ResolvedConfig } from '../config'
 import MagicString from 'magic-string'
@@ -31,11 +30,13 @@ import {
 const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
-const htmlCommentRE = /<!--[\s\S]*?-->/g
-const scriptModuleRE =
-  /(<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>)(.*?)<\/script>/gims
+// HTML Proxy Caches are stored by config -> filePath -> index
+export const htmlProxyMap = new WeakMap<
+  ResolvedConfig,
+  Map<string, Array<string>>
+>()
 
-export function htmlInlineScriptProxyPlugin(): Plugin {
+export function htmlInlineScriptProxyPlugin(config: ResolvedConfig): Plugin {
   return {
     name: 'vite:html-inline-script-proxy',
 
@@ -45,27 +46,43 @@ export function htmlInlineScriptProxyPlugin(): Plugin {
       }
     },
 
+    buildStart() {
+      htmlProxyMap.set(config, new Map())
+    },
+
     load(id) {
       const proxyMatch = id.match(htmlProxyRE)
       if (proxyMatch) {
         const index = Number(proxyMatch[1])
         const file = cleanUrl(id)
-        const html = fs.readFileSync(file, 'utf-8').replace(htmlCommentRE, '')
-        let match: RegExpExecArray | null | undefined
-        scriptModuleRE.lastIndex = 0
-        for (let i = 0; i <= index; i++) {
-          match = scriptModuleRE.exec(html)
-        }
-        if (match) {
-          return match[2]
+        const url = file.replace(config.root, '')
+        const result = htmlProxyMap.get(config)!.get(url)![index]
+        if (result) {
+          return result
         } else {
-          throw new Error(`No matching html proxy module found from ${id}`)
+          throw new Error(`No matching HTML proxy module found from ${id}`)
         }
       }
     }
   }
 }
 
+/** Add script to cache */
+export function addToHTMLProxyCache(
+  config: ResolvedConfig,
+  filePath: string,
+  index: number,
+  code: string
+): void {
+  if (!htmlProxyMap.get(config)) {
+    htmlProxyMap.set(config, new Map())
+  }
+  if (!htmlProxyMap.get(config)!.get(filePath)) {
+    htmlProxyMap.get(config)!.set(filePath, [])
+  }
+  htmlProxyMap.get(config)!.get(filePath)![index] = code
+}
+
 // this extends the config in @vue/compiler-sfc with <link href>
 export const assetAttrsConfig: Record<string, string[]> = {
   link: ['href'],
@@ -209,7 +226,17 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                 js += `\nimport ${JSON.stringify(url)}`
                 shouldRemove = true
               } else if (node.children.length) {
+                const contents = node.children
+                  .map((child: any) => child.content || '')
+                  .join('')
                 // <script type="module">...</script>
+                const filePath = id.replace(config.root, '')
+                addToHTMLProxyCache(
+                  config,
+                  filePath,
+                  inlineModuleIndex,
+                  contents
+                )
                 js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.js"`
                 shouldRemove = true
               }
@@ -401,7 +428,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         if (chunk) {
           // an entry chunk can be inlined if
           //  - it's an ES module (e.g. not generated by the legacy plugin)
-          //  - it contains no meaningful code other than import statments
+          //  - it contains no meaningful code other than import statements
           if (options.format === 'es' && isEntirelyImport(chunk.code)) {
             canInlineEntry = true
           }
@@ -595,7 +622,7 @@ function toPublicPath(filename: string, config: ResolvedConfig) {
 }
 
 const headInjectRE = /([ \t]*)<\/head>/
-const headPrependInjectRE = [/([ \t]*)<head>/, /<!doctype html>/i]
+const headPrependInjectRE = [/([ \t]*)<head[^>]*>/, /<!doctype html>/i]
 function injectToHead(
   html: string,
   tags: HtmlTagDescriptor[],
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 6c88978f437ccf..e95c45fd8f266d 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -42,7 +42,7 @@ export async function resolvePlugins(
       ssrConfig: config.ssr,
       asSrc: true
     }),
-    htmlInlineScriptProxyPlugin(),
+    htmlInlineScriptProxyPlugin(config),
     cssPlugin(config),
     config.esbuild !== false ? esbuildPlugin(config.esbuild) : null,
     jsonPlugin(
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index 812013d4a47462..8d692f5ec3e82a 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -55,6 +55,7 @@ import { createMissingImporterRegisterFn } from '../optimizer/registerMissing'
 import { resolveHostname } from '../utils'
 import { searchForWorkspaceRoot } from './searchRoot'
 import { CLIENT_DIR } from '../constants'
+import { printHttpServerUrls } from '../logger'
 
 export { searchForWorkspaceRoot } from './searchRoot'
 
@@ -270,6 +271,10 @@ export interface ViteDevServer {
    * Stop the server.
    */
   close(): Promise<void>
+  /**
+   * Print server urls
+   */
+  printUrls(): void
   /**
    * @internal
    */
@@ -404,6 +409,13 @@ export async function createServer(
         closeHttpServer()
       ])
     },
+    printUrls() {
+      if (httpServer) {
+        printHttpServerUrls(httpServer, config)
+      } else {
+        throw new Error('cannot print server URLs in middleware mode.')
+      }
+    },
     _optimizeDepsMetadata: null,
     _ssrExternals: null,
     _globImporters: Object.create(null),
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 9d870fe8df8f19..43d0075c7afd66 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -4,7 +4,9 @@ import MagicString from 'magic-string'
 import { AttributeNode, NodeTypes } from '@vue/compiler-dom'
 import { Connect } from 'types/connect'
 import {
+  addToHTMLProxyCache,
   applyHtmlTransforms,
+  assetAttrsConfig,
   getScriptInfo,
   IndexHtmlTransformHook,
   resolveHtmlTransforms,
@@ -14,7 +16,6 @@ import { ResolvedConfig, ViteDevServer } from '../..'
 import { send } from '../send'
 import { CLIENT_PUBLIC_PATH, FS_PREFIX } from '../../constants'
 import { cleanUrl, fsPathFromId } from '../../utils'
-import { assetAttrsConfig } from '../../plugins/html'
 
 export function createDevHtmlTransformFn(
   server: ViteDevServer
@@ -87,6 +88,7 @@ const devHtmlHook: IndexHtmlTransformHook = async (
 
   const s = new MagicString(html)
   let scriptModuleIndex = -1
+  const filePath = cleanUrl(htmlPath)
 
   await traverseHtml(html, htmlPath, (node) => {
     if (node.type !== NodeTypes.ELEMENT) {
@@ -103,12 +105,21 @@ const devHtmlHook: IndexHtmlTransformHook = async (
       if (src) {
         processNodeUrl(src, s, config, htmlPath, originalUrl)
       } else if (isModule) {
+        const url = filePath.replace(config.root, '')
+
+        const contents = node.children
+          .map((child: any) => child.content || '')
+          .join('')
+
+        // add HTML Proxy to Map
+        addToHTMLProxyCache(config, url, scriptModuleIndex, contents)
+
         // inline js module. convert to src="proxy"
         s.overwrite(
           node.loc.start.offset,
           node.loc.end.offset,
           `<script type="module" src="${
-            config.base + htmlPath.slice(1)
+            config.base + url.slice(1)
           }?html-proxy&index=${scriptModuleIndex}.js"></script>`
         )
       }
@@ -151,6 +162,10 @@ export function indexHtmlMiddleware(
 ): Connect.NextHandleFunction {
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return async function viteIndexHtmlMiddleware(req, res, next) {
+    if (res.writableEnded) {
+      return next()
+    }
+
     const url = req.url && cleanUrl(req.url)
     // spa-fallback always redirects to /index.html
     if (url?.endsWith('.html') && req.headers['sec-fetch-dest'] !== 'script') {
diff --git a/packages/vite/src/node/server/send.ts b/packages/vite/src/node/server/send.ts
index 1c54ec46f88af8..777e91abf9438c 100644
--- a/packages/vite/src/node/server/send.ts
+++ b/packages/vite/src/node/server/send.ts
@@ -20,6 +20,10 @@ export function send(
   cacheControl = 'no-cache',
   map?: SourceMap | null
 ): void {
+  if (res.writableEnded) {
+    return
+  }
+
   if (req.headers['if-none-match'] === etag) {
     res.statusCode = 304
     return res.end()
diff --git a/packages/vite/src/node/server/ws.ts b/packages/vite/src/node/server/ws.ts
index eac4633210bd74..499da9a0c6668e 100644
--- a/packages/vite/src/node/server/ws.ts
+++ b/packages/vite/src/node/server/ws.ts
@@ -12,6 +12,8 @@ import { Socket } from 'net'
 export const HMR_HEADER = 'vite-hmr'
 
 export interface WebSocketServer {
+  on: WebSocket.Server['on']
+  off: WebSocket.Server['off']
   send(payload: HMRPayload): void
   close(): Promise<void>
 }
@@ -92,6 +94,8 @@ export function createWebSocketServer(
   let bufferedError: ErrorPayload | null = null
 
   return {
+    on: wss.on.bind(wss),
+    off: wss.off.bind(wss),
     send(payload: HMRPayload) {
       if (payload.type === 'error' && !wss.clients.size) {
         bufferedError = payload
diff --git a/packages/vite/src/node/ssr/ssrModuleLoader.ts b/packages/vite/src/node/ssr/ssrModuleLoader.ts
index 8442500b23db3a..2ce2225717f4e6 100644
--- a/packages/vite/src/node/ssr/ssrModuleLoader.ts
+++ b/packages/vite/src/node/ssr/ssrModuleLoader.ts
@@ -81,7 +81,10 @@ async function instantiateModule(
   // referenced before it's been instantiated.
   mod.ssrModule = ssrModule
 
-  const ssrImportMeta = { url }
+  const ssrImportMeta = {
+    // The filesystem URL, matching native Node.js modules
+    url: pathToFileURL(mod.file!).toString(),
+  }
 
   urlStack = urlStack.concat(url)
   const isCircular = (url: string) => urlStack.includes(url)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 390378fe13c025..09f4236084690d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -428,6 +428,14 @@ importers:
   packages/playground/resolve/inline-package:
     specifiers: {}
 
+  packages/playground/ssr-html:
+    specifiers:
+      cross-env: ^7.0.3
+      express: ^4.17.1
+    devDependencies:
+      cross-env: 7.0.3
+      express: 4.17.1
+
   packages/playground/ssr-react:
     specifiers:
       '@vitejs/plugin-react': workspace:*
@@ -679,7 +687,7 @@ importers:
       periscopic: ^2.0.3
       postcss: ^8.3.8
       postcss-import: ^14.0.2
-      postcss-load-config: ^3.0.0
+      postcss-load-config: ^3.1.0
       postcss-modules: ^4.2.2
       resolve: ^1.20.0
       resolve.exports: ^1.0.2