feat: rebase

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
           version: 6
 
       - name: Set node version to ${{ matrix.node_version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
           cache: "pnpm"
@@ -82,7 +82,7 @@ jobs:
           version: 6
 
       - name: Set node version to 16
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: "pnpm"

.github/workflows/publish.yml

@@ -23,7 +23,7 @@ jobs:
           version: 6
 
       - name: Set node version to 16.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           registry-url: https://registry.npmjs.org/

.npmrc

@@ -0,0 +1,7 @@
+hoist-pattern[]=*eslint*
+hoist-pattern[]=*babel*
+hoist-pattern[]=*jest*
+hoist-pattern[]=@emotion/*
+hoist-pattern[]=postcss
+hoist-pattern[]=pug
+hoist-pattern[]=source-map-support

.prettierignore

@@ -10,3 +10,4 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 packages/playground/tsconfig-json-load-error/has-error/tsconfig.json
 packages/playground/html/invalid.html
+packages/playground/worker/classic-worker.js

CONTRIBUTING.md

@@ -28,6 +28,22 @@ If you want to use break point and explore code execution you can use the ["Run
 
 5. The execution will stop and you'll use the [Debug toolbar](https://code.visualstudio.com/docs/editor/debugging#_debug-actions) to continue, step over, restart the process...
 
+### Debugging errors in Jest tests using Playwright (Chromium)
+
+Some errors are masked and hidden away because of the layers of abstraction and sandboxed nature added by Jest, Playwright, and Chromium. In order to see what's actually going wrong and the contents of the devtools console in those instances, follow this setup:
+
+1. Add a `debugger` statement to the `scripts/jestPerTestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits.
+
+1. Run the tests with the `debug-serve` script command which will enable remote debugging: `pnpm run debug-serve -- --runInBand resolve`.
+
+1. Wait for inspector devtools to open in your browser and the debugger to attach.
+
+1. In the sources panel in the right column, click the play button to resume execution and allow the tests to run which will open a Chromium instance.
+
+1. Focusing the Chomium instance, you can open the browser devtools and inspect the console there to find the underlying problems.
+
+1. To close everything, just stop the test process back in your terminal.
+
 ## Testing Vite against external packages
 
 You may wish to test your locally-modified copy of Vite against another package that is built with Vite. For pnpm, after building Vite, you can use [`pnpm.overrides`](https://pnpm.io/package_json#pnpmoverrides). Please note that `pnpm.overrides` must be specified in the root `package.json` and you must first list the package as a dependency in the root `package.json`:

docs/config/index.md

@@ -508,12 +508,14 @@ export default defineConfig(async ({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
 
   Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server).
 
   Set `server.hmr.overlay` to `false` to disable the server error overlay.
 
+  Set `server.hmr.port` to `false` when connecting to a domain without a port.
+
   `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server.
 
   When using `server.middlewareMode` or `server.https`, assigning `server.hmr.server` to your HTTP(S) server will process HMR connection requests through your server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.

packages/playground/assets/__tests__/assets.spec.ts

@@ -8,8 +8,7 @@ import {
   readManifest,
   readFile,
   editFile,
-  notifyRebuildComplete,
-  untilUpdated
+  notifyRebuildComplete
 } from '../../testUtils'
 
 const assetMatch = isBuild
@@ -38,7 +37,7 @@ describe('injected scripts', () => {
 
   test('html-proxy', async () => {
     const hasHtmlProxy = await page.$(
-      'script[type="module"][src^="/foo/index.html?html-proxy"]'
+      'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
     )
     if (isBuild) {
       expect(hasHtmlProxy).toBeFalsy()
@@ -121,6 +120,10 @@ describe('css url() references', () => {
     const match = isBuild ? `data:image/png;base64` : `/foo/nested/icon.png`
     expect(await getBg('.css-url-base64-inline')).toMatch(match)
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
+    const icoMatch = isBuild ? `data:image/x-icon;base64` : `favicon.ico`
+    const el = await page.$(`link.ico`)
+    const herf = await el.getAttribute('href')
+    expect(herf).toMatch(icoMatch)
   })
 
   test('multiple urls on the same line', async () => {
@@ -255,15 +258,3 @@ describe('css and assets in css in build watch', () => {
     })
   }
 })
-
-if (!isBuild) {
-  test('@import in html style tag hmr', async () => {
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
-    editFile(
-      './css/import.css',
-      (code) => code.replace('#0088ff', '#00ff88'),
-      true
-    )
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
-  })
-}

packages/playground/assets/index.html

@@ -2,6 +2,7 @@
 
 <head>
   <meta charset="UTF-8" />
+  <link class="ico" rel="icon" type="image/svg+xml" href="favicon.ico" />
 </head>
 
 <link rel="icon" href="data:," />

packages/playground/backend-integration/package.json

@@ -10,5 +10,8 @@
   },
   "dependencies": {
     "tailwindcss": "^2.2.19"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.2.11"
   }
 }

packages/playground/css/__tests__/postcss-plugins-different-dir.spec.ts

@@ -0,0 +1,29 @@
+import { getColor, getBgColor } from '../../testUtils'
+import { createServer } from 'vite'
+import path from 'path'
+
+// Regression test for https://github.com/vitejs/vite/issues/4000
+test('postcss plugins in different dir', async () => {
+  const port = 5005
+  const server = await createServer({
+    root: path.join(__dirname, '..', '..', 'tailwind'),
+    logLevel: 'silent',
+    server: {
+      port,
+      strictPort: true
+    },
+    build: {
+      // skip transpilation during tests to make it faster
+      target: 'esnext'
+    }
+  })
+  await server.listen()
+  try {
+    await page.goto(`http://localhost:${port}`)
+    const tailwindStyle = await page.$('.tailwind-style')
+    expect(await getBgColor(tailwindStyle)).toBe('rgb(254, 226, 226)')
+    expect(await getColor(tailwindStyle)).toBe('rgb(136, 136, 136)')
+  } finally {
+    await server.close()
+  }
+})

packages/playground/css/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",
+    "fast-glob": "^3.2.11",
     "less": "^4.1.2",
     "postcss-nested": "^5.0.6",
     "sass": "^1.43.4",

packages/playground/define/__tests__/define.spec.ts

@@ -20,4 +20,13 @@ test('string', async () => {
   expect(await page.textContent('.spread-array')).toBe(
     JSON.stringify([...defines.__STRING__])
   )
+  expect(await page.textContent('.import-file')).not.toBe(
+    `import * from "${defines.__IMPORT_FILE_NAME__}"`
+  )
+  expect(await page.textContent('.export-file')).not.toBe(
+    `export * from "${defines.__EXPORT_FILE_NAME__}"`
+  )
+  expect(await page.textContent('.path')).not.toBe(
+    `import * from "xxxx/${defines.PATH}"`
+  )
 })

packages/playground/define/index.html

@@ -9,6 +9,9 @@ <h1>Define</h1>
 <p>process as property: <code class="process-as-property"></code></p>
 <p>spread object: <code class="spread-object"></code></p>
 <p>spread array: <code class="spread-array"></code></p>
+<p>import file: <code class="import-file"></code></p>
+<p>export file: <code class="export-file"></code></p>
+<p>path: <code class="path"></code></p>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name
@@ -26,6 +29,9 @@ <h1>Define</h1>
     })
   )
   text('.spread-array', JSON.stringify([...`"${__STRING__}"`]))
+  text('.import-file', `import * from "__IMPORT_FILE_NAME__"`)
+  text('.export-file', `export * from "__EXPORT_FILE_NAME__"`)
+  text('.path', `import * from "xxxx/PATH"`)
 
   function text(el, text) {
     document.querySelector(el).textContent = text

packages/playground/define/vite.config.js

@@ -16,6 +16,9 @@ module.exports = {
       }
     },
     __VAR_NAME__: false,
-    'process.env.SOMEVAR': '"SOMEVAR"'
+    'process.env.SOMEVAR': '"SOMEVAR"',
+    __IMPORT_FILE_NAME__: '"importFileName"',
+    __EXPORT_FILE_NAME__: '"exportFileName"',
+    PATH: '"filePath"'
   }
 }

packages/playground/env-nested/.env

@@ -0,0 +1 @@
+VITE_PARENT_ENV=dont_load_me

packages/playground/env-nested/__tests__/env-nested.spec.ts

@@ -0,0 +1,15 @@
+import { isBuild } from 'testUtils'
+
+const mode = isBuild ? `production` : `development`
+
+test('mode', async () => {
+  expect(await page.textContent('.mode')).toBe(mode)
+})
+
+test('mode file override', async () => {
+  expect(await page.textContent('.mode-file')).toBe(`.env.${mode}`)
+})
+
+test('should not load parent .env file', async () => {
+  expect(await page.textContent('.parent-env')).not.toBe('dont_load_me')
+})

packages/playground/env-nested/envs/.env.development

@@ -0,0 +1 @@
+VITE_EFFECTIVE_MODE_FILE_NAME=.env.development

packages/playground/env-nested/envs/.env.production

@@ -0,0 +1 @@
+VITE_EFFECTIVE_MODE_FILE_NAME=.env.production

packages/playground/env-nested/index.html

@@ -0,0 +1,16 @@
+<h1>Nested Environment Variables</h1>
+<p>import.meta.env.MODE: <code class="mode"></code></p>
+<p>
+  import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME: <code class="mode-file"></code>
+</p>
+<p>Empty import.meta.env.VITE_PARENT_ENV: <code class="parent-env"></code></p>
+
+<script type="module">
+  text('.mode', import.meta.env.MODE)
+  text('.mode-file', import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME)
+  text('.parent-env', import.meta.env.VITE_PARENT_ENV)
+
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+</script>

packages/playground/env-nested/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test-env-nested",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "preview": "vite preview"
+  }
+}

packages/playground/env-nested/vite.config.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('vite')
+
+module.exports = defineConfig({
+  envDir: './envs'
+})

packages/playground/fs-serve/root/src/index.html

@@ -8,6 +8,10 @@ <h2>Safe Fetch</h2>
 <pre class="safe-fetch-status"></pre>
 <pre class="safe-fetch"></pre>
 
+<h2>Safe Fetch Subdirectory</h2>
+<pre class="safe-fetch-subdir-status"></pre>
+<pre class="safe-fetch-subdir"></pre>
+
 <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch-status"></pre>
 <pre class="unsafe-fetch"></pre>
@@ -42,6 +46,15 @@ <h2>Denied</h2>
     .then((data) => {
       text('.safe-fetch', JSON.stringify(data))
     })
+  // inside allowed dir, safe fetch
+  fetch('/src/subdir/safe.txt')
+    .then((r) => {
+      text('.safe-fetch-subdir-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.safe-fetch-subdir', JSON.stringify(data))
+    })
 
   // outside of allowed dir, treated as unsafe
   fetch('/unsafe.txt')

packages/playground/fs-serve/root/src/subdir/safe.txt

@@ -0,0 +1 @@
+KEY=safe

packages/playground/json/index.html

@@ -19,6 +19,9 @@ <h2>Importing as URL</h2>
 <h2>Raw Import</h2>
 <pre class="raw"></pre>
 
+<h2>JSON Module</h2>
+<pre class="module"></pre>
+
 <script type="module">
   import json, { hello } from './test.json'
   import deepJson, { name } from 'vue/package.json'
@@ -46,6 +49,9 @@ <h2>Raw Import</h2>
   import raw from './test.json?raw'
   text('.raw', raw)
 
+  import moduleJSON from 'json-module'
+  text('.module', JSON.stringify(moduleJSON))
+
   function text(sel, text) {
     document.querySelector(sel).textContent = text
   }

packages/playground/json/json-module/index.json

@@ -0,0 +1,3 @@
+{
+  "hello": "hi"
+}

packages/playground/json/json-module/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "json-module",
+  "version": "0.0.0"
+}

packages/playground/json/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "json-module": "file:./json-module"
   }
 }

packages/playground/legacy/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-legacy": "workspace:*"
+    "@vitejs/plugin-legacy": "workspace:*",
+    "express": "^4.17.1"
   }
 }

packages/playground/multiple-entrypoints/package.json

@@ -7,5 +7,9 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "preview": "vite preview"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.2.11",
+    "sass": "^1.43.4"
   }
 }

packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -46,7 +46,7 @@ test('dedupe', async () => {
   expect(await page.textContent('.dedupe button')).toBe('count is 1')
 })
 
-test('cjs borwser field (axios)', async () => {
+test('cjs browser field (axios)', async () => {
   expect(await page.textContent('.cjs-browser-field')).toBe('pong')
 })
 
@@ -62,6 +62,10 @@ test('import * from optimized dep', async () => {
   expect(await page.textContent('.import-star')).toMatch(`[success]`)
 })
 
+test('import from dep with .notjs files', async () => {
+  expect(await page.textContent('.not-js')).toMatch(`[success]`)
+})
+
 test('dep with css import', async () => {
   expect(await getColor('h1')).toBe('red')
 })

packages/playground/optimize-deps/dep-not-js/foo.js

@@ -0,0 +1 @@
+export const foo = '[success] imported from .notjs file'

packages/playground/optimize-deps/dep-not-js/index.notjs

@@ -0,0 +1,4 @@
+<notjs>
+import { foo } from './foo'
+export const notjsValue = foo
+</notjs>