diff --git a/.prettierrc b/.prettierrc
index 38d9aa9aa604e4..5187c03a0ca828 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 semi: false
+tabWidth: 2
 singleQuote: true
 printWidth: 80
 trailingComma: none
diff --git a/LICENSE b/LICENSE
index 93a897153237ff..9c1b313d7b1816 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-present, Yuxi (Evan) You
+Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index 744a5eab5b2cfb..d6f9102a26e180 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "packages/*"
   ],
   "scripts": {
-    "lint": "eslint --ext .ts packages/*/src/**"
+    "lint": "eslint --ext .ts packages/*/src/**",
+    "bundle": "esbuild packages/vite/src/node/index.ts packages/vite/src/node/cli.ts --bundle --platform=node --target=node12 --external:fsevents --external:sugarss --external:bufferutil --external:utf-8-validate --outdir=esbuild"
   },
   "devDependencies": {
     "@types/node": "^14.14.10",
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 5b549951cb328d..882f38d96dbc7b 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -8,19 +8,20 @@
     "serve": "sirv dist",
     "debug": "node --inspect-brk ../vite/bin/vite.js --debug"
   },
+  "dependencies": {
+    "@pika/react": "^16.13.1",
+    "@pika/react-dom": "^16.13.1",
+    "lodash-es": "^4.17.15",
+    "preact": "^10.5.7",
+    "vue": "^3.0.4"
+  },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^1.0.0",
     "@vitejs/plugin-react-refresh": "^1.0.0",
     "less": "^3.13.0",
     "pug": "^3.0.0",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.30.0",
     "sirv-cli": "^1.0.9"
-  },
-  "dependencies": {
-    "@pika/react": "^16.13.1",
-    "@pika/react-dom": "^16.13.1",
-    "lodash-es": "^4.17.15",
-    "preact": "^10.5.7",
-    "vue": "^3.0.4"
   }
 }
diff --git a/packages/playground/public/icon.png b/packages/playground/public/icon.png
new file mode 100644
index 00000000000000..4388bfdca3d4d7
Binary files /dev/null and b/packages/playground/public/icon.png differ
diff --git a/packages/playground/sfcs/Hmr.vue b/packages/playground/sfcs/Hmr.vue
index 270dd8c448da77..216682733a9dc2 100644
--- a/packages/playground/sfcs/Hmr.vue
+++ b/packages/playground/sfcs/Hmr.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2>Vue SFC HMRss {{ count }}</h2>
+  <h2>Vue SFC HMRsfsefefs {{ count }}</h2>
   <p>Click the button then edit this message. The count should be preserved.</p>
   <div>filler</div>
   <button @click="count++">count is {{ count }}</button>
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-let foo: number = 1
+let foo: number = 0
 
 console.log('wo')
 const count = ref(foo)
diff --git a/packages/playground/sfcs/Main.vue b/packages/playground/sfcs/Main.vue
index e3318aea5ed808..5b8eef186d66b8 100644
--- a/packages/playground/sfcs/Main.vue
+++ b/packages/playground/sfcs/Main.vue
@@ -6,6 +6,7 @@
   <Json />
   <PreProcessors />
   <CssModules />
+  <Assets />
 </template>
 
 <script setup lang="ts">
@@ -15,12 +16,14 @@ import Syntax from './Syntax.vue'
 import Json from './Json.vue'
 import PreProcessors from './PreProcessors.vue'
 import CssModules from './CssModules.vue'
+import Assets from './test-assets/Assets.vue'
 
 import { ref, onMounted } from 'vue'
 
 const time = ref('loading...')
 
 onMounted(() => {
+  // @ts-ignore
   time.value = `loaded in ${(performance.now() - window.start).toFixed(2)}ms.`
 })
 </script>
diff --git a/packages/playground/sfcs/test-assets/Assets.vue b/packages/playground/sfcs/test-assets/Assets.vue
new file mode 100644
index 00000000000000..351929968d7ecb
--- /dev/null
+++ b/packages/playground/sfcs/test-assets/Assets.vue
@@ -0,0 +1,62 @@
+<template>
+  <h2>Static Asset Handling</h2>
+  <p>
+    Fonts should be italic if font asset reference from CSS works.
+  </p>
+  <p class="asset-import">
+    Path for assets import from js: <code>{{ filepath }}</code>
+  </p>
+  <p>
+    Relative asset reference in template:
+    <img class="relative-import" src="./nested/asset.png" data-src="./nested/asset.png" style="width: 30px;" />
+  </p>
+  <p>
+    Absolute asset reference in template:
+    <img src="/icon.png" style="width: 30px;" />
+  </p>
+  <div class="css-bg">
+    <span style="background: #fff;">CSS background</span>
+  </div>
+  <div class="css-import-bg">
+    <span style="background: #fff;">CSS background with relative paths</span>
+  </div>
+  <div class="css-bg-data-uri">
+    <span style="background: #fff;">CSS background with Data URI</span>
+  </div>
+</template>
+
+<script>
+import './asset.css'
+import filepath from './nested/asset.png'
+
+export default {
+  data() {
+    return {
+      filepath
+    }
+  }
+}
+</script>
+
+<style>
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/Inter-Italic.woff2?#iefix') format('woff2'),
+    url('/fonts/Inter-Italic.woff') format('woff');
+}
+
+body {
+  font-family: 'Inter';
+}
+.css-bg {
+  background: url(/icon.png);
+  background-size: 10px;
+}
+.css-bg-data-uri {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA0CAYAAADWr1sfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTAyNkI1RkE4N0VCMTFFQUFBQzJENzUzNDFGRjc1N0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTAyNkI1Rjk4N0VCMTFFQUFBQzJENzUzNDFGRjc1N0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTc3NzA2Q0Y4N0FCMTFFM0I3MERFRTAzNzcwNkMxMjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTc3NzA2RDA4N0FCMTFFM0I3MERFRTAzNzcwNkMxMjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6nwnGxAAAJtklEQVR42txZ6W9c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);
+  background-size: 10px;
+}
+</style>
diff --git a/packages/playground/sfcs/test-assets/asset.css b/packages/playground/sfcs/test-assets/asset.css
new file mode 100644
index 00000000000000..8fcc966d226540
--- /dev/null
+++ b/packages/playground/sfcs/test-assets/asset.css
@@ -0,0 +1,4 @@
+.css-import-bg {
+  background: url(./nested/asset.png);
+  background-size: 10px;
+}
diff --git a/packages/playground/public/logo.png b/packages/playground/sfcs/test-assets/nested/asset.png
similarity index 100%
rename from packages/playground/public/logo.png
rename to packages/playground/sfcs/test-assets/nested/asset.png
diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
new file mode 100644
index 00000000000000..b18e5bc353b62d
--- /dev/null
+++ b/packages/playground/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "allowJs": true
+  }
+}
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
index 59ff1abd517a29..b208acbbaa7c7b 100644
--- a/packages/playground/vite.config.ts
+++ b/packages/playground/vite.config.ts
@@ -1,14 +1,11 @@
 import { defineConfig } from 'vite'
