Why need to specify paths or content in purgecss options?

Question

I looking into Purgecss webpack docs and I'm a bit confused.

Why do I need to specify paths in the plugin options?

    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),

Or in postcss:

 purgecss({
    content: ['./src/**/*.html']
 })

By do this, I tell purgecss look into those HTML files, and that javascript files.

But when I using webpack it have all the source files that app needs. so Purgecss can't able to looking into HTML or js that it bundle?

Answer 1

This is a tricky question. Purge-css tools can be dangerous because could delete css code that will be used when something happen in your application, depending from the state of your application for example when a user sign up and if purge-css removed that part of css you will see your component stylized in an ugly way.

These tools take your css, extract from there the selectors of css rules and with a document.querySelector they test if exists an element in the page with that selector, if is the case the css remaind otherwise it's removed. But you have to point out what are the html pages to test (Note,sometime you should indicate *.js too if for example you put tags inside your application with js). And voila, explained the meaning of content inside the purgecss plugin. For more insight you could read this awesome article: https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/