Grunt extractor issue

[Benecke]

First of all, thanks for updating the Grunt plugin in regards to the issue with comments FullHuman/purgecss#90 @Ffloriel

Now, I'm having trouble getting the plugin to work with proper extractors that respect / do not cleanse responsive/etc. classes from my css which have been put there by TailwindCSS.

I know FullHuman/purgecss#56 and I also found this at the Tailwind repo. However, this doesn't solve my issue.

I want to keep css like

  .mn\:hidden {
    display: none;
  }

...when this can be found in my markup:

<div class="mn-hidden">

My setup inside my Gruntfile.js

    purgecss: {
      my_target: {
        options: {
          content: ['../theme/layout/*.liquid',
                    '../theme/sections/*.liquid',
                    '../theme/snippets/*.liquid',
                    '../theme/templates/*.liquid',
                    '../theme/templates/customers/*.liquid'],
          extractors: {
            extractor: class {
                static extract(content) {
                    content.match(/[A-z0-9-:\/]+/g) || []
                }
            },
            extension: ['css', 'html', 'liquid']
          },
          // whitelist: ['text'],
          // whitelistPatterns: [/mn$/],
          keyframes: true,
          fontFace: true
        },
        files: {
          'tmp/theme_sass_postcss_stringreplace_purgecss.css': ['tmp/theme_sass_postcss_stringreplace.css']
        }
      }
    },

However with this setup the css gets stripped. I'm currently helping myself by changing the separator from colon to dash (tailwind docs) as it works this way.

The purge works per se, so it's not an issue with the content files. However, I'm no regex-expert (always using regex101), so maybe the regex-code is simply wrong for my case?

Another possible reason would be that the plugin is not behaving correctly so I thought I probably report this, even though I got it working with an alternate separator.

[Ffloriel]

Thanks for reporting this issue. I will take a look this week.

[ArmorDarks]

yeap, seems there is some issue with whitelisting in Grunt plugin. Whitelisting simply does not work,

[trinitrotoluene]

I'd just like to bump this because it appears to still be an issue

Versions: "grunt": "^1.0.4", "tailwindcss": "^1.1.2", "grunt-purgecss": "^1.0.0"

Will try @Benecke's solution of changing the separator but as of right now PurgeCSS breaks Tailwind's default responsive classes.

(Edit: it worked)

Relevant section of the PurgeCSS Gruntfile:

extractors: [
    {
        extractor: class TailwindExtractor {
            static extract(content) {
                return content.match(/[A-Za-z0-9-_:\/]+/g) || []
            }
        },
        extensions: ['cshtml', 'html'],
    },
]