-import vue from 'rollup-plugin-vue'
+import vue from '@vitejs/plugin-vue'
 import reactRefresh from '@vitejs/plugin-react-refresh'
 
 export default defineConfig({
   plugins: [
     // reactRefresh,
-    vue({
-      hmr: true,
-      vite: true
-    })
+    vue()
   ],
   alias: {
     react: '@pika/react/source.development.js',
diff --git a/packages/plugin-react-refresh/package.json b/packages/plugin-react-refresh/package.json
index 5823f464a23a27..2c7bc2160f098f 100644
--- a/packages/plugin-react-refresh/package.json
+++ b/packages/plugin-react-refresh/package.json
@@ -1,6 +1,21 @@
 {
   "name": "@vitejs/plugin-react-refresh",
   "version": "1.0.0",
+  "license": "MIT",
+  "files": [
+    "index.js"
+  ],
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitejs/vite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vitejs/vite/issues"
+  },
+  "homepage": "https://github.com/vitejs/vite/tree/master/#readme",
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
index 4a28e9abf566ad..0550e4b701e6f3 100644
--- a/packages/plugin-vue/package.json
+++ b/packages/plugin-vue/package.json
@@ -1,4 +1,36 @@
 {
   "name": "@vitejs/plugin-vue",
-  "version": "1.0.0"
+  "version": "1.0.0",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "tsc -w --incremental -p ."
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitejs/vite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vitejs/vite/issues"
+  },
+  "homepage": "https://github.com/vitejs/vite/tree/master/#readme",
+  "peerDependencies": {
+    "@vue/compiler-sfc": "^3.0.4"
+  },
+  "devDependencies": {
+    "@rollup/pluginutils": "^4.1.0",
+    "@types/hash-sum": "^1.0.0",
+    "@vue/compiler-sfc": "^3.0.4",
+    "debug": "^4.3.1",
+    "hash-sum": "^2.0.0",
+    "rollup": "^2.35.1",
+    "source-map": "^0.6.1"
+  }
 }
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
new file mode 100644
index 00000000000000..8c1c80d719da90
--- /dev/null
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -0,0 +1,194 @@
+import fs from 'fs'
+import _debug from 'debug'
+import { parse, SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
+import {
+  getDescriptor,
+  setDescriptor,
+  setPrevDescriptor
+} from './utils/descriptorCache'
+import { getResolvedScript, setResolvedScript } from './script'
+import { ModuleNode } from 'vite'
+
+const debug = _debug('vite:hmr')
+
+/**
+ * Vite-specific HMR handling
+ */
+export async function handleHotUpdate(
+  file: string,
+  modules: ModuleNode[]
+): Promise<ModuleNode[] | void> {
+  if (!file.endsWith('.vue')) {
+    return
+  }
+
+  const prevDescriptor = getDescriptor(file)
+  if (!prevDescriptor) {
+    // file hasn't been requested yet (e.g. async component)
+    return
+  }
+
+  let content = fs.readFileSync(file, 'utf-8')
+  if (!content) {
+    await untilModified(file)
+    content = fs.readFileSync(file, 'utf-8')
+  }
+
+  const { descriptor } = parse(content, {
+    filename: file,
+    sourceMap: true
+  })
+  setDescriptor(file, descriptor)
+  setPrevDescriptor(file, prevDescriptor)
+
+  let needRerender = false
+  const affectedModules = new Set<ModuleNode | undefined>()
+  const mainModule = modules.find(
+    (m) => !/type=/.test(m.url) || /type=script/.test(m.url)
+  )
+  const templateModule = modules.find((m) => /type=template/.test(m.url))
+
+  if (
+    !isEqualBlock(descriptor.script, prevDescriptor.script) ||
+    !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
+  ) {
+    affectedModules.add(mainModule)
+  }
+
+  if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
+    // when a <script setup> component's template changes, it will need correct
+    // binding metadata. However, when reloading the template alone the binding
+    // metadata will not be available since the script part isn't loaded.
+    // in this case, reuse the compiled script from previous descriptor.
+    if (mainModule && !affectedModules.has(mainModule)) {
+      setResolvedScript(descriptor, getResolvedScript(prevDescriptor)!)
+    }
+    affectedModules.add(templateModule)
+    needRerender = true
+  }
+
+  let didUpdateStyle = false
+  const prevStyles = prevDescriptor.styles || []
+  const nextStyles = descriptor.styles || []
+
+  // force reload if CSS vars injection changed
+  if (prevDescriptor.cssVars.join('') !== descriptor.cssVars.join('')) {
+    affectedModules.add(mainModule)
+  }
+
+  // force reload if scoped status has changed
+  if (prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped)) {
+    // template needs to be invalidated as well
+    affectedModules.add(templateModule)
+    affectedModules.add(mainModule)
+  }
+
+  // only need to update styles if not reloading, since reload forces
+  // style updates as well.
+  for (let i = 0; i < nextStyles.length; i++) {
+    const prev = prevStyles[i]
+    const next = nextStyles[i]
+    if (!prev || !isEqualBlock(prev, next)) {
+      didUpdateStyle = true
+      const mod = modules.find((m) => m.url.includes(`type=style&index=${i}`))
+      if (mod) {
+        affectedModules.add(mod)
+      } else {
+        // new style block - force reload
+        affectedModules.add(mainModule)
+      }
+    }
+  }
+  if (prevStyles.length > nextStyles.length) {
+    // style block removed - force reload
+    affectedModules.add(mainModule)
+  }
+
+  const prevCustoms = prevDescriptor.customBlocks || []
+  const nextCustoms = descriptor.customBlocks || []
+
+  // custom blocks update causes a reload
+  // because the custom block contents is changed and it may be used in JS.
+  for (let i = 0; i < nextCustoms.length; i++) {
+    const prev = prevCustoms[i]
+    const next = nextCustoms[i]
+    if (!prev || !isEqualBlock(prev, next)) {
+      const mod = modules.find((m) =>
+        m.url.includes(`type=${prev.type}&index=${i}`)
+      )
+      if (mod) {
+        affectedModules.add(mod)
+      } else {
+        affectedModules.add(mainModule)
+      }
+    }
+  }
+  if (prevCustoms.length > nextCustoms.length) {
+    // block rmeoved, force reload
+    affectedModules.add(mainModule)
+  }
+
+  let updateType = []
+  if (needRerender) {
+    updateType.push(`template`)
+    // template is inlined into main, add main module instead
+    if (!templateModule) {
+      affectedModules.add(mainModule)
+    }
+  }
+  if (didUpdateStyle) {
+    updateType.push(`style`)
+  }
+  if (updateType.length) {
+    debug(`[vue:update(${updateType.join('&')})] ${file}`)
+  }
+  return [...affectedModules].filter(Boolean) as ModuleNode[]
+}
+
+// vitejs/vite#610 when hot-reloading Vue files, we read immediately on file
+// change event and sometimes this can be too early and get an empty buffer.
+// Poll until the file's modified time has changed before reading again.
+async function untilModified(file: string) {
+  const mtime = fs.statSync(file).mtimeMs
+  return new Promise((r) => {
+    let n = 0
+    const poll = async () => {
+      n++
+      const newMtime = fs.statSync(file).mtimeMs
+      if (newMtime !== mtime || n > 10) {
+        r(0)
+      } else {
+        setTimeout(poll, 10)
+      }
+    }
+    setTimeout(poll, 10)
+  })
+}
+
+function isEqualBlock(a: SFCBlock | null, b: SFCBlock | null) {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  // src imports will trigger their own updates
+  if (a.src && b.src && a.src === b.src) return true
+  if (a.content !== b.content) return false
+  const keysA = Object.keys(a.attrs)
+  const keysB = Object.keys(b.attrs)
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+  return keysA.every((key) => a.attrs[key] === b.attrs[key])
+}
+
+export function isOnlyTemplateChanged(
+  prev: SFCDescriptor,
+  next: SFCDescriptor
+) {
+  return (
+    isEqualBlock(prev.script, next.script) &&
+    isEqualBlock(prev.scriptSetup, next.scriptSetup) &&
+    prev.styles.length === next.styles.length &&
+    prev.styles.every((s, i) => isEqualBlock(s, next.styles[i])) &&
+    prev.customBlocks.length === next.customBlocks.length &&
+    prev.customBlocks.every((s, i) => isEqualBlock(s, next.customBlocks[i]))
+  )
+}
diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
new file mode 100644
index 00000000000000..b6429e2dc4e260
--- /dev/null
+++ b/packages/plugin-vue/src/index.ts
@@ -0,0 +1,167 @@
+try {
+  require.resolve('@vue/compiler-sfc')
+} catch (e) {
+  throw new Error(
+    '@vitejs/plugin-vue requires @vue/compiler-sfc to be present in the dependency ' +
+      'tree.'
+  )
+}
+
+import fs from 'fs'
+import { Plugin, ViteDevServer } from 'vite'
+import { createFilter } from '@rollup/pluginutils'
+import {
+  SFCBlock,
+  SFCScriptCompileOptions,
+  SFCStyleCompileOptions,
+  SFCTemplateCompileOptions
+} from '@vue/compiler-sfc'
+import { parseVueRequest } from './utils/query'
+import { getDescriptor, setDescriptor } from './utils/descriptorCache'
+import { getResolvedScript } from './script'
+import { transformMain } from './main'
+import { handleHotUpdate } from './handleHotUpdate'
+import { transformTemplateAsModule } from './template'
+import { transformStyle } from './style'
+
+// extend the descriptor so we can store the scopeId on it
+declare module '@vue/compiler-sfc' {
+  interface SFCDescriptor {
+    id: string
+  }
+}
+
+export interface Options {
+  include?: string | RegExp | (string | RegExp)[]
+  exclude?: string | RegExp | (string | RegExp)[]
+
+  ssr?: boolean
+  isProduction?: boolean
+
+  // options to pass on to @vue/compiler-sfc
+  script?: SFCScriptCompileOptions
+  template?: SFCTemplateCompileOptions
+  style?: SFCStyleCompileOptions
+}
+
+export interface ResolvedOptions extends Options {
+  root: string
+  devServer?: ViteDevServer
+}
+
+export default function vuePlugin(rawOptions: Options = {}): Plugin {
+  let options: ResolvedOptions = {
+    ssr: false,
+    isProduction: process.env.NODE_ENV === 'production',
+    ...rawOptions,
+    root: process.cwd()
+  }
+
+  const filter = createFilter(
+    rawOptions.include || /\.vue$/,
+    rawOptions.exclude
+  )
+
+  return {
+    name: 'vite:vue',
+
+    handleHotUpdate,
+
+    configResolved(config) {
+      options = {
+        ...options,
+        root: config.root,
+        isProduction: config.isProduction,
+        ssr: !!config.build.ssr
+      }
+    },
+
+    configureServer(server) {
+      options.devServer = server
+    },
+
+    async resolveId(id, importer) {
+      const { filename, query } = parseVueRequest(id)
+      // serve subpart requests (*?vue) as virtual modules
+      if (query.vue) {
+        if (query.src) {
+          const resolved = await this.resolve(filename, importer, {
+            skipSelf: true
+          })
+          if (resolved) {
+            // associate this imported file to the importer SFC's descriptor
+            // so that we can retrieve it in transform()
+            setDescriptor(resolved.id, getDescriptor(importer!))
+            const [, originalQuery] = id.split('?', 2)
+            resolved.id += `?${originalQuery}`
+            return resolved
+          }
+        } else if (!filter(filename)) {
+          return null
+        }
+        return id
+      }
+    },
+
+    load(id) {
+      const { filename, query } = parseVueRequest(id)
+      if (!filter(filename)) {
+        return
+      }
+      // serve subpart virtual modules
+      if (query.vue) {
+        if (query.src) {
+          return fs.readFileSync(filename, 'utf-8')
+        }
+        const descriptor = getDescriptor(filename)
+        let block: SFCBlock | null | undefined
+        if (query.type === 'script') {
+          // handle <scrip> + <script setup> merge via compileScript()
+          block = getResolvedScript(descriptor, options.ssr)
+        } else if (query.type === 'template') {
+          block = descriptor.template!
+        } else if (query.type === 'style') {
+          block = descriptor.styles[query.index!]
+        } else if (query.index) {
+          block = descriptor.customBlocks[query.index]
+        }
+        if (block) {
+          return {
+            code: block.content,
+            map: block.map as any
+          }
+        }
+      }
+    },
+
+    transform(code, id) {
+      const { filename, query } = parseVueRequest(id)
+      if (!filter(filename)) {
+        return
+      }
+
+      if (!query.vue) {
+        // main request
+        return transformMain(code, filename, options, this)
+      }
+
+      if (query.vue) {
+        const descriptor = getDescriptor(filename)
+        if (query.type === 'template') {
+          return transformTemplateAsModule(code, descriptor, options, this)
+        } else if (query.type === 'style') {
+          return transformStyle(
+            code,
+            descriptor,
+            Number(query.index),
+            options,
+            this
+          )
+        }
+      }
+    }
+  }
+}
+
+// overwrite for cjs require('...')() usage
+module.exports = vuePlugin
diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
new file mode 100644
index 00000000000000..cf4a04a3f7bf90
--- /dev/null
+++ b/packages/plugin-vue/src/main.ts
@@ -0,0 +1,328 @@
+import hash from 'hash-sum'
+import path from 'path'
+import qs from 'querystring'
+import {
+  parse,
+  rewriteDefault,
+  SFCBlock,
+  SFCDescriptor
+} from '@vue/compiler-sfc'
+import { ResolvedOptions } from '.'
+import { getPrevDescriptor, setDescriptor } from './utils/descriptorCache'
+import { PluginContext, TransformPluginContext } from 'rollup'
+import { resolveScript } from './script'
+import { transformTemplateInMain } from './template'
+import { isOnlyTemplateChanged } from './handleHotUpdate'
+import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
+import { createRollupError } from './utils/error'
+
+export async function transformMain(
+  code: string,
+  filename: string,
+  options: ResolvedOptions,
+  pluginContext: TransformPluginContext
+) {
+  const { root, devServer, isProduction, ssr } = options
+
+  // prev descriptor is only set and used for hmr
+  const prevDescriptor = getPrevDescriptor(filename)
+  const { descriptor, errors } = parse(code, {
+    sourceMap: true,
+    filename
+  })
+
+  // set the id on the descriptor
+  const shortFilePath = path
+    .relative(root, filename)
+    .replace(/^(\.\.[\/\\])+/, '')
+    .replace(/\\/g, '/')
+
+  descriptor.id = hash(
+    isProduction ? shortFilePath + '\n' + code : shortFilePath
+  )
+
+  setDescriptor(filename, descriptor)
+
+  if (errors.length) {
+    errors.forEach((error) =>
+      pluginContext.error(createRollupError(filename, error))
+    )
+    return null
+  }
+
+  // feature information
+  const hasScoped = descriptor.styles.some((s) => s.scoped)
+
+  // script
+  const { code: scriptCode, map } = await genScriptCode(descriptor, options)
+
+  // template
+  // Check if we can use compile template as inlined render function
+  // inside <script setup>. This can only be done for build because
+  // inlined template cannot be individually hot updated.
+  const useInlineTemplate =
+    !devServer &&
+    descriptor.scriptSetup &&
+    !(descriptor.template && descriptor.template.src)
+  const hasTemplateImport = descriptor.template && !useInlineTemplate
+
+  let templateCode = ''
+  let templateMap
+  if (hasTemplateImport) {
+    ;({ code: templateCode, map: templateMap } = genTemplateCode(
+      descriptor,
+      options,
+      pluginContext
+    ))
+  }
+
+  const renderReplace = hasTemplateImport
+    ? ssr
+      ? `_sfc_main.ssrRender = _sfc_ssrRender`
+      : `_sfc_main.render = _sfc_render`
+    : ''
+
+  // styles
+  const stylesCode = genStyleCode(descriptor)
+
+  // custom blocks
+  const customBlocksCode = genCustomBlockCode(descriptor)
+
+  const output: string[] = [
+    scriptCode,
+    templateCode,
+    stylesCode,
+    customBlocksCode,
+    renderReplace
+  ]
+  if (hasScoped) {
+    output.push(
+      `_sfc_main.__scopeId = ${JSON.stringify(`data-v-${descriptor.id}`)}`
+    )
+  }
+  if (!isProduction) {
+    output.push(`_sfc_main.__file = ${JSON.stringify(shortFilePath)}`)
+  } else if (devServer) {
+    // expose filename during serve for devtools to pickup
+    output.push(
+      `_sfc_main.__file = ${JSON.stringify(path.basename(shortFilePath))}`
+    )
+  }
+  output.push('export default _sfc_main')
+
+  // HMR
+  if (devServer) {
+    // check if the template is the only thing that changed
+    if (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor)) {
+      output.push(`export const _rerender_only = true`)
+    }
+    output.push(`_sfc_main.__hmrId = ${JSON.stringify(descriptor.id)}`)
+    output.push(
+      `__VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)`
+    )
+    output.push(
+      `import.meta.hot.accept(({ default: updated, _rerender_only }) => {`,
+      `  if (_rerender_only) {`,
+      `    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)`,
+      `  } else {`,
+      `    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)`,
+      `  }`,
+      `})`
+    )
+  }
+
+  // if the template is inlined into the main module (indicated by the presence
+  // of templateMap, we need to concatenate the two source maps.
+  let resolvedMap = map
+  if (map && templateMap) {
+    const generator = SourceMapGenerator.fromSourceMap(
+      new SourceMapConsumer(map)
+    )
+    const offset = scriptCode.match(/\r?\n/g)?.length || 1
+    const templateMapConsumer = new SourceMapConsumer(templateMap)
+    templateMapConsumer.eachMapping((m) => {
+      generator.addMapping({
+        source: m.source,
+        original: { line: m.originalLine, column: m.originalColumn },
+        generated: {
+          line: m.generatedLine + offset,
+          column: m.generatedColumn
+        }
+      })
+    })
+    resolvedMap = (generator as any).toJSON()
+    // if this is a template only update, we will be reusing a cached version
+    // of the main module compile result, which has outdated sourcesContent.
+    resolvedMap.sourcesContent = templateMap.sourcesContent
+  }
+
+  return {
+    code: output.join('\n'),
+    map: resolvedMap || {
+      mappings: ''
+    }
+  }
+}
+
+function genTemplateCode(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: PluginContext
+) {
+  const renderFnName = options.ssr ? 'ssrRender' : 'render'
+  const template = descriptor.template!
+
+  // If the template is not using pre-processor AND is not using external src,
+  // compile and inline it directly in the main module. When served in vite this
+  // saves an extra request per SFC which can improve load performance.
+  if (!template.lang && !template.src) {
+    return transformTemplateInMain(
+      template.content,
+      descriptor,
+      options,
+      pluginContext
+    )
+  } else {
+    const src = template.src || descriptor.filename
+    const srcQuery = template.src ? `&src` : ``
+    const attrsQuery = attrsToQuery(template.attrs, 'js', true)
+    const query = `?vue&type=template${srcQuery}${attrsQuery}`
+    return {
+      code: `import { ${renderFnName} as _sfc_${renderFnName} } from ${JSON.stringify(
+        src + query
+      )}`,
+      map: undefined
+    }
+  }
+}
+
+async function genScriptCode(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions
+): Promise<{
+  code: string
+  map: RawSourceMap
+}> {
+  let scriptCode = `const _sfc_main = {}`
+  let map
+  const script = resolveScript(descriptor, options)
+  if (script) {
+    // If the script is js/ts and has no external src, it can be directly placed
+    // in the main module.
+    if (
+      (!script.lang || (script.lang === 'ts' && options.devServer)) &&
+      !script.src
+    ) {
+      scriptCode = rewriteDefault(script.content, `_sfc_main`)
+      map = script.map
+      if (script.lang === 'ts') {
+        const result = await options.devServer!.transformWithEsbuild(
+          scriptCode,
+          descriptor.filename,
+          { loader: 'ts' },
+          map
+        )
+        scriptCode = result.code
+        map = result.map
+      }
+    } else {
+      const src = script.src || descriptor.filename
+      const attrsQuery = attrsToQuery(script.attrs, 'js')
+      const srcQuery = script.src ? `&src` : ``
+      const query = `?vue&type=script${srcQuery}${attrsQuery}`
+      const scriptRequest = JSON.stringify(src + query)
+      scriptCode =
+        `import _sfc_main from ${scriptRequest}\n` +
+        `export * from ${scriptRequest}` // support named exports
+    }
+  }
+  return {
+    code: scriptCode,
+    map: map as any
+  }
+}
+
+function genStyleCode(descriptor: SFCDescriptor) {
+  let stylesCode = ``
+  let hasCSSModules = false
+  if (descriptor.styles.length) {
+    descriptor.styles.forEach((style, i) => {
+      const src = style.src || descriptor.filename
+      // do not include module in default query, since we use it to indicate
+      // that the module needs to export the modules json
+      const attrsQuery = attrsToQuery(style.attrs, 'css')
+      const srcQuery = style.src ? `&src` : ``
+      const query = `?vue&type=style&index=${i}${srcQuery}`
+      const styleRequest = src + query + attrsQuery
+      if (style.module) {
+        if (!hasCSSModules) {
+          stylesCode += `\nconst cssModules = _sfc_main.__cssModules = {}`
+          hasCSSModules = true
+        }
+        stylesCode += genCSSModulesCode(i, styleRequest, style.module)
+      } else {
+        stylesCode += `\nimport ${JSON.stringify(styleRequest)}`
+      }
+      // TODO SSR critical CSS collection
+    })
+  }
+  return stylesCode
+}
+
+function genCustomBlockCode(descriptor: SFCDescriptor) {
+  let code = ''
+  descriptor.customBlocks.forEach((block, index) => {
+    const src = block.src || descriptor.filename
+    const attrsQuery = attrsToQuery(block.attrs, block.type)
+    const srcQuery = block.src ? `&src` : ``
+    const query = `?vue&type=${block.type}&index=${index}${srcQuery}${attrsQuery}`
+    const request = JSON.stringify(src + query)
+    code += `import block${index} from ${request}\n`
+    code += `if (typeof block${index} === 'function') block${index}(_sfc_main)\n`
+  })
+  return code
+}
+
+function genCSSModulesCode(
+  index: number,
+  request: string,
+  moduleName: string | boolean
+): string {
+  const styleVar = `style${index}`
+  const exposedName = typeof moduleName === 'string' ? moduleName : '$style'
+  // inject `.module` before extension so vite handles it as css module
+  const moduleRequest = request.replace(/\.(\w+)$/, '.module.$1')
+  return (
+    `\nimport ${styleVar} from ${JSON.stringify(moduleRequest)}` +
+    `\ncssModules["${exposedName}"] = ${styleVar}`
+  )
+}
+
+// these are built-in query parameters so should be ignored
+// if the user happen to add them as attrs
+const ignoreList = ['id', 'index', 'src', 'type', 'lang', 'module']
+
+function attrsToQuery(
+  attrs: SFCBlock['attrs'],
+  langFallback?: string,
+  forceLangFallback = false
+): string {
+  let query = ``
+  for (const name in attrs) {
+    const value = attrs[name]
+    if (!ignoreList.includes(name)) {
+      query += `&${qs.escape(name)}${
+        value ? `=${qs.escape(String(value))}` : ``
+      }`
+    }
+  }
+  if (langFallback || attrs.lang) {
+    query +=
+      `lang` in attrs
+        ? forceLangFallback
+          ? `&lang.${langFallback}`
+          : `&lang.${attrs.lang}`
+        : `&lang.${langFallback}`
+  }
+  return query
+}
diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts
new file mode 100644
index 00000000000000..2a838f25da8b79
--- /dev/null
+++ b/packages/plugin-vue/src/script.ts
@@ -0,0 +1,49 @@
+import { compileScript, SFCDescriptor, SFCScriptBlock } from '@vue/compiler-sfc'
+import { ResolvedOptions } from '.'
+import { getTemplateCompilerOptions } from './template'
+
+// ssr and non ssr builds would output different script content
+const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
+const ssrCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
+
+export function getResolvedScript(
+  descriptor: SFCDescriptor,
+  isServer = false
+): SFCScriptBlock | null | undefined {
+  return (isServer ? ssrCache : clientCache).get(descriptor)
+}
+
+export function setResolvedScript(
+  descriptor: SFCDescriptor,
+  script: SFCScriptBlock,
+  isServer = false
+) {
+  ;(isServer ? ssrCache : clientCache).set(descriptor, script)
+}
+
+export function resolveScript(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions
+) {
+  if (!descriptor.script && !descriptor.scriptSetup) {
+    return null
+  }
+
+  const cacheToUse = options.ssr ? ssrCache : clientCache
+  const cached = cacheToUse.get(descriptor)
+  if (cached) {
+    return cached
+  }
+
+  let resolved: SFCScriptBlock | null = null
+
+  resolved = compileScript(descriptor, {
+    id: descriptor.id,
+    isProd: options.isProduction,
+    inlineTemplate: !options.devServer,
+    templateOptions: getTemplateCompilerOptions(descriptor, options)
+  })
+
+  cacheToUse.set(descriptor, resolved)
+  return resolved
+}
diff --git a/packages/plugin-vue/src/style.ts b/packages/plugin-vue/src/style.ts
new file mode 100644
index 00000000000000..ce9a653cd4db67
--- /dev/null
+++ b/packages/plugin-vue/src/style.ts
@@ -0,0 +1,41 @@
+import { compileStyleAsync, SFCDescriptor } from '@vue/compiler-sfc'
+import { TransformPluginContext } from 'rollup'
+import { ResolvedOptions } from '.'
+
+export async function transformStyle(
+  code: string,
+  descriptor: SFCDescriptor,
+  index: number,
+  options: ResolvedOptions,
+  pluginContext: TransformPluginContext
+) {
+  const block = descriptor.styles[index]
+  // vite already handles pre-processors and CSS module so this is only
+  // applying SFC-specific transforms like scoped mode and CSS vars rewrite (v-bind(var))
+  const result = await compileStyleAsync({
+    filename: descriptor.filename,
+    id: `data-v-${descriptor.id}`,
+    isProd: options.isProduction,
+    source: code,
+    scoped: block.scoped
+  })
+
+  if (result.errors.length) {
+    result.errors.forEach((error: any) => {
+      if (error.line && error.column) {
+        error.loc = {
+          file: descriptor.filename,
+          line: error.line + block.loc.start.line,
+          column: error.column
+        }
+      }
+      pluginContext.error(error)
+    })
+    return null
+  }
+
+  return {
+    code: result.code,
+    map: result.map as any
+  }
+}
diff --git a/packages/plugin-vue/src/template.ts b/packages/plugin-vue/src/template.ts
new file mode 100644
index 00000000000000..5c4ecb144f2258
--- /dev/null
+++ b/packages/plugin-vue/src/template.ts
@@ -0,0 +1,111 @@
+import {
+  compileTemplate,
+  SFCDescriptor,
+  SFCTemplateCompileOptions
+} from '@vue/compiler-sfc'
+import { PluginContext, TransformPluginContext } from 'rollup'
+import { ResolvedOptions } from '.'
+import { getResolvedScript } from './script'
+import { createRollupError } from './utils/error'
+
+export function transformTemplateAsModule(
+  code: string,
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: TransformPluginContext
+) {
+  const result = compile(code, descriptor, options, pluginContext)
+
+  let returnCode = result.code
+  if (options.devServer) {
+    returnCode += `\nimport.meta.hot.accept(({ render }) => {
+      __VUE_HMR_RUNTIME__.rerender(${JSON.stringify(descriptor.id)}, render)
+    })`
+  }
+
+  return {
+    code: returnCode,
+    map: result.map as any
+  }
+}
+
+/**
+ * transform the template directly in the main SFC module
+ */
+export function transformTemplateInMain(
+  code: string,
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: PluginContext
+) {
+  const result = compile(code, descriptor, options, pluginContext)
+  return {
+    ...result,
+    code: result.code.replace(
+      /\nexport (function|const) (render|ssrRender)/,
+      '\n$1 _sfc_$2'
+    )
+  }
+}
+
+export function compile(
+  code: string,
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions,
+  pluginContext: PluginContext
+) {
+  const filename = descriptor.filename
+  const result = compileTemplate({
+    ...getTemplateCompilerOptions(descriptor, options)!,
+    source: code
+  })
+
+  if (result.errors.length) {
+    result.errors.forEach((error) =>
+      pluginContext.error(
+        typeof error === 'string'
+          ? { id: filename, message: error }
+          : createRollupError(filename, error)
+      )
+    )
+  }
+
+  if (result.tips.length) {
+    result.tips.forEach((tip) =>
+      pluginContext.warn({
+        id: filename,
+        message: tip
+      })
+    )
+  }
+
+  return result
+}
+
+export function getTemplateCompilerOptions(
+  descriptor: SFCDescriptor,
+  options: ResolvedOptions
+): Omit<SFCTemplateCompileOptions, 'source'> | undefined {
+  const block = descriptor.template
+  if (!block) {
+    return
+  }
+  const resolvedScript = getResolvedScript(descriptor, options.ssr)
+  const hasScoped = descriptor.styles.some((s) => s.scoped)
+  return {
+    ...options.template,
+    id: descriptor.id,
+    scoped: hasScoped,
+    isProd: options.isProduction,
+    filename: descriptor.filename,
+    inMap: block.src ? undefined : block.map,
+    ssr: options.ssr,
+    ssrCssVars: descriptor.cssVars,
+    transformAssetUrls: options.template?.transformAssetUrls,
+    compilerOptions: {
+      ...options.template?.compilerOptions,
+      scopeId: hasScoped ? `data-v-${descriptor.id}` : undefined,
+      bindingMetadata: resolvedScript ? resolvedScript.bindings : undefined
+    }
+  }
+}
diff --git a/packages/plugin-vue/src/utils/descriptorCache.ts b/packages/plugin-vue/src/utils/descriptorCache.ts
new file mode 100644
index 00000000000000..1f58f1cb757713
--- /dev/null
+++ b/packages/plugin-vue/src/utils/descriptorCache.ts
@@ -0,0 +1,26 @@
+import { SFCDescriptor } from '@vue/compiler-sfc'
+
+const cache = new Map<string, SFCDescriptor>()
+const prevCache = new Map<string, SFCDescriptor | undefined>()
+
+export function setDescriptor(filename: string, entry: SFCDescriptor) {
+  cache.set(filename, entry)
+}
+
+export function getPrevDescriptor(filename: string) {
+  return prevCache.get(filename)
+}
+
+export function setPrevDescriptor(filename: string, entry: SFCDescriptor) {
+  prevCache.set(filename, entry)
+}
+
+export function getDescriptor(filename: string) {
+  if (cache.has(filename)) {
+    return cache.get(filename)!
+  }
+  throw new Error(
+    `${filename} has no corresponding SFC entry in the cache. ` +
+      `This is a @vitejs/plugin-vue internal error, please open an issue.`
+  )
+}
diff --git a/packages/plugin-vue/src/utils/error.ts b/packages/plugin-vue/src/utils/error.ts
new file mode 100644
index 00000000000000..1ff2fd3e91dae2
--- /dev/null
+++ b/packages/plugin-vue/src/utils/error.ts
@@ -0,0 +1,30 @@
+import { CompilerError } from '@vue/compiler-sfc'
+import { RollupError } from 'rollup'
+
+export function createRollupError(
+  id: string,
+  error: CompilerError | SyntaxError
+): RollupError {
+  if ('code' in error) {
+    return {
+      id,
+      plugin: 'vue',
+      message: error.message,
+      parserError: error,
+      loc: error.loc
+        ? {
+            file: id,
+            line: error.loc.start.line,
+            column: error.loc.start.column
+          }
+        : undefined
+    }
+  } else {
+    return {
+      id,
+      plugin: 'vue',
+      message: error.message,
+      parserError: error
+    }
+  }
+}
diff --git a/packages/plugin-vue/src/utils/query.ts b/packages/plugin-vue/src/utils/query.ts
new file mode 100644
index 00000000000000..19b4c5371aa0ae
--- /dev/null
+++ b/packages/plugin-vue/src/utils/query.ts
@@ -0,0 +1,24 @@
+import qs from 'querystring'
+
+export interface VueQuery {
+  vue?: boolean
+  type?: 'script' | 'template' | 'style' | 'custom'
+  src?: string
+  index?: number
+  lang?: string
+}
+
+export function parseVueRequest(id: string) {
+  const [filename, rawQuery] = id.split(`?`, 2)
+  const query = qs.parse(rawQuery) as VueQuery
+  if (query.vue != null) {
+    query.vue = true
+  }
+  if (query.index) {
+    query.index = Number(query.index)
+  }
+  return {
+    filename,
+    query
+  }
+}
diff --git a/packages/plugin-vue/tsconfig.json b/packages/plugin-vue/tsconfig.json
new file mode 100644
index 00000000000000..3983dfe79d6e28
--- /dev/null
+++ b/packages/plugin-vue/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "include": ["src"],
+  "exclude": ["**/*.spec.ts"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2019",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      // vite typings uses custom paths that is patched into relative paths during build
+      // this is a shim that makes even dev-time vite typings work for plugin-vue
+      "types/*": ["../vite/types/*"]
+    }
+  }
+}
diff --git a/packages/vite/src/client/tsconfig.json b/packages/vite/src/client/tsconfig.json
index d99c1e725d0475..255908148d37a1 100644
--- a/packages/vite/src/client/tsconfig.json
+++ b/packages/vite/src/client/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
+  "include": ["./", "../../types"],
   "compilerOptions": {
     "outDir": "../../dist/client",
     "module": "esnext",
@@ -10,6 +11,5 @@
     "paths": {
       "types/*": ["../../types/*"]
     }
-  },
-  "include": ["./", "../../types"]
+  }
 }
