VueJS Tooltip and PurgeCSS might give you some troubles in production

While I'm currently working on my new project findamaker.io, I noticed a strange behavior in production.

To put things into context, I'm using Laravel Mix Purge Css by Spatie, a laravel-mix plugin that lighten your css files.

And I'm also using v-tooltip to display nice tooltip helpers on some UI elements of the website.

The problem is that v-tooltip is not properly scanned by purgeCss, because the html template lays in the javascript directly.

Thus we need to "whitelist" a bunch of css classes so purgeCss does not remove those from the compiled CSS file.

In laravel mix we can do this quite simply:

.purgeCss({
    whitelistPatternsChildren: [/^tooltip$/]
})

Run npm run prod and you'll see that your tooltip is displaying correctly now !