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

[Hai Yang Tang]

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)

[Inesh Bose]

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!