Using pug with vite+tailwindcss in JIT mode causes HMR to not detect changes in new css compiled classes

[gbea]

What version of Tailwind CSS are you using?

v3.0.0 (but the bug was present before, when enabling JIT)

What build tool (or framework if it abstracts the build tool) are you using?

vite 2.7.1

What version of Node.js are you using?

v14.18.1

What browser are you using?

Chrome, Safari, Firefox

What operating system are you using?

Ubuntu, NixOS, macOS

Reproduction URL

https://github.com/gbea/vite-pug-tailwind-JIT-bug

Describe your issue

The HMR seems to have a different behavior between regular HTML and pug templates in vue sfc.

• When using Tailwind in JIT mode, the HTML template works well and the HMR picks up when tailwind has recompiled the index.css. Terminal output when modify a .vue file with HTML template :

[vite] hmr update /src/components/TestHtml.vue
hmr update /src/index.css

• But when using a pug template, the HMR only detects a change in the vue file (so the content and the classes are updated) but it does not detect a change in the index.css, and the classes are not applied. Terminal output :

[vite] hmr update /src/components/TestPug.vue?vue&type=template&lang.js

A page reload, or any modification to the index.css (even through a html template), allows us to eventually see the styles.

I opened this issue in vitejs, but it was marked as upstream : vitejs/vite#4588

[millerrafi]

Any ideas for a fix?

I wrote a quick chokidar workaround to brute force the HMR updates, it seems to help

// scripts/jit-workaround.mjs

import chokidar from 'chokidar';
import fs from 'fs';

chokidar
  .watch('./src/**/*.vue', { persistent: true })
  .on('all', (event, path) => {
    console.log(event, path);

    fs.writeFileSync(
      './src/main.css',
      fs.readFileSync('./src/main.css', 'utf8')
    );
  });

[songololo]

I've been trying the suggested workarounds but nothing seems to work just yet. Is there any hope of a quick fix or does this require reverting to HTML for the foreseeable future?

[songololo]

An update that for my use-case this issue has seemingly resolved itself after completely removing the node_modules folder and reinstalling all...

[LouieMartin]

Same for snowpack and @snowpack/plugin-sass

[zachbryant]

I'm not sure the issue is related to pug, because I've been using it for a week or so before experiencing this issue.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I am pretty sure this is a Vite issue and not a Tailwind issue.
Vite a very similar issue when using .vue files in general (see: vitejs/vite#3717)

For example, if you change your postcss.config.js to this structure:

module.exports = {
  plugins: [
    /* This is a new plugin, unrelated to Tailwind */
    function (root) {
      console.log('A change happened!')
      return root
    },


    /* Other plugins in the chain */
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

...then restart your server.

What you will notice is that whenever you change something in the TestHtml.vue file then you will see that A change happened! is logged in your terminal. Whenever you change something in the TestPug.vue file, you will not see that log. This means that PostCSS is not called when a change occurs. This also means that Tailwind is not called and therefore doesn't know about the changes.

Another important part is that Tailwind registers your content paths as a dir dependency to PostCSS. Such a dependency message for PostCSS looks something like this:

{
  dependency: {
    type: 'dir-dependency',
    dir: '/Users/robin/github.com/gbea/vite-pug-tailwind-JIT-bug/src',
    glob: '**/*.{vue,js,ts,jsx,tsx}'
  }
}

Notice that the full glob is passed in which includes the .vue file.

So unless I'm missing something, I think that this is an actual Vite bug and not a Tailwind bug.

[thecrypticace]

Looks like a PR has been opened for this in Vite — but has not been merged. This is definitely a Vite issue because PostCSS isn't run at all in some cases when updating files.

vitejs/vite#6987

[mbaytas]

I have had a similar problem while developing a Ghost theme with Tailwind, and solved it by tweaking the watchers in my gulpfile.

In my gulpfile, the line that configured the watcher for my Handlebars (HBS) templates looked like this:

const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);

This would execute the HBS task when I saved a change to my front end code. However, it did not execute the CSS task, which meant that my CSS file in which I was importing Tailwind was not re-processed properly.

See below:

function hbs(done) {
    pump([
        src(['./*.hbs', './partials/**/*.hbs']),
        livereload()
    ], handleError(done));
}

function css(done) {
    pump([
        src('assets/css/*.css', {sourcemaps: true}),
        postcss([
            easyimport,
            colorFunction(),
            tailwindcss(),
            autoprefixer(),
            // cssnano()
        ]),
        dest('assets/built/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));
}

I solved it by adding the CSS task into the callback of the HBS watcher:

const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], series(hbs, css));

[adamwathan]

Coming back to this, this is a bug in Vite and not in Tailwind and since that's been captured as an issue over there, I think we're going to close this on our end since there's no action we can take to resolve it in the Tailwind codebase.

vitejs/vite#6987

If you're dealing with this issue, please continue the conversation over there where there's actually something that can be done to push it forward, and with any luck someone working on Vite will be willing to finish it off and get it merged in if they think the fix makes sense.