windicss / nuxt-windicss

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

Pug classes doesn't work in Nuxt3 #144

Open xxSkyy opened 2 years ago

xxSkyy commented 2 years ago

I don't know if it's bug or it's not implemented but in Nuxt3 pug templates classes doesn't work in any case

.bg-red-500.p-2 Text

or

div(class="bg-red-500 p-2") Text

doesn't work, only html

for repro just take any actual nuxt3 + windicss sandbox add pug and pug-plain-loader dependencies and convert template to pug. it won't load any class

Edit:

div(class="bg-red-500 p-2") Text

seems to work, it didn't few days ago or I din't notice it works 🤷🏼‍♂️

jbmolle commented 2 years ago

I've tested it and it seems that the class syntax works but Pug syntax doesn't. p(class="text-red-600") My Text will show correctly a red text. But p.text-red-600 My Text doesn't show the red text

xxSkyy commented 2 years ago

I've tested it and it seems that the class syntax works but Pug syntax doesn't. p(class="text-red-600") My Text will show correctly a red text. But p.text-red-600 My Text doesn't show the red text

You're right, I've updated issue

jbmolle commented 2 years ago

The problem comes from require('pug') in getDefaultExtractors function. One solution is to add the following to your nuxt.config.ts import { PugExtractor } from 'vite-plugin-windicss And then

windicss: {
  config: {
    extract: {
      extractors: [{
        extractor: PugExtractor,
        extensions: ['vue', 'pug']
      }]
    }
  }
}