[Feature Request] Enable automatic CSS treeshaking or purging in Nuxt Vuetify

[ManasMadrecha]

Problem to solve

With treeshaking enabled and set to true, the unused CSS should be removed automatically. But instead, currently, even with hardly using one or two components, 200-300kb worth of CSS is generated. Even with no Vuetify components being used, there's this much CSS generated.

Proposed solution

Remove the unused CSS.

Additional references:

1. https://stackoverflow.com/questions/59263711/vuetify-automatic-treeshaking-in-nuxt-js
2. Treeshaking fails at CSS nuxt-community/vuetify-module#342
3. [Bug] TreeShaking not working properly (src is included in bundle) nuxt-community/vuetify-module#382 (comment)
4. https://github.com/patrickxchong/nuxt-vuetify-purgecss/blob/master/nuxt.config.js

[KaelWD]

200-300kb worth of CSS is generated

The vast majority of this is utility classes which gzip extremely well, the entire framework's css with all components is only around 50kB gzipped. If that's is still too much it is possible to disable these styles, see #12512.

[ManasMadrecha]

@KaelWD Thanks for your quick response, but on #12512, you have shared a link to the variables file, but this link is broken. By any chance, did you mean this link: https://github.com/vuetifyjs/vuetify-loader/blob/master/dev5/src/_variables.scss

I tried this in my Nuxt + Tailwind website, and it's amazing now I can use the full power of awesome Vuetify components without so much bloated css like my, py, etc. and for CSS, I anyway have JIT enabled Tailwind. Thanks a lot for this tip. 😊

[ManasMadrecha]

@KaelWD Similar to removing utilities, is there a way to disable the rtl classes?