diff --git a/packages/vite/src/node/build/index.ts b/packages/vite/src/node/build/index.ts
index edb72c26afd262..be9eec469cbf66 100644
--- a/packages/vite/src/node/build/index.ts
+++ b/packages/vite/src/node/build/index.ts
@@ -1,3 +1,5 @@
-export interface BuildOptions {}
+export interface BuildOptions {
+  ssr?: boolean
+}
 
 export type BuildHook = () => void
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 4c0b38034cf0ce..d0d9111576f4ea 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -90,6 +90,7 @@ export type ResolvedConfig = Readonly<
     root: string
     command: 'build' | 'serve'
     mode: string
+    isProduction: boolean
     env: Record<string, any>
     plugins: readonly Plugin[]
     server: ServerOptions
@@ -160,22 +161,31 @@ export async function resolveConfig(
     ...normalizedAlias
   ]
 
+  const userEnv = loadEnv(mode, resolvedRoot)
+
+  // Note it is possible for user to have a custom mode, e.g. `staging` where
+  // production-like behavior is expected. This is indicated by NODE_ENV=production
+  // loaded from `.staging.env`.
+  const isProduction =
+    process.env.NODE_ENV === 'production' || mode === 'production'
+
   const resolved = {
     ...config,
     configPath: configPath || null,
     root: resolvedRoot,
     command,
     mode,
+    isProduction,
     alias: resolvedAlias,
     plugins: userPlugins,
     server: config.server || {},
     build: config.build || {},
     env: {
-      ...loadEnv(mode, resolvedRoot),
+      ...userEnv,
       BASE_URL: '/', // TODO
       MODE: mode,
-      DEV: mode !== 'production',
-      PROD: mode === 'production'
+      DEV: !isProduction,
+      PROD: isProduction
     }
   }
 
