Skip to content

Conversation

@makkarpov
Copy link
Contributor

Surely, I understand that this is not the best way to fix HMR, and original problem probably lies closer to Vite itself. But this at least makes tailwind usable when Vite breaks, without waiting for upstream fixes.

You can run the playground and edit some styles there, which will result in following HMR events:

HMR events

event 1 (emitted by fix):

{
   "type":"update",
   "updates":[
      {
         "type":"js-update",
         "path":"/@fs/xxx/nuxt-tailwindcss/src/runtime/tailwind.css",
         "acceptedPath":"/@fs/xxx/nuxt-tailwindcss/src/runtime/tailwind.css",
         "timestamp":1657368983171
      },
      {
         "type":"css-update",
         "path":"/@fs/xxx/nuxt-tailwindcss/src/runtime/tailwind.css?direct",
         "acceptedPath":"/@fs/xxx/nuxt-tailwindcss/src/runtime/tailwind.css?direct",
         "timestamp":1657368983171
      }
   ]
}

event 2 (emitted by Vite):

{
   "type":"update",
   "updates":[
      {
         "type":"js-update",
         "timestamp":1657368983171,
         "path":"/pages/index.vue?macro=true",
         "acceptedPath":"/pages/index.vue?macro=true"
      }
   ]
}

Vite event is completely missing any style reload, and disabling the fix will indeed break HMR. Also, config options is provided to switch the fix off if it will break anything some time.

(i'm also not sure what to do with huge yarn.lock diff consisting primarily of shuffled lines)

@atinux atinux merged commit 8cc1cfa into nuxt-modules:main Jul 11, 2022
@atinux
Copy link
Collaborator

atinux commented Jul 11, 2022

Thank you ❤️

@Tahul Tahul mentioned this pull request Jul 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants