fix(hmr): register css deps as `type: asset` #20391

sapphi-red · 2025-07-10T08:50:34Z

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 · 2025-07-10T08:51:55Z

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

-                if (url.startsWith('data:')) {
-                  depModules.add(moduleGraph.createFileOnlyEntry(file))
-                } else {
-                  depModules.add(await moduleGraph.ensureEntryFromUrl(url))


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

sapphi-red · 2025-07-10T08:53:42Z

packages/vite/src/node/server/hmr.ts

+  const isClientHtmlChange =
+    file.endsWith('.html') && environment.name === 'client'
+
+  if (needFullReload || isClientHtmlChange) {


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

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 ... }

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 · 2025-07-10T08:56:12Z

packages/vite/src/node/server/hmr.ts

-    // additionally check for CSS importers, since a PostCSS plugin like
-    // Tailwind JIT may register any file as a dependency to a CSS file.
-    for (const importer of node.importers) {
-      if (isCSSRequest(importer.url) && !currentChain.includes(importer)) {
-        propagateUpdate(
-          importer,
-          traversedModules,
-          boundaries,
-          currentChain.concat(importer),
-        )
-      }
-    }


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 · 2025-07-10T08:58:02Z

/ecosystem-ci run

pkg-pr-new · 2025-07-10T08:58:52Z

Open in StackBlitz

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

commit: 02f1fe2

vite-ecosystem-ci · 2025-07-10T09:25:55Z

📝 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 · 2025-07-10T09:32:15Z

I need to check the plugin-vue failure.

sapphi-red · 2025-07-10T11:34:17Z

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

playground/tailwind/__test__/tailwind.spec.ts

hi-ogawa · 2025-07-28T07:57:06Z

packages/vite/src/node/server/hmr.ts

+  const isClientHtmlChange =
+    file.endsWith('.html') && environment.name === 'client'
+
+  if (needFullReload || isClientHtmlChange) {


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 · 2025-07-28T08:09:14Z

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

-                  depModules.add(await moduleGraph.ensureEntryFromUrl(url))
-                }
-              }
+              depModules.add(moduleGraph.createFileOnlyEntry(file))


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

packages/vite/src/node/server/hmr.ts

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

f0432f4

sapphi-red added feat: hmr p3-minor-bug An edge case that only affects very specific usage (priority) labels Jul 10, 2025

sapphi-red mentioned this pull request Jul 10, 2025

fix(hmr): reload CSS when inlined SVG is changed #18972

Closed

sapphi-red added the feat: css label Jul 10, 2025

sapphi-red commented Jul 10, 2025

View reviewed changes

chore: update type

82a73a2

vite-ecosystem-ci bot added the trigger: preview label Jul 10, 2025

sapphi-red marked this pull request as draft July 10, 2025 09:32

fix: handle html import case

c30247f

sapphi-red marked this pull request as ready for review July 10, 2025 11:34

sapphi-red added this to the 7.1 milestone Jul 23, 2025

hi-ogawa added a commit to vitejs/vite-plugin-react that referenced this pull request Jul 23, 2025

chore(rsc): test vitejs/vite#20391

cf33c29

hi-ogawa mentioned this pull request Jul 23, 2025

chore(rsc): test https://github.com/vitejs/vite/pull/20391 vitejs/vite-plugin-react#616

Closed

sapphi-red requested a review from hi-ogawa July 28, 2025 03:40

hi-ogawa mentioned this pull request Jul 28, 2025

Replace isCSSRequest check with moduleNode.type === 'css' vitejs/vite-plugin-react#617

Closed

hi-ogawa reviewed Jul 28, 2025

View reviewed changes

sapphi-red added 4 commits July 28, 2025 18:11

chore: update test name

30fa462

fix(hmr): don't fallback to full reload if the HTML is imported from JS

9eea422

chore: merge main

0f1a8dd

chore: fix lint

f61267f

hi-ogawa previously approved these changes Jul 28, 2025

View reviewed changes

sapphi-red requested a review from Copilot July 29, 2025 10:06

Copilot AI reviewed Jul 29, 2025

View reviewed changes

packages/vite/src/node/server/hmr.ts Outdated Show resolved Hide resolved

chore: update comment

02f1fe2

sapphi-red dismissed hi-ogawa’s stale review via 02f1fe2 July 29, 2025 10:20

sapphi-red merged commit 7eac8dd into vitejs:main Jul 29, 2025
17 checks passed

sapphi-red deleted the fix/hmr-register-css-dependencies-as-type-asset branch July 29, 2025 10:26

timacdonald mentioned this pull request Jul 29, 2025

Vite triggers reload for any file in any folder laravel/vite-plugin#324

Closed

hi-ogawa mentioned this pull request Aug 1, 2025

fix(rsc): avoid unnecessary server hmr due to tailwind module deps vitejs/vite-plugin-react#658

Merged

sapphi-red mentioned this pull request Aug 9, 2025

fix(hmr): watch non-inlined assets referenced by CSS #20581

Merged

hi-ogawa mentioned this pull request Sep 10, 2025

After 7.1 Vite is not hot reloading pages when changing php files with tailwindcss #20743

Closed

6 tasks

Uh oh!

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

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

Uh oh!

Conversation

sapphi-red commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

sapphi-red Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sapphi-red Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

hi-ogawa Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sapphi-red Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

sapphi-red Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

sapphi-red commented Jul 10, 2025

Uh oh!

pkg-pr-new bot commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vite-ecosystem-ci bot commented Jul 10, 2025

Uh oh!

sapphi-red commented Jul 10, 2025

Uh oh!

sapphi-red commented Jul 10, 2025

Uh oh!

Uh oh!

hi-ogawa Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hi-ogawa Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

hi-ogawa left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix(hmr): register css deps as `type: asset` #20391

fix(hmr): register css deps as `type: asset` #20391

sapphi-red commented Jul 10, 2025 •

edited

Loading

sapphi-red Jul 10, 2025 •

edited

Loading

hi-ogawa Jul 28, 2025 •

edited

Loading

pkg-pr-new bot commented Jul 10, 2025 •

edited

Loading

hi-ogawa Jul 28, 2025 •

edited

Loading