Skip to content
This repository was archived by the owner on Feb 1, 2020. It is now read-only.
This repository was archived by the owner on Feb 1, 2020. It is now read-only.

PurgeCSS not stripping styles that get imported (vuejs) #53

@marbuser

Description

@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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions