feature: show rejected

[SassNinja]

I'm trying to reduce the CSS size as much a possible.
Unfortunately the plugin removes too much CSS. Therefore I'd like to see what got removed to add some of it to the whitelist.

I've seen purgecss offers an option called rejected which seems to do exactly this. After some debugging I noticed that the option gets piped through by the webpack plugin but the plugin doesn't reveal the response of purgecss but only cares about the extracted CSS.

What do you think about adding proper support of the rejected option to the webpack plugin?

[jsnanigans]

I think it could collide with other plugins that control the output of the console but you could try doing this by adding a line under: https://github.com/FullHuman/purgecss-webpack-plugin/blob/master/src/index.js#L103
that just says

if (purgecss.rejected) {
  console.log(purgecss.rejected)
}

and see what happens, It would be awesome if you had the time to make a PR

[SassNinja]

@jsnanigans ok, I've submitted a PR for this!

First I also thought about just adding a console.log() but I noticed this not useful when working with large CSS files & frameworks because many selectors get removed. Thus I'm adding it to the stats data.

Would you take a look and let me know what you think?

[SassNinja]

Poke @jsnanigans

Have you had time to take a look?
Would be great to have this available (without using my fork)

[jsnanigans]

Thanks @SassNinja for your contribution!
I released your PR on npm in v1.4.0

[realgs]

I do appreciate a lot your work on this matter. How do I access the rejected styles?
In webpack.config.js I defined the option rejected: true

new PurgecssPlugin({
            rejected: true,
            paths: glob.sync([
                path.resolve(__dirname, '../Scripts/**/*.vue'),
                path.resolve(__dirname, '../Scripts/**/*.js'),
                path.resolve(__dirname, '../Scripts/**/*.html'),
                path.resolve(__dirname, '../Views/**/*.cshtml')
            ]),
            whitelistPatterns: [
                /-enter*/,
                /-leave*/,
            ]
        }),

I call the build script with --profile --json compilation-stats.json flag. But compilation-stats.json contains just
Hash: ... Version: webpack 3.5.5 Time: 6781ms Asset Size Chunks Chunk Names main.bundle.js 210 kB 0 [emitted] main.bundle home.bundle.js 56.8 kB 2 [emitted] home.bundle main.bundle.css 118 kB 0 [emitted] main.bundle main.bundle.js.map 322 kB 0 [emitted] main.bundle main.bundle.css.map 92 bytes 0 [emitted] main.bundle home.bundle.js.map 69.8 kB 2 [emitted] home.bundle ...
The css bundle is generated with purged styles but I still don't know how to access the group of styles that were wiped out.

I noticed that compilation-stats holds the console output. I am able to access the purged styles printing them in purgecss-webpack-plugin.js by calling:
console.dir(purgedStats['main.bundle.css'], { 'maxArrayLength': null });
just before the purgedStats are saved to stats.purged
However, amending the plugin code is not the best idea, so the question remains- how to access the unused styles and export them to a file?

[JustJarethB]

@realgs I am also having trouble finding the purged selectors. Could you share where you log purgedStats?

[realgs]

@JustJarethB as I wrote above- in purgecss-webpack-plugin.js
line 202

    value: function addStats(stats) {
        if (this.options.rejected) {
            **console.dir(purgedStats['main.bundle.css'], { 'maxArrayLength': null });**
            stats.purged = purgedStats;
      }
    }

[JustJarethB]

+1 @realgs that's great, thanks for the temp fix. Is @SassNinja able to assist us understand how to get the data out properly? Personally, I have tried both on v1.4.0 and v1.5.0