chore: Merge remote-tracking branch 'vite/main' into feat/worker-sour…

…cemaps

# Conflicts:
#	packages/vite/src/node/plugins/worker.ts
#	packages/vite/src/node/plugins/workerImportMetaUrl.ts

docs/config/index.md

@@ -156,6 +156,8 @@ export default defineConfig(({ command, mode }) => {
 
   - Starting from `2.0.0-beta.70`, string values will be used as raw expressions, so if defining a string constant, it needs to be explicitly quoted (e.g. with `JSON.stringify`).
 
+  - To be consistent with [esbuild behavior](https://esbuild.github.io/api/#define), expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier.
+
   - Replacements are performed only when the match is surrounded by word boundaries (`\b`).
 
   ::: warning
@@ -550,14 +552,12 @@ export default defineConfig(({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number | false, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }`
 
   Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server).
 
   Set `server.hmr.overlay` to `false` to disable the server error overlay.
 
-  Set `server.hmr.port` to `false` when connecting to a domain without a port.
-
   `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server.
 
   If specifying `server.hmr.server`, Vite will process HMR connection requests through the provided server. If not in middleware mode, Vite will attempt to process HMR connection requests through the existing server. This can be helpful when using self-signed certificates or when you want to expose Vite over a network on a single port.

docs/guide/assets.md

@@ -103,8 +103,13 @@ function getImageUrl(name) {
 }
 ```
 
-During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing.
+During the production build, Vite will perform necessary transforms so that the URLs still point to the correct location even after bundling and asset hashing. However, the URL string must be static so it can be analyzed, otherwise the code will be left as is, which can cause runtime errors if `build.target` does not support `import.meta.url`
 
-::: warning Note: Does not work with SSR
+```js
+// Vite will not transform this
+const imgUrl = new URL(imagePath, import.meta.url).href
+```
+
+::: warning Does not work with SSR
 This pattern does not work if you are using Vite for Server-Side Rendering, because `import.meta.url` have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.
 :::

docs/guide/env-and-mode.md

@@ -37,7 +37,7 @@ Vite uses [dotenv](https://github.com/motdotla/dotenv) to load additional enviro
 
 An env file for a specific mode (e.g. `.env.production`) will take higher priority than a generic one (e.g. `.env`).
 
-In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files.
+In addition, environment variables that already exist when Vite is executed have the highest priority and will not be overwritten by `.env` files. For example, when running `VITE_SOME_KEY=123 vite build`.
 
 `.env` files are loaded at the start of Vite. Restart the server after making changes.
 :::
@@ -57,7 +57,7 @@ If you want to customize env variables prefix, see [envPrefix](/config/index#env
 
 :::warning SECURITY NOTES
 
-- `.env.*.local` files are local-only and can contain sensitive variables. You should add `.local` to your `.gitignore` to avoid them being checked into git.
+- `.env.*.local` files are local-only and can contain sensitive variables. You should add `*.local` to your `.gitignore` to avoid them being checked into git.
 
 - Since any variables exposed to your Vite source code will end up in your client bundle, `VITE_*` variables should _not_ contain any sensitive information.
   :::

package.json

@@ -90,6 +90,13 @@
     "overrides": {
       "vite": "workspace:*",
       "@vitejs/plugin-vue": "workspace:*"
+    },
+    "packageExtensions": {
+      "postcss-load-config": {
+        "peerDependencies": {
+          "postcss": "*"
+        }
+      }
     }
   }
 }

packages/playground/fs-serve/__tests__/fs-serve.spec.ts

@@ -23,6 +23,15 @@ describe('main', () => {
       expect(await page.textContent('.safe-fetch-status')).toBe('200')
     })
 
+    test('safe fetch with special characters', async () => {
+      expect(
+        await page.textContent('.safe-fetch-subdir-special-characters')
+      ).toMatch('KEY=safe')
+      expect(
+        await page.textContent('.safe-fetch-subdir-special-characters-status')
+      ).toBe('200')
+    })
+
     test('unsafe fetch', async () => {
       expect(await page.textContent('.unsafe-fetch')).toMatch('403 Restricted')
       expect(await page.textContent('.unsafe-fetch-status')).toBe('403')
@@ -33,6 +42,13 @@ describe('main', () => {
       expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
     })
 
+    test('safe fs fetch with special characters', async () => {
+      expect(await page.textContent('.safe-fs-fetch-special-characters')).toBe(
+        stringified
+      )
+      expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
+    })
+
     test('unsafe fs fetch', async () => {
       expect(await page.textContent('.unsafe-fs-fetch')).toBe('')
       expect(await page.textContent('.unsafe-fs-fetch-status')).toBe('403')

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

@@ -11,6 +11,8 @@ <h2>Safe Fetch</h2>
 <h2>Safe Fetch Subdirectory</h2>
 <pre class="safe-fetch-subdir-status"></pre>
 <pre class="safe-fetch-subdir"></pre>
+<pre class="safe-fetch-subdir-special-characters-status"></pre>
+<pre class="safe-fetch-subdir-special-characters"></pre>
 
 <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch-status"></pre>
@@ -19,6 +21,8 @@ <h2>Unsafe Fetch</h2>
 <h2>Safe /@fs/ Fetch</h2>
 <pre class="safe-fs-fetch-status"></pre>
 <pre class="safe-fs-fetch"></pre>
+<pre class="safe-fs-fetch-special-characters-status"></pre>
+<pre class="safe-fs-fetch-special-characters"></pre>
 
 <h2>Unsafe /@fs/ Fetch</h2>
 <pre class="unsafe-fs-fetch-status"></pre>
@@ -56,6 +60,16 @@ <h2>Denied</h2>
       text('.safe-fetch-subdir', JSON.stringify(data))
     })
 
+  // inside allowed dir, with special characters, safe fetch
+  fetch('/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.txt')
+    .then((r) => {
+      text('.safe-fetch-subdir-special-characters-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.safe-fetch-subdir-special-characters', JSON.stringify(data))
+    })
+
   // outside of allowed dir, treated as unsafe
   fetch('/unsafe.txt')
     .then((r) => {
@@ -92,6 +106,20 @@ <h2>Denied</h2>
       console.error(e)
     })
 
+  // not imported before, inside root with special characters, treated as safe
+  fetch(
+    '/@fs/' +
+      ROOT +
+      '/root/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.json'
+  )
+    .then((r) => {
+      text('.safe-fs-fetch-special-characters-status', r.status)
+      return r.json()
+    })
+    .then((data) => {
+      text('.safe-fs-fetch-special-characters', JSON.stringify(data))
+    })
+
   // .env, denied by default
   fetch('/@fs/' + ROOT + '/root/.env')
     .then((r) => {

packages/playground/fs-serve/root/src/special characters åäö/safe.json

@@ -0,0 +1,3 @@
+{
+  "msg": "safe"
+}

packages/playground/fs-serve/root/src/special characters åäö/safe.txt

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

packages/playground/resolve/__tests__/resolve.spec.ts

@@ -17,7 +17,10 @@ test('deep import with exports field', async () => {
 })
 
 test('deep import with query with exports field', async () => {
-  expect(await page.textContent('.exports-deep-query')).not.toMatch('fail')
+  // since it is imported with `?url` it should return a url
+  expect(await page.textContent('.exports-deep-query')).toMatch(
+    isBuild ? /base64/ : '/exports-path/deep.json'
+  )
 })
 
 test('deep import with exports field + exposed dir', async () => {

packages/playground/resolve/index.html

@@ -171,10 +171,11 @@ <h2>resolve package that contains # in path</h2>
   import e from 'resolve-browser-field/ext-index/index.js'
   import f from 'resolve-browser-field/ext-index'
   import g from 'resolve-browser-field/no-ext-index/index.js' // no substitution
+  import h from 'resolve-browser-field/no-ext?query'
 
   import { ra, rb, rc, rd, re, rf, rg } from 'resolve-browser-field/relative'
 
-  const success = [main, a, c, d, e, f, ra, rc, rd, re, rf]
+  const success = [main, a, c, d, e, f, h, ra, rc, rd, re, rf]
   const noSuccess = [b, g, rb, rg]
 
   if (

packages/playground/tailwind-sourcemap/__tests__/build.spec.ts

@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (isBuild) {
+  test('should not output sourcemap warning (#4939)', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch('Sourcemap is likely to be incorrect')
+    })
+  })
+} else {
+  test('this file only includes test for build', () => {
+    expect(true).toBe(true)
+  })
+}

packages/playground/tailwind-sourcemap/__tests__/serve.spec.ts

@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (!isBuild) {
+  test('should not output missing source file warning', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
+    })
+  })
+} else {
+  test('this file only includes test for serve', () => {
+    expect(true).toBe(true)
+  })
+}

packages/playground/tailwind-sourcemap/index.html

@@ -0,0 +1,9 @@
+<div class="wrapper">
+  <h1>Tailwind Sourcemap</h1>
+
+  <p class="text-red-400">foo</p>
+</div>
+
+<script type="module">
+  import './tailwind.css'
+</script>

packages/playground/tailwind-sourcemap/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "test-tailwind-sourcemap",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.0.23"
+  }
+}

packages/playground/tailwind-sourcemap/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: __dirname + '/tailwind.config.js' }
+  }
+}

packages/playground/tailwind-sourcemap/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./index.html'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

packages/playground/tailwind-sourcemap/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/playground/tailwind-sourcemap/vite.config.js

@@ -0,0 +1,11 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  css: {
+    devSourcemap: true
+  },
+  build: {
+    sourcemap: true
+  }
+}

packages/playground/vue/Main.vue

@@ -20,6 +20,7 @@
   </Suspense>
   <ReactivityTransform :foo="time" />
   <SetupImportTemplate />
+  <WorkerTest />
 </template>
 
 <script setup lang="ts">
@@ -35,7 +36,7 @@ import ScanDep from './ScanDep.vue'
 import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
-
+import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 
 const time = ref('loading...')

packages/playground/vue/__tests__/vue.spec.ts

@@ -242,3 +242,9 @@ describe('setup import template', () => {
     expect(await page.textContent('.setup-import-template')).toMatch('1')
   })
 })
+
+describe('vue worker', () => {
+  test('should work', async () => {
+    expect(await page.textContent('.vue-worker')).toMatch('worker load!')
+  })
+})

packages/playground/vue/worker.vue

@@ -0,0 +1,17 @@
+<template>
+  <h2>worker template error match</h2>
+  <code>
+    const worker = new Worker(new URL('./worker.js', import.meta.url))
+  </code>
+  <div class="vue-worker">{{ message }}</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+const worker = new Worker(new URL('./workerTest.js', import.meta.url))
+worker.addEventListener('message', (ev) => {
+  message.value = ev.data
+})
+</script>

packages/playground/vue/workerTest.js

@@ -0,0 +1 @@
+self.postMessage('worker load!')

packages/playground/worker/__tests__/es/es-worker.spec.ts

@@ -60,7 +60,7 @@ if (isBuild) {
   // assert correct files
   test('inlined code generation', async () => {
     const files = fs.readdirSync(assetsDir)
-    expect(files.length).toBe(20)
+    expect(files.length).toBe(22)
     const index = files.find((f) => f.includes('main-module'))
     const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
     const worker = files.find((f) => f.includes('my-worker'))
@@ -94,7 +94,7 @@ test('classic worker', async () => {
 
 test('emit chunk', async () => {
   expect(await page.textContent('.emti-chunk-worker')).toMatch(
-    '{"msg1":"module1","msg2":"module2","msg3":"module3"}'
+    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
   )
   expect(await page.textContent('.emti-chunk-dynamic-import-worker')).toMatch(
     '"A string/es/"'

packages/playground/worker/emit-chunk-nested-worker.js

@@ -1,7 +1,28 @@
 import SubWorker from './emit-chunk-sub-worker?worker'
-
 const subWorker = new SubWorker()
 
 subWorker.onmessage = (event) => {
-  self.postMessage(event.data)
+  self.postMessage({
+    type: 'emit-chunk-sub-worker',
+    data: event.data
+  })
 }
+
+const moduleWorker = new Worker(
+  new URL('./module-and-worker.js', import.meta.url),
+  { type: 'module' }
+)
+
+moduleWorker.onmessage = (event) => {
+  self.postMessage({
+    type: 'module-and-worker:worker',
+    data: event.data
+  })
+}
+
+import('./module-and-worker').then((res) => {
+  self.postMessage({
+    type: 'module-and-worker:module',
+    data: res.module
+  })
+})

packages/playground/worker/emit-chunk-sub-worker.js

@@ -1,6 +1,8 @@
-Promise.all([import('./modules/module2'), import('./modules/module3')]).then(
-  (data) => {
-    const _data = { ...data[0], ...data[1] }
-    self.postMessage(_data)
-  }
-)
+Promise.all([
+  import('./module-and-worker'),
+  import('./modules/module2'),
+  import('./modules/module3')
+]).then((data) => {
+  const _data = { ...data[0], ...data[1], ...data[2] }
+  self.postMessage(_data)
+})