CSS doesn't rebuild when .vue files change

[adamwathan]

Reproduction:

https://github.com/adamwathan/vite-vue2-jit-issue

In Tailwind CSS we use the PostCSS dependency message API to tell build tools which files the CSS depends on, so that when those files change the CSS is rebuilt. Tailwind depends on all of your .vue files since it generates CSS based on the classes detected in those files, so we register all of those files as dependencies (see the purge option in the tailwind.config.js file).

This all works properly with Vite + Vue 3 out of the box, but using Vue 2 with this plugin, the CSS doesn't rebuild when .vue files are changed, even though we mark them as dependencies of the CSS.

Here's the issue where this was first raised to me if it helps:

https://github.com/tailwindlabs/tailwindcss/discussions/6187

...and here's a Vue 3 project where you can see things do work as expected:

https://github.com/adamwathan/vite-issue-repro

Thanks! ❤️

[WebMechanic]

https://github.com/adamwathan/vite-issue-repro

404. did you rename/remove the repo?

[adamwathan]

Sorry, had it marked as private by mistake. Should be good now 👍🏻

[icebob]

Same issue here. It works fine with Vue 3 but with Vue 2 and vite-plugin-vue2 doesn't work .

[hivokas]

@adamwathan I'm having the same issue (https://github.com/underfin/vite-plugin-vue2/issues/149). There is a TAILWIND_MODE=watch workaround mentioned in the docs (https://v2.tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files). I've tried TAILWIND_MODE=watch vite, but it doesn't work. Is there a possibility to make this workaround work with vite-plugin-vue2?

[dongj0316]

@hivokas How did you solve it in the end?

[hivokas]

@hivokas How did you solve it in the end?

Slowly migrating the project to Vue 3 :)

[mihalikv]

Same problem here, stackblitz for reproduction: https://stackblitz.com/edit/vue2-vite-starter-249qrd?file=src%2Fcomponents%2FHelloWorld.vue

[oski646]

It's my temporary solution. (tested only with TailwindCSS)

Open node_modules/vite-plugin-vue2/hmr.js and add this code:

    const TAILWIND_PATH = '???'
    const tailwindFile = [...mainModule.importers].find((file) => file.url === TAILWIND_PATH);
    affectedModules.add(tailwindFile)

before

return [...affectedModules].filter(Boolean);

After that, change TAILWIND_PATH variable. For example, I have Tailwind file here: app/javascript/assets/styles/tailwind.css but sourceCodeDir (in the Vite config) is set to app/javascript, so my TAILWIND_PATH variable is /assets/styles/tailwind.css.

How does it work? It forces Vite to reload the main Tailwind file, so all classes are refreshed. You can see additional hmr update in logs.

Hope @underfin or @antfu will fix it soon! 🤞

[mihalikv]

I tried to understand how it works last two hours and I compare it with the Vue 3 implementation. The difference is that in this plugin there are created virtual modules for the template and these modules do not have relation to style via ModuleNode.importers. Inside Vite is code which hot reload style if a module has a dependency to some style.

This is Vue 3 output of handleHotUpdate:

This is Vue 2 output of handleHotUpdate :

I have a fix for that and I will provide PR in a short time.

[elthariel]

Enormous quantity of <3 to @mihalikv and @antfu for providing a fix, and to @adamwathan for reporting and digging. This was driving me completely crazy :hankey:

[vafanassieff]

Thanks a lot !