Vite Branch template changes not triggering Tailwind JIT recompile

[dlindberg]

Describe the bug

On the branch craft-vite Tailwind JIT is not recompiling the css when template changes occur in template files.

To reproduce

Steps to reproduce the behaviour:

1. composer create-project nystudio107/craft:dev-craft-vite vitecraft --no-install --remove-vcs
2. make dev
3. Load http://localhost:8000 in browser
4. Editing: src/templates/index.twig
5. Add a paragraph to the template (confirms that auto reload is working and detecting changes to template files)
6. Add a class to the paragraph eg: <p class="bg-red-900">
7. Auto re-load will occur again, but the background will not update.
8. Reload the docker containers ctrl-c then make dev
9. Reloading http://localhost:8000 after the Docker Project finishes restarting confirms a valid Tailwind class and that Tailwind will see and use the template file to rebuild the CSS.

Alternative option starting at step 4:

1. Editing: src/vue/App.vue
2. Add a paragraph to the vue template.
3. Module will successfully re-load adding the paragraph.
4. Add the class already added in (step 6 above) to the paragraph (background is added successfully).
5. Change to a new class class="bg-blue-900"
6. Changes will not show up until the docker project is re-loaded.

Expected behavior

A red background to appear at step 6. Or a blue background at step 5

Discussion

At first I thought this could be an issue with the Docker file system, but that doesn't follow with Vite successfully detecting template changes to cause the page re-load. And also properly reloading the Vue templates.

Then I thought it could be because ../src/templates/**/*.{twig,html} was pointing to a different source directory from ./src/vue/**/*.{vue,html}, but changing to ./src/templates/**/*.{twig,html} did not resolve the issue. Which led me to also test the Vue side of this.

Then I attempted simplifying the tailwind config:

// module exports
module.exports = {
  mode: 'jit',
  purge: [
      './src/templates/**/*.{twig,html}',
      './src/vue/**/*.{vue,html}',
    ],
  theme: {
  },
  corePlugins: {},
  plugins: [],
};

Which also didn't resolve the issue (though still correctly resolves things on initial load).

So I think it is a path problem of some kind, but I can't work out how to correct it, because basically everything appears to be running on defaults.

[dlindberg]

Some additional trouble shooting after reading through #69. This appears to be another Vite 2.6 regression, pinning the Vite version to 2.5.10 resolved the issue. However, moving the source files into the folder and removing the symlink did not provide a work around as in #69. Which led me to finally finding Vite #5408. So known issue.

[khalwat]

yep, known issue, unfortunately. Track it here too: tailwindlabs/tailwindcss#5877

[dlindberg]

Do you happen to know of a better work around instead of re-loading the containers?

[khalwat]

Roll back to 2.5.x is the only solution I'm aware of right now.

[khalwat]

Looks like they've fixed it (no release cut yet tho): vitejs/vite#5571

[davidhellmann]

Looks like with beta 2.7 it works but then the build failed because the plugin-legacy 😵‍💫

[dlindberg]

I meant to make a note to that effect. I've been debating if it is time to pull the plug on a legacy build though. It is used by more than just IE, but not by a lot. And I wouldn't call my support of those browsers particularly robust beyond, "here is a bundle that might work on your machine, but also good luck with the some CSS stuff where your browser is also a bit buggy"