@@ -354,7 +364,7 @@ function loadEnv(mode: string, root: string, prefix = 'VITE_') {
         ignoreProcessEnv: true
       } as any)
 
-      // only keys that start with prefix are exposed.
+      // only keys that start with prefix are exposed to client
       for (const [key, value] of Object.entries(parsed)) {
         if (key.startsWith(prefix) && env[key] === undefined) {
           env[key] = value
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index c898635d3e2e5a..e4eb669fc26fb2 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -117,9 +117,7 @@ function tryNodeResolve(id: string, basedir: string): string | undefined {
       // necessary to work with pnpm
       preserveSymlinks: isRunningWithYarnPnp || false
     })
-  } catch (e) {
-    isDebug && debug(`${chalk.red(`[failed node resolve]`)} ${id}`)
-  }
+  } catch (e) {}
 
   if (result) {
     if (isDeep) {
@@ -131,6 +129,8 @@ function tryNodeResolve(id: string, basedir: string): string | undefined {
       // resolve package entry
       return resolvePackageEntry(id, result)
     }
+  } else {
+    isDebug && debug(`${chalk.red(`[failed node resolve]`)} ${id}`)
   }
 }
 
diff --git a/packages/vite/src/node/tsconfig.json b/packages/vite/src/node/tsconfig.json
index 501ec8c7a0cee2..70d076cafbf025 100644
--- a/packages/vite/src/node/tsconfig.json
+++ b/packages/vite/src/node/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
+  "include": ["./", "../../types"],
   "compilerOptions": {
     // compile away optional-chaining-operator
     // node support table: https://node.green/#ES2020-features-optional-chaining-operator-----
@@ -12,6 +13,5 @@
     "paths": {
       "types/*": ["../../types/*"]
     }
-  },
-  "include": ["./", "../../types"]
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index a77efc818873e5..486382c9706ff8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -297,6 +297,18 @@
   dependencies:
     "@rollup/pluginutils" "^3.0.8"
 
