fix(css): page reload was not happening with .css?raw (#16455)

Author: sapphi-red

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

@@ -18,6 +18,7 @@ import {
   CLIENT_PUBLIC_PATH,
   DEP_VERSION_RE,
   FS_PREFIX,
+  SPECIAL_QUERY_RE,
 } from '../constants'
 import {
   debugHmr,
@@ -743,7 +744,8 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
       // update the module graph for HMR analysis.
       // node CSS imports does its own graph update in the css-analysis plugin so we
       // only handle js graph updates here.
-      if (!isCSSRequest(importer)) {
+      // note that we want to handle .css?raw and .css?url here
+      if (!isCSSRequest(importer) || SPECIAL_QUERY_RE.test(importer)) {
         // attached by pluginContainer.addWatchFile
         const pluginImports = (this as any)._addedImports as
           | Set<string>

playground/css/__tests__/css.spec.ts

@@ -448,6 +448,16 @@ test('?raw', async () => {
   expect(await rawImportCss.textContent()).toBe(
     readFileSync(require.resolve('../raw-imported.css'), 'utf-8'),
   )
+
+  if (!isBuild) {
+    editFile('raw-imported.css', (code) =>
+      code.replace('color: yellow', 'color: blue'),
+    )
+    await untilUpdated(
+      () => page.textContent('.raw-imported-css'),
+      'color: blue',
+    )
+  }
 })
 
 test('import css in less', async () => {