Skip to content
This repository has been archived by the owner on Feb 17, 2023. It is now read-only.

CSS doesn't rebuild when .vue files change #153

Closed
adamwathan opened this issue Nov 25, 2021 · 11 comments
Closed

CSS doesn't rebuild when .vue files change #153

adamwathan opened this issue Nov 25, 2021 · 11 comments

Comments

@adamwathan
Copy link

adamwathan commented Nov 25, 2021

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:

tailwindlabs/tailwindcss#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
Copy link

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

  1. did you rename/remove the repo?

@adamwathan
Copy link
Author

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

@icebob
Copy link

icebob commented Dec 12, 2021

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

@hivokas
Copy link

hivokas commented Dec 14, 2021

@adamwathan I'm having the same issue (#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
Copy link

@hivokas How did you solve it in the end?

@hivokas
Copy link

hivokas commented Jan 24, 2022

@hivokas How did you solve it in the end?

Slowly migrating the project to Vue 3 :)

@mihalikv
Copy link
Contributor

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

@oski646
Copy link

oski646 commented Jan 24, 2022

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
Copy link
Contributor

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:
image

This is Vue 2 output of handleHotUpdate :
image

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

mihalikv added a commit to mihalikv/vite-plugin-vue2 that referenced this issue Jan 24, 2022
mihalikv added a commit to mihalikv/vite-plugin-vue2 that referenced this issue Jan 25, 2022
@antfu antfu closed this as completed Jan 25, 2022
@elthariel
Copy link

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 💩

@vafanassieff
Copy link

Thanks a lot !

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants