PurgeCSS Extractor for HAML

We’re using the Tailwind framework for the new DocRaptor marketing website. We’re also continuing to use HAML for our templating system.

The Tailwind library is an enormous 3MB so it uses PurgeCSS to remove unused CSS styles from your production CSS output.

Unfortunately, the default PurgeCSS extractors aren’t compatible with HAML markup. HAML looks like this:

%img.h-10.w-10.rounded-full{ :src => "...

PurgeCSS uses a regex to scan your files for words then compares those words to your CSS selectors. The default regex doesn’t consider periods or curly brackets to be word breaks, so PurgeCSS views img.h-10.w-10.rounded-full{ as one big word.

The fix is easy. In tailwind.config.js, update the default extractor regex to include brackets and periods as word breaks:

purge: {
    content: [
      './app/**/*.haml',
      './app/**/*.js',
    ],
    options: {
      defaultExtractor: content => content.match(/[^<>"{\.'`\s]*[^<>"{\.'`\s:]/g) || [],
    }
  },

That code is for the Tailwind config, but if you’re using PurgeCSS directly, all you need is the defaultExtractor line.