+"@rollup/plugin-node-resolve@^11.0.1":
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.0.1.tgz#d3765eec4bccf960801439a999382aed2dca959b"
+  integrity sha512-ltlsj/4Bhwwhb+Nb5xCz/6vieuEj2/BAkkqVIKmZwC7pIdl8srmgmglE4S0jFlZa32K4qvdQ6NHdmpRKD/LwoQ==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    "@types/resolve" "1.17.1"
+    builtin-modules "^3.1.0"
+    deepmerge "^4.2.2"
+    is-module "^1.0.0"
+    resolve "^1.19.0"
+
 "@rollup/plugin-typescript@^8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.0.0.tgz#d621d9e268ef591c9e439650f550c5ffc53545c1"
@@ -388,6 +400,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hash-sum@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/hash-sum/-/hash-sum-1.0.0.tgz#838f4e8627887d42b162d05f3d96ca636c2bc504"
+  integrity sha512-FdLBT93h3kcZ586Aee66HPCVJ6qvxVjBlDWNmxSGSbCZe9hTsjRKdSsl4y1T+3zfujxo9auykQMnFsfyHWD7wg==
+
 "@types/node@*", "@types/node@^14.14.10":
   version "14.14.11"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.11.tgz#fc25a4248a5e8d0837019b1d170146d07334abe0"
