Vite CSS HMR breaks when an arbitrary value class with whitespace is used

[miosenpai]

Version

@nuxtjs/tailwindcss: 6.11.4
nuxt: 3.10.3

Reproduction Link

https://stackblitz.com/edit/github-4um3z1

Steps to reproduce

I'm not sure if this bug should be addressed in Nuxt or this module itself so I thought I would start the bug report here (I was not able to reproduce this bug with npm create vue@latest so the problem is likely from Nuxt or this module).

When an arbitrary value Tailwind class with whitespace is used (e.g. font-['Times_New_Roman']), CSS HMR will throw an error on subsequent hard refreshes.

1. Install this module, and use an arbitrary value Tailwind class with whitespace somewhere in the project.
2. Create and import a custom CSS file (in the repro, this is @/assets/custom.css) to trigger CSS HMRs.
3. Edit the custom CSS file (e.g. change color: aqua; to color: magenta;) and save it.
4. Hard refresh the page.

What is Expected?

No error should appear.

What is actually happening?

The following error is thrown.

 ERROR  Internal server error: Parse error /home/projects/github-4um3z1/node_modules/tailwindcss/tailwind.css?direct:489:32                                 7:22:34 PM
      at parse$e (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:16225:355)
      at handleModuleSoftInvalidation (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53757:27)
      at async getCachedTransformResult (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53562:10)
      at async doTransform (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53535:24)
      at async viteTransformMiddleware (/home/projects/github-4um3z1/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:63458:32)

[ineshbose]

Thanks for opening and reporting an issue on this repository. Sorry it took me a while to get to this.

I tried this without the module on a vanilla installation of Tailwind CSS as well, and the issue seems to be persisting (so it's likely not the module); I wouldn't say it's Nuxt core either, but possibly something with Vite.

For now, I can tell you these workarounds:

1. The @/assets/custom.css can be added to css in your Nuxt config.
2. Put the arbitrary classes away from <template> but rather in <script> (as we understand this seems to be some parsing error) like so:

<script setup>
const myClass = "font-['Times_New_Roman']";
</script>

<template>
  <div :class="myClass">
    <p>Test Page</p>
  </div>
</template>

Apologies for this issue - let me see what I can do from my end, meanwhile if you'd like to report on Nuxt/Vite repositories, please feel free to do so!

[ineshbose]

Hi @miosenpai - doing a check/followup if a module/Nuxt/Vue/Vite/package update may have fixed this issue overtime?

[miosenpai]

@ineshbose Tested with a fresh npx nuxi@latest init today and the issue is still present, another user reported a similar error in Nuxt issue as well.

[ineshbose]

Thanks for confirming. I wonder if it's okay I close this issue and we track in nuxt/nuxt#26454 as we confirmed its not a module (or Nuxt) issue as this happens it with a vanilla install too (perhaps we also try to reproduce this with a Vite + TailwindCSS app).

[ineshbose]

Closing this in favour of tracking in nuxt/nuxt#26454 as that has more visibility of Vite and Nuxt core, and has gotten more traction.. 🙂