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:
vue serve)Desktop (please complete the following information):
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?
Most helpful comment
I found my mistake, I use
purgecssmodule instead of@fullhuman/postcss-purgecss.