[nuxt3] After startup in dev, new classes not added to stylesheet

[replygirl]

trafficstars

Describe the bug Looks like the plugin is only using the classes that can be scanned at startup. HMR works great with classes already in use before app startup, but adding a new class requires a restart.

To Reproduce

1. Start a fresh nuxt3 app with vite enabled, OR clone antfu/vitesse-nuxt3
2. Add nuxt-windicss with no additional settings (if using vitesse, remove uno)
3. Start & open the app (nuxi dev -o)
4. Add a class (via class="foo") - Observe class is added to the element but not to the stylesheet
5. Refresh - Observe class is still not in stylesheet
6. Restart the app - Observe class is in stylesheet

If you have trouble reproducing, let me know and I'll strip down the private repo I'm working in

Environment

• nuxt-windicss 2.0.12
• nuxt3 3.0.0-27313139.1c88580
• node 14.18.1 and 16.13.1

[harlan-zw]

Hey @replygirl

Firstly, thanks so much for the sponsorship! Really appreciate it and will do my best to help you out :)

I have seen this issue before, following along with your steps I wasn't able to replicate it though, unfortunately. I tried with Nuxt Vitesse with the versions you've specified.

What classes are you testing exactly? The way I test this usually is iterating through background colours on a div, i.e adding class="bg-orange-600".

If you have a repo that replicates the issue consistency with those background colour iterations then please send it through and I'll dig into it.

Otherwise if you have any ideas on the exact condition in which it breaks please let me know

[replygirl]

@harlan-zw no problem! dont worry about the priority support thing, i saw that when i sponsored but genuinely just wanna support the work

this issue happened with all utils, i'll try to get you a repo that replicates it soon

[KreskoLab]

same with nuxt 2

[thomas4Bitcraft]

same with nuxt-bridge. Adding new classes require a reload of the nitro server.

[Zenthae]

i have the same issue using :

"nuxt3": "3.0.0-27409835",
"nuxt-windicss": "^2.2.4",
"windicss": "^3.4.3"

the only way to get it working with HMR is by using @apply the <style></style> tag

[Robbe95]

I've had the same problem, disabling attributify solved it for me. In windi.config.ts: attributify: false

[subjacked]

I have the same problem using rc3. I can not add any new classes without having to restart npm run dev. Another problem is that I can not add pseudo elements like before and after. They do sometimes appear but when I restart they are gone. No idea what is going on. I would like to use attributify.

Doesn't work

<button
  class="relative block rounded-full border"
  before="block content-[''] w-px h-4 bg-white absolute top-1/2 transform left-1/2 -translate-y-1/2"
  after="block content-[''] w-4 h-px bg-white absolute top-1/2 transform left-1/2 -translate-x-1/2"
  border="white"
  h="8"
  w="8"
/>

Doesn't work

<button
  class="
    relative block rounded-full border
    before:(block content-[''] w-px h-4 bg-white absolute top-1/2 transform left-1/2 -translate-y-1/2)
    after:(block content-[''] w-4 h-px bg-white absolute top-1/2 transform left-1/2 -translate-x-1/2)
  "
  border="white"
  h="8"
  w="8"
/>

It works when I put the pseudo elements in a css block

.addBtn {
  @apply
    before:(block content-[''] w-px h-4 bg-white absolute top-1/2 transform left-1/2 -translate-y-1/2)
    after:(block content-[''] w-4 h-px bg-white absolute top-1/2 transform left-1/2 -translate-x-1/2)
  ;
}

[king-11]

can confirm for nuxt 2 as well

"nuxt-windicss": "^2.4.3",
 "nuxt": "^2.15.8",
"@nuxtjs/composition-api": "^0.29.3",

Reproduction: https://github.com/COPS-IITBHU/sdg-site