@@ -403,7 +420,7 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/resolve@^1.17.1":
+"@types/resolve@1.17.1", "@types/resolve@^1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
   integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
@@ -481,6 +498,36 @@
     "@vue/compiler-core" "3.0.4"
     "@vue/shared" "3.0.4"
 
+"@vue/compiler-sfc@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.4.tgz#2119fe1e68d2c268aafa20461c82c139a9adf8e0"
+  integrity sha512-brDn6HTuK6R3oBCjtMPPsIpyJEZFinlnxjtBXww/goFJOJBAU9CrsdegwyZItNnixCFUIg4CLv4Nj1Eg/eKlfg==
+  dependencies:
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/compiler-core" "3.0.4"
+    "@vue/compiler-dom" "3.0.4"
+    "@vue/compiler-ssr" "3.0.4"
+    "@vue/shared" "3.0.4"
+    consolidate "^0.16.0"
+    estree-walker "^2.0.1"
+    hash-sum "^2.0.0"
+    lru-cache "^5.1.1"
+    magic-string "^0.25.7"
+    merge-source-map "^1.1.0"
+    postcss "^7.0.32"
+    postcss-modules "^3.2.2"
+    postcss-selector-parser "^6.0.4"
+    source-map "^0.6.1"
+
+"@vue/compiler-ssr@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.4.tgz#ccbd1f55734d51d1402fad825ac102002a7a07c7"
+  integrity sha512-4aYWQEL4+LS4+D44K9Z7xMOWMEjBsz4Li9nMcj2rxRQ35ewK6uFPodvs6ORP60iBDSkwUFZoldFlNemQlu1BFw==
+  dependencies:
+    "@vue/compiler-dom" "3.0.4"
+    "@vue/shared" "3.0.4"
+
 "@vue/reactivity@3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.4.tgz#b6599dd8271a745960a03f05744ccf7991ba5d8d"
