loading...

Finding the Right Purgecss Extractor

drewtownchi profile image Drew Town Originally published at drewtown.dev ・1 min read

When I was writing the tutorial on Setting up Tailwind with Purgecss I was running into an issue where my Vue.js computed styles were getting purged by Purgecss. I was having a hell of a time and hat tip to @adamwathan, the creator of Tailwind, for pointing me in the right direction.

When considering the "default" extractor for Tailwind /[A-Za-z0-9-_:/]+/ it would absolute make sense that hidden: would be considered a valid class name. Unfortunately if hidden: is the only place that our hidden class name appears then the class name that we really want hidden will no longer be in our CSS file.

Playing around with the RegEx and my Vue files I was able to adjust my RegEx to use the \b meta character on both the beginning and end of the RegEx.

/\b[A-Za-z0-9-_:/]+\b/g

This has worked perfectly for me as I do not use any special characters to start or end my CSS classes and I do not see any cases where Tailwind does either. So now in my computed properties the RegEx finds only hidden and not hidden:.

  computed: {
    navClasses() {
      return {
        block: this.navOpen,
        hidden: !this.navOpen
      };
    }
  }

Posted on May 12 '19 by:

drewtownchi profile

Drew Town

@drewtownchi

I'm Drew Town a web developer and systems engineer in Colorado. Always learning, traveling and exploring. Sharing updates, trials and tribulations in tech and life.

Discussion

markdown guide
 

How about when i have a library that adds their own classes.

Eg. (Slick Slider or any other carousel Library)

If purgeCSS has plugins for these libraries, that'll be sweet!

 

The extractor is only going to work if you are adding the markup into your files and the library isn't generating the code/classes and inserting them into the DOM.

Likely with a library you need to use Purgecss's Whitelisting and hope the library you are using has a sane CSS naming convention.