Nuxt UI & PurgeCSS

[AndreiMaelstrom]

For what version of Nuxt UI are you asking this question?

v2.x

Description

Hello,

I've been trying to make PurgeCSS work properly with Nuxt UI and the deeper I get the more cumbersome of a process it becomes.

It seems that even though I provided the paths towards the NuxtUI components to PurgeCSS, it still removes CSS that should be used by the specified components, as well as colors which should be available out of the box (i.e yellow). I've even tried to safelist different classes, but again, the more I dig through it the more classes I eventually have to add - so I will be ending up with a never ending list of classes.

Are there any official guidelines on how PurgeCSS should be configured so that it works correctly for the NuxtUI components/colors?

Current config:

defineNuxtConfig({
...
 purgecss: {
   safelist: [... big list ...],
   paths: [
      './components/**/*.vue',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.js',
      './nuxt.config.ts',
      './app.config.ts',
      './node_modules/@nuxt/ui/dist/runtime/components/**/*.vue',
      './node_modules/@nuxt/ui/dist/runtime/ui.config/**/*.js',
      './node_modules/@nuxt/ui/dist/runtime/utils/*.js',
    ],
    content: [
      './components/**/*.vue',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.js',
      './nuxt.config.ts',
      './app.config.ts',
      './node_modules/@nuxt/ui/dist/runtime/components/**/*.vue',
      './node_modules/@nuxt/ui/dist/runtime/ui.config/**/*.js',
      './node_modules/@nuxt/ui/dist/runtime/utils/*.js',
    ],
}
});

Thanks in advance :-)

[benjamincanac]

Sorry I have no knowledge of purgecss to help you but I'm linking #877 as it was discussed there if I remember correctly.

[AndreiMaelstrom]

Thanks for getting back Benjamin!

I went through the linked issue, and it seems more like a general discussion with different "trials" on how to reduce the bundle/css size of NuxtUI. Is there an "official" standpoint or documentation on how to approach this?

Thanks!