fix(hmr): register css deps as type: asset

[sapphi-red]

Description

This PR is a revised version of #18972.

The dependencies registered by this.addWatchFile in CSS is now added to the module graph with type: 'asset'. In past, it was added with type: 'js'. This made the JS dep and non-JS dep to be mixed and caused other issues (#3929, #4127, #9512)

fixes #9512
fixes #19786
fixes #19563
refs #8356

[sapphi-red]

Since this line is removed, #19563 and #19786 will be fixed.

[sapphi-red]

This part is added for cases that was covered by
https://github.com/vitejs/vite/pull/20391/files#diff-863416a9b0769ffb1d7e36b6840ce6d0d84170a80a5c4ce4539464b0ebcbd137L801-L813

[hi-ogawa]

I understand the intent of this change with respect to the old code, but I just wondered what if html raw import. I think new code forces this to be full reload on html change, but previously the parent module can hmr with the code like this?

import html from "./some-file.html?raw";

export function MyComponent() {
  console.log(html)
  return ...
}

[sapphi-red]

I've pushed a commit to fix that case (9eea422). The downside is that if the index.html is imported (import html from './index.html?raw'), the full-reload won't happen even if it should. But I think that's fine as that was the previous behavior and this is really an edge case.

[sapphi-red]

This part is no longer needed. type=asset module is a separate module from type=js, so updateModules is called separately for CSS files.

[sapphi-red]

/ecosystem-ci run

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vite@20391

commit: 02f1fe2

[vite-ecosystem-ci]

📝 Ran ecosystem CI on 82a73a2: Open

suite	result	latest scheduled
vike	❌ failure	❌ failure
one	❌ failure	✅ success
vite-plugin-vue	❌ failure	✅ success
histoire	❌ failure	❌ failure
vite-plugin-rsc	✅ success	❌ failure

✅ ladle, laravel, analogjs, vite-plugin-react, astro, storybook, marko, vite-plugin-svelte, vite-setup-catalogue, vite-environment-examples, react-router, qwik, rakkas, nuxt, quasar, vite-plugin-cloudflare, sveltekit, unocss, vite-plugin-pwa, waku, vitest, vuepress, vitepress

[sapphi-red]

I need to check the plugin-vue failure.

[sapphi-red]

It was a bug in plugin-vue: vitejs/vite-plugin-vue#625

[hi-ogawa]

I understand the intent of this change with respect to the old code, but I just wondered what if html raw import. I think new code forces this to be full reload on html change, but previously the parent module can hmr with the code like this?

import html from "./some-file.html?raw";

export function MyComponent() {
  console.log(html)
  return ...
}

[hi-ogawa]

This is great! I just explored the case in vitejs/vite-plugin-react#616, so let me share what I found. Client hot update looks like this when changing server component:

before

🔷 [hotUpdate] client [
  {
    environment: 'client',
    url: '/src/routes/root.tsx',
    id: '/home/hiroshi/code/others/vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/root.tsx',
    file: '/home/hiroshi/code/others/vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/root.tsx',
    type: 'js',
    info: undefined,
    meta: undefined,
    importers: [ '/src/styles.css?direct', '/src/styles.css' ],

after

🔷 [hotUpdate] client [
  {
    environment: 'client',
    url: '/@fs//home/hiroshi/code/others/vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/root.tsx',
    id: null,
    file: '/home/hiroshi/code/others/vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/root.tsx',
    type: 'asset',
    info: undefined,
    meta: undefined,
    importers: [ '/src/styles.css?direct', '/src/styles.css' ],

In my case, I already had filter based on id ctx.modules.map((mod) => mod.id).filter((v) => v !== null), so id: null also helped not hitting my custom css hot update handling.

The double slash in url: '/@fs//...' looks odd, but I'd assume it's essentially a placeholder value, so it shouldn't matter much.

[hi-ogawa]

LGTM!

[Copilot]

Pull Request Overview

This PR fixes an issue where CSS dependencies were being incorrectly registered as JavaScript modules in the module graph, causing mixed dependencies and HMR problems. The fix ensures that CSS dependencies (like files watched via addWatchFile) are now properly registered with type: 'asset' instead of type: 'js'.

• Changed module type from 'js' | 'css' to include 'asset' type for better categorization
• Updated HMR logic to handle asset modules correctly and trigger appropriate reload behavior
• Added specific handling for HTML file changes to trigger full page reloads when needed

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/vite/src/node/server/moduleGraph.ts	Core changes to support 'asset' module type and ensure file-only modules are created as assets
packages/vite/src/node/server/mixedModuleGraph.ts	Type definition update to include 'asset' type
packages/vite/src/node/server/hmr.ts	HMR logic updates to handle asset modules and HTML file changes properly
packages/vite/src/node/plugins/css.ts	Simplified CSS dependency handling to use createFileOnlyEntry for all imports
playground/tailwind/*	Test case additions to verify HMR behavior with HTML file changes
playground/assets/*	Test case additions to verify raw HTML import HMR functionality