Output unused css

[ovidijusr]

Is your feature request related to a problem? Please describe.
Yes, I want to create SSR html file with inline purged CSS but afterwards lazily load leftovers of css

Describe the solution you'd like
I want purgecss to output css that was excluded from output file ( original css without purged css)

Describe alternatives you've considered
Find a multi platform reverse diff solution, but haven't found one

[ovidijusr]

I was rethinking the whole idea. If you can get an array of classnames which was rejected.

Maybe if there would be some kind of configuration like 'ignore: [array]' so scanned classes would be automatically ignored and not included in purged file

[jsnanigans]

I think both options would be a good Idea, one would be to take all the css that gets purged and optionally output a seperate css file with all of those.

Your second suggestion would be to "blacklist" some styles so that they get purged even if the extractor finds something that would match it right?
I think the name "blacklist" would be good because we already have a options called "whitelist".

[Optarion]

I approve this request.
PurgeCSS is awesome to limit the size of the final files but telling us wich selectors have been purged would be a really interesting info to clean stylesheets.
I use webpack to launch PurgeCSS and a simple output in the terminal during the build could be a good start !

[moolric]

I would really like this feature too, but for the purpose of cleaning up the original scss files. Output to the terminal or a file would allow me to delete classes or add to a whitelist until there was nothing left to be purged.

[akashdsouza]

+1

[maoberlehner]

There already is the rejected option (https://www.purgecss.com/configuration) which seems to do this. But it doesn't work with the webpack plugin afaik.

[hacknug]

Same here with Gulp. Don't know what should I do after setting rejected: true 🤷‍♂️

[fleps]

Same here, rejected: true does nothing using CLI with a config file. 😞

[jsnanigans]

the option rejected: true only tells purgecss to collect all the rejected selectors, its only available if you use the node API. The gulp plugin and the CLI don't yet have the feature to output the rejected selectors. We will try to get to it but if you feel like creating a PR, that would be very helpful.

[nburkard]

I would also like to see this, the unused CSS output to another file. Is that feature available yet? Last update here was almost a year ago. What does it mean this is available in the node API. How do I use that? I am using Gulp. Thank you

[wjthomas9]

+1

[Colir]

+1 for gulp please

[akashdsouza]

gulp-purgecss already seems to support the rejected option to output unused selectors

[garethmorgans]

+1

[marijnotte]

+1

[Julien-prrs]

+1

[pg1671]

+1 .. this sounds essential to be fully aware that the selectors removed are not needed.

I need it to be sure I have whitelisted needed classes and it would be good to have a reference to go back and remove my own unused css directly.

[cssagogo]

I'm confused by this page https://purgecss.com/plugins/gulp.html#usage, it suggest that you can output rejected CSS, but it doesn't seem to work. I found that you need a postcss-reporter to even get the rejected css to appear in the console, but what I want is the rejected css added to a .css file.

Doesn't appear to do anything with rejected CSS, at least not in console or rendered file...

gulp.task('cssBuild', () => {
    return gulp.src(`${paths.source}/scss/**/*.scss`)
        .pipe(mode.development(sourcemaps.init()))
            .pipe(sass({
                includePaths: ['node_modules']
            }).on('error', sass.logError))
            .pipe(mode.production(postcss([
                autoprefixer(),
                purgecss({
                    content: [
                        `${paths.html}/**/*.php`, 
                        `${paths.html}/**/*.phtml`,
                        `${paths.source}/js/**/*.js`
                    ],
                    rejected: true
                }),
                cssnano(),
            ])))
        .pipe(mode.development(sourcemaps.write('./')))
        .pipe(gulp.dest(`${paths.dist}/css`));
});

Adding a reporter, I at least get it back in the console...

gulp.task('cssBuild', () => {
    return gulp.src(`${paths.source}/scss/**/*.scss`)
        .pipe(mode.development(sourcemaps.init()))
            .pipe(sass({
                includePaths: ['node_modules']
            }).on('error', sass.logError))
            .pipe(mode.production(postcss([
                autoprefixer(),
                purgecss({
                    content: [
                        `${paths.html}/**/*.php`, 
                        `${paths.html}/**/*.phtml`,
                        `${paths.source}/js/**/*.js`
                    ],
                    rejected: true
                }),
                cssnano(),
                reporter({
                    filter: function(message) { return true }
                })
            ])))
        .pipe(mode.development(sourcemaps.write('./')))
        .pipe(gulp.dest(`${paths.dist}/css`));
});

The docs claim the following. I haven't tried with rename. Could that be the key?

By setting the rejected option, you can 'invert' the output to list only the removed selectors:

[kevinramharak]

I implemented this feature, its available on my fork https://github.com/kevinramharak/purgecss/tree/output-unused-css. It has an open PR at #763 .
I would appreciate some feedback if it produces the expected result and what the tests looks like.