Dynamic classes are purged

In components, you usually have classes added or generated dynamically:

<div :class="{ 'some-class': someCondition }">

Additionally, there are components not rendered in a first render, in particular those that don’t meet the condition in a v-if directive.

For those, these dynamic classes are purged, breaking the styling of them.

A good solution can be what’s mentioned in this issue about prefixing all Vue classes (for instance, with an underscore) and whitelist them.

Could we make that a default in this module? I think it could improve the DX, since the users don’t need to worry about this or come across the same problem

[manniL]

Hey @alexjoverm 👋

PurgeCSS does a string-based comparison approach. So <div :class="{ 'some-class': someCondition }"> should be detected (and not purged) properly.

However, classes live <div :class="'some-class-'+prop"> won’t be recognized correctly.

Unfortunately, there is no ideal solution for that. As you said, prefixing all classes internally won’t purge the unused CSS classes in global files which kills the benefits of PurgeCSS.

I’ve already included the defaults for body,html and the nuxt-* classes in the whitelist so people don’t have to add them manually as well.

But in terms of “generated classes” adding them by hand might be the best option while still keeping all PurgeCSS benefits 🤔

[manniL]

Hey @CurtisBelt! I’m using whiteListPatterns in several of my projects and it works well with nuxt-purgecss. (example)