search

windicss / nuxt-windicss

🍃 Windi CSS for Nuxt ⚡
331 stars 24 forks source link

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

Open replygirl opened 2 years ago

replygirl commented 2 years ago

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

harlan-zw commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

same with nuxt 2

thomas4Bitcraft commented 2 years ago

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

Zenthae commented 2 years ago

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 commented 2 years ago

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

subjacked commented 2 years ago

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 commented 2 years ago

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