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

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

Open
marbuser opened this issue Oct 26, 2018 · 2 comments
Open

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

marbuser opened this issue Oct 26, 2018 · 2 comments

Comments

@marbuser
Copy link

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
Copy link

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants