@apply causes vitejs to HMR all files until maximum call stack error.

[brielov]

What version of Tailwind CSS are you using?

3.0.23

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

Vite 2.8.6

What version of Node.js are you using?

v17.5.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

brielov/react-app

Describe your issue

When using tailwindcss + vite, if you use css modules with @apply, when you save any file, it will cause an infinite HMR loop. I'm reporting this here cause this only happens while using tailwind's apply directive.

TailwindCSS config

module.exports = {
  content: ["index.html", "src/**/*.tsx"],
  theme: {
    extend: {
      screens: {
        standalone: { raw: "(display-mode: standalone)" },
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

PostCSS config

module.exports = {
  plugins: [
    require("tailwindcss/nesting")(require("postcss-nesting")),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

Screen.Recording.2022-03-29.at.13.40.18.mov

[brielov]

Keep in mind this is a three component example. I'm using this same setup on medium-large project and is unusable. Every time I save I get a maximum call stack error.

[thecrypticace]

So I'm not able to reproduce the maximum call stack error but I do see the list of files being much longer than necessary.

I believe this is because in v3.0.23 every file with @apply is registered as changing the "context" that Tailwind CSS uses to build CSS which has the effect of registering more files for updates than necessary. I'm about 95% sure this was fixed by #7524 but it's not in a tagged release yet.

In the meantime you can use our insiders build by running npm install tailwindcss@insiders and it should resolve your problem. Can you give that a try and let us know if that fixes it for you?

[brielov]

@thecrypticace dude, I love you. This issue was driving me crazy and I can confirm using the insiders tag actually solves the problem. Thank you so much.

[thecrypticace]

Hahah YES. Glad to hear that fixes it for you! 🎉🎉 Happy to help!

Closing since the issue itself is fixed. I don't know when we'll have a tagged release out next but the insiders build is sufficient to use for now. 🚀

[aschojz]

the problems seems to be appearing again. With v3.2.2 everything works fine, but if I upgrade above I get broken HMR. Anyone else experiencing this?

[Assone]

the problems seems to be appearing again. With v3.2.2 everything works fine, but if I upgrade above I get broken HMR. Anyone else experiencing this?

me too