[Feature Request] Split up the global style into required and opt in styling.

[jellehak]

Problem to solve

Current vuetify global css includes a lot of optional selectors which in most use cases aren't used at all. It would be nice to opt in for these functionalities and keep this dry (and reduce bundle size).

Proposed solution

Split up the 'vuetify/styles' into smaller chunks like e.g.:

• 'helpers.css' (paddings, margins, overflow, flex, text helpers, around 279 kB)
• 'colors.css' (colors around 40 kB)
• 'ress.css'
• 'components.css' (this is one is a bit weird as the components already load its own style)

To be non breaking you can add the 'bare' essentials with someting like

import 'vuetify/core'

And opt in for the colors or helpers with

import 'vuetify/helpers' 
import 'vuetify/colors' 

[mandalornl]

@jellehak If I'm reading it correctly, this can already be accomplished.
https://vuetifyjs.com/en/features/sass-variables/#disabling-utility-classes
https://vuetifyjs.com/en/features/sass-variables/#disabling-color-packs

[jellehak]

@mandalornl Ok I didn't knew that seems a solution. The proposal is to make these opt in by not include the helpers in the pre builded css files by default. Since these aren't needed for proper working of Vuetify.

[TomDeSmet]

I'd really like this approach. The other option to disable using these utility classes requires us to install SASS as a dependency. I'm using PostCSS already and have no use of SASS, so it pains me that I need to have this dependency just to tell Vuetify I don't want to use its utility classes.

If I only want to use Vuetify's components, I would like to only load the CSS for the components without the use of a preprocessor.