fix: update watch mode

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

@@ -246,6 +246,7 @@ if (isBuild) {
     }
   })
 }
+
 describe('css and assets in css in build watch', () => {
   if (isBuild) {
     test('css will not be lost and css does not contain undefined', async () => {
@@ -254,7 +255,26 @@ describe('css and assets in css in build watch', () => {
       const cssFile = findAssetFile(/index\.\w+\.css$/, 'foo')
       expect(cssFile).not.toBe('')
       expect(cssFile).not.toMatch(/undefined/)
-      watcher?.close()
+    })
+
+    test('import module.css', async () => {
+      expect(await getColor('#foo')).toBe('red')
+      editFile(
+        'css/foo.module.css',
+        (code) => code.replace('red', 'blue'),
+        true
+      )
+      await notifyRebuildComplete(watcher)
+      await page.reload()
+      expect(await getColor('#foo')).toBe('blue')
+    })
+
+    test('import with raw query', async () => {
+      expect(await page.textContent('.raw-query')).toBe('foo')
+      editFile('static/foo.txt', (code) => code.replace('foo', 'zoo'), true)
+      await notifyRebuildComplete(watcher)
+      await page.reload()
+      expect(await page.textContent('.raw-query')).toBe('zoo')
     })
   }
 })

packages/playground/assets/css/foo.module.css

@@ -0,0 +1,3 @@
+.foo-module {
+  color: red;
+}

packages/playground/assets/index.html

@@ -204,6 +204,10 @@ <h3 class="import-css">@import</h3>
 <h3 class="foo-public">
   @import CSS from publicDir should load (this should be red)
 </h3>
+<h3 id="foo">import module css</h3>
+
+<h3 class="raw-query"></h3>
+
 <style>
   @import '/foo.css';
 </style>
@@ -257,6 +261,12 @@ <h3 class="foo-public">
   document.querySelector('.import-meta-url-img-comma-nl').src =
     metaUrlWithCommaNL
 
+  import classNames from './css/foo.module.css'
+  document.querySelector('#foo').className = classNames['foo-module']
+
+  import someString from './static/foo.txt?raw'
+  document.querySelector('.raw-query').textContent = someString
+
   /**
    * don't process the code in the comment
    * const url = new URL('non_existent_file.png', import.meta.url)

packages/playground/assets/static/foo.txt

@@ -0,0 +1 @@
+foo

packages/vite/src/node/build.ts

@@ -43,6 +43,7 @@ import { scanImports } from './optimizer/scan'
 import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl'
 import { loadFallbackPlugin } from './plugins/loadFallback'
 import { watchPackageDataPlugin } from './packages'
+import { ensureWatchPlugin } from './plugins/ensureWatch'
 
 export interface BuildOptions {
   /**
@@ -311,6 +312,7 @@ export function resolveBuildPlugins(config: ResolvedConfig): {
   const options = config.build
   return {
     pre: [
+      ...(options.watch ? [ensureWatchPlugin()] : []),
       watchPackageDataPlugin(config),
       buildHtmlPlugin(config),
       commonjsPlugin(options.commonjsOptions),

packages/vite/src/node/plugins/ensureWatch.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from '../plugin'
+import { cleanUrl, queryRE } from '../utils'
+
+/**
+ * plugin to ensure rollup can watch correctly.
+ */
+export function ensureWatchPlugin(): Plugin {
+  return {
+    name: 'vite:ensure-watch',
+    load(id) {
+      if (queryRE.test(id)) {
+        this.addWatchFile(cleanUrl(id))
+      }
+      return null
+    }
+  }
+}

packages/vite/src/node/plugins/index.ts

@@ -17,6 +17,7 @@ import { preAliasPlugin } from './preAlias'
 import { definePlugin } from './define'
 import { ssrRequireHookPlugin } from './ssrRequireHook'
 import { workerImportMetaUrlPlugin } from './workerImportMetaUrl'
+import { ensureWatchPlugin } from './ensureWatch'
 import { metadataPlugin } from './metadata'
 
 export async function resolvePlugins(
@@ -26,12 +27,14 @@ export async function resolvePlugins(
   postPlugins: Plugin[]
 ): Promise<Plugin[]> {
   const isBuild = config.command === 'build'
+  const isWatch = isBuild && !!config.build.watch
 
   const buildPlugins = isBuild
     ? (await import('../build')).resolveBuildPlugins(config)
     : { pre: [], post: [] }
 
   return [
+    isWatch ? ensureWatchPlugin() : null,
     isBuild ? metadataPlugin() : null,
     isBuild ? null : preAliasPlugin(),
     aliasPlugin({ entries: config.resolve.alias }),

scripts/jestPerTestSetup.ts

@@ -142,7 +142,7 @@ beforeAll(async () => {
           global.watcher = rollupOutput as RollupWatcher
           await notifyRebuildComplete(global.watcher)
         }
-        const url = (global.viteTestUrl = await startStaticServer())
+        const url = (global.viteTestUrl = await startStaticServer(isWatch))
         await page.goto(url)
       }
     }
@@ -164,13 +164,14 @@ afterAll(async () => {
   global.serverLogs = []
   await global.page?.close()
   await server?.close()
+  global.watcher?.close()
   const beforeAllErr = getBeforeAllError()
   if (beforeAllErr) {
     throw beforeAllErr
   }
 })
 
-function startStaticServer(): Promise<string> {
+function startStaticServer(isWatch: boolean): Promise<string> {
   // check if the test project has base config
   const configFile = resolve(rootDir, 'vite.config.js')
   let config: UserConfig | undefined
@@ -187,7 +188,7 @@ function startStaticServer(): Promise<string> {
   }
 
   // start static file server
-  const serve = sirv(resolve(rootDir, 'dist'))
+  const serve = sirv(resolve(rootDir, 'dist'), { dev: isWatch })
   const httpServer = (server = http.createServer((req, res) => {
     if (req.url === '/ping') {
       res.statusCode = 200