@@ -663,6 +710,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
   integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
 
+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -683,6 +735,11 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
+builtin-modules@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
+  integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
+
 cac@^6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.6.1.tgz#3dde3f6943f45d42a56729ea3573c08b3e7b6a6d"
@@ -712,7 +769,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -857,6 +914,13 @@ console-clear@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
   integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
 
+consolidate@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
+  integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==
+  dependencies:
+    bluebird "^3.7.2"
+
 constantinople@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-4.0.1.tgz#0def113fa0e4dc8de83331a5cf79c8b325213151"
@@ -954,6 +1018,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -1563,6 +1632,13 @@ icss-replace-symbols@^1.1.0:
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
   integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
 
+icss-utils@^4.0.0, icss-utils@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
+  dependencies:
+    postcss "^7.0.14"
+
 icss-utils@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -1709,6 +1785,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
 is-negative-zero@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
@@ -2020,6 +2101,13 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -2390,11 +2478,28 @@ postcss-load-config@^3.0.0:
     cosmiconfig "^7.0.0"
     import-cwd "^3.0.0"
 
+postcss-modules-extract-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
+  dependencies:
+    postcss "^7.0.5"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
+postcss-modules-local-by-default@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0"
+  integrity sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==
+  dependencies:
+    icss-utils "^4.1.1"
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
 postcss-modules-local-by-default@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
