Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic classes are purged

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

manniLcommented, Nov 5, 2018

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 🤔

manniLcommented, Nov 11, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tailiwind, purging & dynamic classes - HEY World
Tailiwind, purging & dynamic classes ... The reason for this is Tailwind using PurgeCSS to delete unused classes and PurgeCSS being ...
Read more >
Mix purges my dynamic classes - Laracasts
I have this piece of code in my L8 project: {{ $header }} Obviously, css-purger does not recognize the class and purges my...
Read more >
purgecss can't recognize conditional classes - Stack Overflow
PurgeCSS is intentionally very naive in the way it looks for classes in your HTML. It doesn't try to parse your HTML and...
Read more >
How to Add Dynamic Generated Classes in Tailwind CSS ...
Learn how to add dynamically generated classes in Tailwind CSS and whitelist it to prevent from being purge.
Read more >
Steps for deleting a dynamic CDT class - IBM
If those steps were executed, the SETROPTS options for all classes that share the POSIT value with the deleted class would be deactivated....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found