Vite + router + tailwind JIT -> full page reload

Describe the bug

Follow up of #4147 , when editing Vue templates, I get full page reload instead of HMR.

Reproduction

https://github.com/jods4/bug-vite-tailwind/

Go into HelloWorld.vue, change the class bg-yellow-400 into bg-green-400.

Notice on the terminal or in the browser that vite triggered a full page reload. I’d expect HMR here.

I first tried without Vue router and it worked, so I’m not sure where the problem lies exactly.

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 5.05 GB / 15.79 GB
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.1593.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.2 => 1.2.4
    vite: ^2.3.3 => 2.4.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[lhermann]

@patak-js thanks, learned something new today. I linked #4267 and can confirm that it resolves the issue, HMR works as expected 🎉

[paraboul]

I tried to revert 09c6c94690ea3fc8b66bb6781995b3e15faedf8f locally, hmr triggers on index.css without page reload when updating Page.vue, but the component itself doesn’t update.

Edit:

HMR is broken with tailwindcss (jit mode) since 2.3.7 (component simply won’t update). The fix introduced in 2.4.1 (09c6c94690ea3fc8b66bb6781995b3e15faedf8f) makes it doing a full page reload instead of doing nothing.

Edit 2:

After editing Page.vue, its update is propagated (propagateUpdate) with index.css as an importer, leading to this code to be called : https://github.com/OneNail/vite/blob/328a2940963e52f1bf30412564624ff1715155cb/packages/vite/src/node/server/hmr.ts#L247-L256

This is the object received by propagateUpdate() :

  id: null,
  file: '/Users/anthonycatel/dev/bug-vite-tailwind/src/views/Page.vue',
  importers: Set(1) {
    ModuleNode {
      id: '/Users/anthonycatel/dev/bug-vite-tailwind/index.css?direct',
      file: '/Users/anthonycatel/dev/bug-vite-tailwind/index.css',
      importers: Set(0) {},
      importedModules: [Set],
      acceptedHmrDeps: Set(0) {},
      isSelfAccepting: true,
      transformResult: null,
      ssrTransformResult: null,
      ssrModule: null,
      lastHMRTimestamp: 1626186072440,
      url: '/index.css?direct',
      type: 'css'
    }
  },
  importedModules: Set(0) {},
  acceptedHmrDeps: Set(0) {},
  isSelfAccepting: false,
  transformResult: null,
  ssrTransformResult: null,
  ssrModule: null,
  lastHMRTimestamp: 1626186072440,
  url: '/@fs//Users/anthonycatel/dev/bug-vite-tailwind/src/views/Page.vue',
  type: 'js'
}

I’m not sure why routes.ts is not part of the importers list

IIUC, tailwind tells postcss to register all the purgeable files as a dependencies and so this is being called : https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L674 leading to Page.vue being a deps of index.css

This precise case could be fixed by importing index.css from main.js instead of being a link in index.html (somehow routes.ts becomes an importer in addition to index.css in that case. But then the same issue could arise for SFC at the end of the chain. (Edit 3: I added another test case for this here : https://github.com/paraboul/vue-hmr-reload/tree/alt)

I’m laking a bit of context here to go forward with a fix.

Edit 4 :

Overall it seems that the issue is that Tailwind (JIT) generated css (index.css) somehow mess up with the importers list of SFC and strips any other importers in some cases.