PurgeCSS not stripping styles that get imported (vuejs)

[marbuser]

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!

[MaickellVilela]

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.

[qiqingfu]

@marbuser @MaickellVilela I am the same, is there any solution?