@@ -2404,6 +2509,14 @@ postcss-modules-local-by-default@^4.0.0:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
+postcss-modules-scope@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
+  dependencies:
+    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.0"
+
 postcss-modules-scope@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
@@ -2411,6 +2524,14 @@ postcss-modules-scope@^3.0.0:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
+postcss-modules-values@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
+  integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
+  dependencies:
+    icss-utils "^4.0.0"
+    postcss "^7.0.6"
+
 postcss-modules-values@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
@@ -2418,6 +2539,21 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-modules@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-3.2.2.tgz#ee390de0f9f18e761e1778dfb9be26685c02c51f"
+  integrity sha512-JQ8IAqHELxC0N6tyCg2UF40pACY5oiL6UpiqqcIFRWqgDYO8B0jnxzoQ0EOpPrWXvcpu6BSbQU/3vSiq7w8Nhw==
+  dependencies:
+    generic-names "^2.0.1"
+    icss-replace-symbols "^1.1.0"
+    lodash.camelcase "^4.3.0"
+    postcss "^7.0.32"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^3.0.2"
+    postcss-modules-scope "^2.2.0"
+    postcss-modules-values "^3.0.0"
+    string-hash "^1.1.1"
+
 postcss-modules@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.0.0.tgz#2bc7f276ab88f3f1b0fadf6cbd7772d43b5f3b9b"
@@ -2432,7 +2568,7 @@ postcss-modules@^4.0.0:
     postcss-modules-values "^4.0.0"
     string-hash "^1.1.1"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
   integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
@@ -2447,6 +2583,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 postcss@^8.2.1:
   version "8.2.1"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.1.tgz#eabc5557c4558059b9d9e5b15bce7ffa9089c2a8"
@@ -2732,6 +2877,13 @@ rollup@^2.34.2:
   optionalDependencies:
     fsevents "~2.1.2"
 
+rollup@^2.35.1:
+  version "2.35.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.35.1.tgz#e6bc8d10893556a638066f89e8c97f422d03968c"
+  integrity sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 run-parallel@^1.1.9:
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
@@ -3082,6 +3234,13 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -3316,6 +3475,11 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"