Preventing Purge CSS from removing "hover:text-{color}" classes

[srhise]

With the release of 1.4.0, I was excited, because on a recent project of ours our custom PurgeCSS configuration was removing some styles that were in fact included in our components. Unfortunately, I am finding the same result after upgrading to 1.4.0. Would be great to see if anyone can repro this issue, as our CSS bundle size goes from 940kb! to 22Kb with this update... Wow!

In the example below, the hover:text-blue selector is applied and works up until PurgeCSS gets involved. Literally nothing else in the entire project is erroneously removed besides this. Other hover styles seems to work as well, so not sure why this would be the case.

[Ratko-Solaja]

What is your PurgeCSS config inside tailwind.config.js?
Mine is like this and it works just fine:

purge: {
  content: [
    '**/*.html',
    '**/*.php',
  ],
  options: {
    
  }
}

[somebody32]

@srhise be sure that you're not generating that class dynamically (ie hover:bg-${className}) or purge will not be able to detect the usage

[nathangross]

Had this issue—and this was what was causing it.

[srhise]

Yeah, that’s it. Our button component have all kinds of props that translate into dynamic classes. Things like colors, outlines, icons etc. Looks like we won’t be able to utilize PurgeCSS effectively without a workaround. Thank you 👍

[srhise]

Looking into the whitelist feature

https://purgecss.com/whitelisting.html

[somebody32]

@srhise my advise would be to ditch string concatenation or interpolation and just use full strings, ie:

function Button({propsColor}) {
  let hoverClass;
  let mainColor;

  switch (propsColor) {
    case "blue":
      hoverClass = "hover:bg-blue-500";
      mainColor = "bg-blue-600";
   ...
}

it is super verbose but guarantees that there will be no case when whitelist becomes outdated and you have a broken production deploy because of it

[benoliver999]

I decided instead to run purge with postcss after the site builds. It's a shame not to use the built-in feature, but I generate quite a few classes in my templates and it seems a bit much to go and change it all just for this.

[srhise]

That's a cool idea. Any examples of running after build?

[benoliver999]

Well I'm using Jekyll, and a good automated setup is well described here

In short, jekyll outputs to a _site directory, so you run Purge on the 'final' version of the site.