PurgeCSS not stripping styles that get imported (vuejs)
marbuser opened this issue · 2 comments
Hey there,
I'm using this plugin with Tailwind + VueJS. In regards to both of those, it works flawlessly with the custom extractor.
However, I recently decided to start using Animate.css in my project, so I imported it in my main.js like so;
import {} from 'animate.css';
(Installed using NPM)
I'm only using 2-3 of the animations in the entire library, so I wanted to lean it down a bit so there wouldn't be pointless code in my app. However, it would appear purgecss isn't "detecting" it for some reason.
Here you can see below how I use these animation classes inside my VueJS templates;
<transition
enter-active-class="animated fadeIn custom-fast"
leave-active-class="animated fadeOut custom-fast"
mode="out-in">
<router-view></router-view>
</transition>
and here is relevant parts of my vue.config.js file;
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
};
configureWebpack: {
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './public/index.html'),
path.join(__dirname, './src/**/*.vue'),
path.join(__dirname, './src/**/*.js'),
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ['html', 'js', 'vue'],
},
],
}),
],
},
Any idea why this might be happening?
Let me know if more information is needed!
I have the same here @marbuser.
I've turned on the 'rejected' option and that seems there is nothing being removed.
Please let me know if you figured out a way to clean up your css.
@marbuser @MaickellVilela I am the same, is there any solution?