Doesn't detect classes inside es6 template strings

[huygn]

• webpack 4
• purgecss-webpack-plugin 1.2.0

this doesn't work (below 2 classes don't appear in the final css bundle):

const className = `no-underline bg-blue-lighter`

this works (single quote):

const className = 'no-underline bg-blue-lighter'

My config:

const path = require('path');
const glob = require('glob');
const PurgecssPlugin = require('purgecss-webpack-plugin');

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:/]+/g) || [];
  }
}

new PurgecssPlugin({
  // files to scan for class names.
  paths: glob.sync(path.join(__dirname, './src/**/*.js')),
  extractors: [
    {
      extractor: TailwindExtractor,
      extensions: ['js', 'jsx'],
    },
  ],
  whitelist: ['html', 'body'],
  whitelistPatterns: [],
});

[huygn]

Ok it turns out the match result contains the back tick ie.

['`no-underline', 'inline-block']

which is why it doesn't work. My dirty solution is removing back ticks in the final result array, hope this help.

[jsnanigans]

Try this in the extractor: /[A-Za-z0-9-_:\/]+/g the A-z somehow includes a backtick