Purging CSS in third party libraries

[ymansurozer]

Don't forget to add paths to pages and components that are not part the common folders (e.g. third party packages)

Does this mean we cannot purge CSS used by libraries imported as NPM packages? Or is there a common method for doing that? I've found this but it seems a bit outdated.

[TheAlexLichter]

You can purge third-party CSS too but it is a bit tedious. Then you'd have to add the path to all components you use so PurgeCSS can track classes that are in the components there.

Whitelisting might be a better option

[ymansurozer]

Thank you very much, truly appreciated. Please indulge me for asking this but I understand whitelist is the safelist option of PurgeCSS and that is used to "indicate which selectors are safe to leave in the final CSS." But I do not understand how I can use that to purge third party libraries. Are you saying purge everything (not sure how it can be done) but safelist some packages?

[CMQNordic]

I use v2 with Vuetify 3 (and Nuxt 3) and when for test from beginning adding a single component in my main index.vue file, and build for prduction, then the styling for this butt is missing. When buildig for dev (with purgeCss disabled) same button looks fine. As Vuetify is a third party library I am a bit unsure how I can add path to exclude all the vuetify components relate styling from beeing removed... as I am will use plenty during development. Shall I for each new component add a path to corresponding component in node_modules/vietify/...

Or is it a bug? I use Vuetify treeshaking as described in https://next.vuetifyjs.com/en/features/treeshaking/

Shall I report is as a bug and provide my repo?

Best Regards
/Martin

[TheAlexLichter]

This is not a bug. You have to point to the folders/files that use the CSS (not the component) or whitelist the classes manually ☺️

[CMQNordic]

But this file that uses the general vuetify component is index.vue. How do prevent from removing styles that vuetify adde to style the button?

my repo
https://github.com/CMQNordic/vuetify-3-nuxt-3-minimal-optimized-starter

npm run dev
&
npm run generate
npm run preview

right now running dev and running generate/preview look very diffrent...

[updated]
Found solution. the repo above implements it and it works fine..

[TheAlexLichter]

You'd have to either:

• Add the path to the Vuetify button component
• Or whitelist the classes that the vuetify button is using

Don't forget: PurgeCSS is a "dumb" tool that just looks for css classes in the content of your components, pages etc.

[CMQNordic]

Hi again ManniL.
I have NO CLUE how I can add path to Vuetify button component as I cannot find any, or white list all those classes that Vuitify adds on the button element during the building process...

Vuetify 3 is a UI framework on top Nuxt. It is very popular and widely used (spacialy for vuetify 2 as Vuetify 3 is pretty new) and it is here where plugin like this PurgeCSS show off as the framwork adds all stylings in css bundle but normally just a minor part (im my case v-btn related only) is used. Unfortunatel from what you write it will never work with Vuetify :(

Reason as I see it:
Im my page index.vue I add (mostly for testing just this) <v-btn>press me</v-btn>

(..nd Nuxt 3 auto imports vBtn somehow. No question how..!?)

After build the is extracted into following:
<button type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-v-929e0e90="">...</button>

What I see in the created index.XXX.css file in 2 modes.

1. Without PurgeCS enabled: ".v-btn--elevated" class exists.
2. With PurgeCSS enabled: ".v-btn--elevated" class DO NOT exist
   Note that in both cases class ".v-btn" DO EXIST even though it was never defined on my ...

I have a feeling that PurgeCSS in the process of building is not working with file that is final and processed by Vutify with applied styles. What I find strande is that PurgeCSS do not stripe off .v-btn class but removes all the .v-btn-... classes.

If PurgeCSS waited till Vuetify (or Nuxt) autogenerated all HTML with applied classes or whatever it dooes then all the classes applied on final <button> element should not be removed.

It would be awesom to get it work with combination Vue3 + Vite + Nuxt3 + Vuetify3 . If you have any clue or example how to make button in my example look styled after build, what exact to add where would be super..
/M

[TheAlexLichter]

You have to look the path up in your node_modules. And yes, this is quite a bit of work for 3rd party libraries sadly.
Instead, you can use the treeshake option/flow for Vuetify which should already help quite a bit

[CMQNordic]

This is what in trying to test treeshake in Vutify and it only removes js from bundle, do not tauch css. css files with all code are huge.

I really do not know what path to add here for i.e a elemetnt? It looks for me lika all is autogenereated from insde js files. It it a path to a js file, vue file or css file you are talking about? What shall this file contain and there to add it?

Why is class .v-btn--elevated removed but .v-btn remains? The only included in preject is press me. Neather of the classes are defined but one of the classes is removed the other not.. is this not strange?

[TheAlexLichter]

This is what in trying to test treeshake in Vutify and it only removes js from bundle, do not tauch css. css files with all code are huge.

I really do not know what path to add here for i.e a elemetnt? It looks for me lika all is autogenereated from insde js files. It it a path to a js file, vue file or css file you are talking about? What shall this file contain and there to add it?

Why is class .v-btn--elevated removed but .v-btn remains? The only included in preject is press me. Neather of the classes are defined but one of the classes is removed the other not.. is this not strange?

You should point to a file that contains the buttons css classes, eg the vue component. But this can be multiple depending on how it is composed. I think a whitelist regex would
work better

“v-btn” is kept because purgecss finds the name of the class in your file. Here because it is equal to your component name

[CMQNordic]

Yes its very tricky with Vuetify 3 (if not impossible) as Vuetify 3 internally uses sass and rendering functions to generate the styles and components.

I can of course in thsis simple case whitelist like:
safelist: {
greedy: ['/v-btn/', /v-ripple/, /text-red/, ...],
}

but.. Vuetify takes in props that generate selectors. i.e color="red" generates text-red. In this particular case text-red must be added to safelist as purge css only analyzes classes.

As normally a project contains dozen of Vuetify elements and customuzations of those in form of props it seems pretty impossible to add all of this to safelist and be sure that nothing for a special screen or prefix id not removed by Purgecss.

[CMQNordic]

One last question. I found deep in Vuetify folder with an typescript file (vuetify.ts) that declares VBtm, and all other components, and I think renders it

Unsure if purgecss can scan this type ot file to analyse what a component becomes?

[CMQNordic]

I solved it..

https://dev.to/czerma/how-to-build-optimized-vuetify-3-nuxt-3-project-4l5k