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

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 () => {