I'm working with Nuxt.js and using Nuxt-PurgeCSS: https://github.com/Developmint/nuxt-purgecss
This project is using my own CSS similar to Tailwind (utility based) and I have a few classes that use the @ symbol.
The default regex for this package is:
return content.match(/[A-z0-9-:\\/]+/g)
With the following classes:
u:w-1/12 u@sm:w-12/12
It correctly purges the second one as it doesn't match the regex for the extractor.
I thought by updating my purgeCSS config within the Nuxt config to the following:
purgeCSS: {
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[@A-Za-z0-9-:/]+/g) || []
}
},
extensions: ['html', 'vue', 'js']
}
]
}
This new extractor includes the @ symbol but still purges the classname with the @ symbol. I've tried the following regex:
return content.match(/[A-Z]+/g) || []
To see if it correctly strips everything (as a test) but it's still keeping the first class and purging the second even though it shouldn't be matching any.
This leads me to believe I'm not overriding the default extractor correctly.
Anything I'm doing wrong here?
You can use one extractor for each extension.
Then, you have to override the default one.
purgeCSS: {
extractors: () => [
{
extractor: class {
static extract(content) {
return (content.match(/[A-z0-9-:\\/]+/g || []).concat(content.match(/[@A-Za-z0-9-:/]+/g) || [])
}
},
extensions: ['html', 'vue', 'js']
}
]
}