Purgecss: "Cannot call a class as a function" with 1.3.0

Created on 24 Apr 2019  路  4Comments  路  Source: FullHuman/purgecss

Describe the bug
I just started a new project and wanted to try out tailwind + purgecss. Based on this tweet by @adamwathan I've configured my postcss config like so:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('purgecss')({
      content: ['./src/**/*.vue'],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    }),
  ],
};

but am getting the following error:

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot call a class as a function
    at _classCallCheck (xxxx\node_modules\purgecss\lib\purgecss.js:26:11)
    at Purgecss (xxxx\node_modules\purgecss\lib\purgecss.js:365:5)
    at Object.<anonymous> (xxxx\postcss.config.js:7:24)
    at Module._compile (module.js:653:30)
    at requireFromString (xxxxx\node_modules\require-from-string\index.js:28:4)
    at parseJsFile (xxxxx\node_modules\postcss-load-config\node_modules\cosmiconfig\dist\loadJs.js:15:15)
    at <anonymous>

(some paths redacted)

The same actually happens when I simply remove the defaultExtractor and simply have content declared in there.

Is this simply an error with the new 1.3.0 release or do I have something misconfigured?

To Reproduce
Steps to reproduce the behavior:

  1. Create a postcss.config.js
  2. Paste the above content
  3. Execute your build pipeline (in my case vue serve)
  4. See error

Desktop (please complete the following information):

  • OS: Windows 10, using GitBash
  • Version of Purgecss: 1.3.0 (using @fullhuman/postcss-purgecss ^1.2.0)

Most helpful comment

I found my mistake, I use purgecss module instead of @fullhuman/postcss-purgecss.

All 4 comments

I've the same issue with with my old config and I don't know how to update to defaultExtractor.

class PurgeCustom {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/@\\]+/g) || [];
  }
}

function cssOptim() {
  var plugins = [
    purgecss({
      content: pkg.globs.purgecssContent,
      extractor: [{
        extractor: PurgeCustom,
        extensions: ['html','twig','css','js']
      }],
      whitelist: pkg.globs.purgecssWhitelist,
    })
  ];

  return src(pkg.globs.purgecss)
    .pipe(plumber())
    .pipe(postcss(plugins))
    .pipe(dest(pkg.paths.dist.css));
}

I found my mistake, I use purgecss module instead of @fullhuman/postcss-purgecss.

Can confirm, using the proper import fixes the issue.

Just came by the same issue, but I followed this. Is the instruction wrong, or am I mistaken in reading the guide?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Pab89 picture Pab89  路  8Comments

estevanmaito picture estevanmaito  路  9Comments

crazy4groovy picture crazy4groovy  路  7Comments

TomS- picture TomS-  路  3Comments

claudiodekker picture claudiodekker  路  4Comments