Skip to content

Avoid full reload in @tailwindcss/vite when editing a scanned file that is not a loaded module#20323

Open
UditDewan wants to merge 2 commits into
tailwindlabs:mainfrom
UditDewan:fix/vite-full-reload-unloaded-modules
Open

Avoid full reload in @tailwindcss/vite when editing a scanned file that is not a loaded module#20323
UditDewan wants to merge 2 commits into
tailwindlabs:mainfrom
UditDewan:fix/vite-full-reload-unloaded-modules

Conversation

@UditDewan

Copy link
Copy Markdown

Summary

Fixes #20320

In dev mode, @tailwindcss/vite's hotUpdate hook has a fallback that sends a full-reload for files that Tailwind scans but that aren't handled by Vite or any plugin (e.g. .php or .html templates). Without it, edits to those files wouldn't refresh the page at all.

However, the check ("every module for this file is an asset and/or has no id") also matches JS/TS source files that Tailwind has scanned but that Vite hasn't loaded as a module yet — lazy routes, unvisited chunks, and so on. The scanner's addWatchFile call creates an asset-type module-graph node with id === undefined for every scanned file, and for a not-yet-loaded .tsx there is no real JS node next to it, so the fallback fires and the whole page reloads, throwing away all client state. In apps with route-level code splitting this happens on almost every edit to a not-currently-loaded component.

This change exempts JS/TS module files (.js, .jsx, .ts, .tsx, .mjs, .cjs, .mts, .cts) from the fallback. Vite handles these files itself whenever they are actually loaded, and for scanned-but-unloaded files any new candidates still flow through the regular CSS update, so nothing is lost by skipping the reload:

  • Editing a scanned-but-unloaded .ts file now results in a targeted {"type":"update"} for the Tailwind stylesheet instead of {"type":"full-reload"}, and the generated CSS includes the new candidates.
  • Editing a scanned external .php file still triggers a full reload as before.

Test plan

  • Added an integration test that boots a Vite 8 dev server with a src/unloaded.ts file that is scanned but never imported. A small fixture plugin wraps environment.hot.send to log every HMR payload. The test edits unloaded.ts and asserts that an update payload is sent (not a full-reload) and that the stylesheet regenerates with the new candidate.
  • Verified both directions manually against a minimal reproduction (Vite 8.1.4): before the change, editing the unloaded file logs HOT_SEND {"type":"full-reload"}; after the change it logs HOT_SEND {"type":"update", ...} for /src/index.css and the CSS contains the new candidate. Editing a scanned .php file still logs HOT_SEND {"type":"full-reload"}.
pnpm exec vitest run --root=./integrations vite/index.test.ts -t "scanned module files that are not loaded do not trigger a full reload"

@UditDewan UditDewan requested a review from a team as a code owner July 12, 2026 04:19
@coderabbitai

coderabbitai Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 4e2c5e27-7811-44f2-8a6c-7ac58a75019f

📥 Commits

Reviewing files that changed from the base of the PR and between 35a3e9c and 70c4643.

📒 Files selected for processing (3)
  • CHANGELOG.md
  • integrations/vite/index.test.ts
  • packages/@tailwindcss-vite/src/index.ts

Walkthrough

The Vite plugin now detects external JavaScript and TypeScript files during hot updates and skips the full-reload path for them. A new integration test covers a scanned but unloaded module, captures HMR payloads, verifies an update instead of a full reload, and checks regenerated CSS. The changelog documents the fix under the unreleased changes.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main fix: avoiding full reloads for scanned files that are not yet loaded modules.
Description check ✅ Passed The description matches the code changes and test coverage for the unloaded JS/TS hot-update behavior.
Linked Issues check ✅ Passed The PR addresses #20320 by exempting scanned-but-unloaded JS/TS modules from the full-reload fallback while keeping template files on reload.
Out of Scope Changes check ✅ Passed The changes stay focused on the hot-update fix, its integration test, and a changelog note with no unrelated additions.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@greptile-apps

greptile-apps Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Confidence Score: 5/5

This looks safe to merge.

  • No blocking issues found in the changed code.

Reviews (1): Last reviewed commit: "Add changelog entry" | Re-trigger Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@tailwindcss/vite forces full page reload when editing a scanned .tsx that isn't a loaded module (Vite 8)

1 participant