Purgecss: Start/end ignore comments not detected when they don't precede a rule

[benface]

First of all, thank you so much for developing my feature request (#66). It works great in most cases, but I just found an issue with it. It seems the /*! purgecss start ignore */ comment is ignored if it's the first line in the CSS file, so the block isn't ignored. I'm using Laravel Mix with the laravel-mix-purgecss plugin. Let me know if you need any more information. Thank you!

[benface]

Ok, turns out the problem is not that it's the first line in the file. It's that the "node" that follows isn't a rule. Looks like the "ignore" comments are only detected when they precede a rule, which makes sense for the standard purgecss ignore comment, but not for the start/end comments.

[naomiHauret]

I have the same issue. I'm trying to ignore @font-face rules generated with postcss-fontpath. I use purgecss-webpack-plugin with webpack 4.10.

EDIT: My bad. After digging a bit more, I found out my @font-face declarations were removed by cssnano. Sorry 😅

[Benecke]

I'm having troubles getting whitelisting to work as well. As I'm using Rails and its helpers to output the input tags (so the html tags are not inside the html-markup), css input rules will (obviously) get purged.

So, first I tried using the "whitelist" option. However, setting it up like whitelist: ['input'] does not help. CSS still gets purged. I think this would be the best solution if it would be working.

Then I tried to use the inline ignore and noticed a problem with that as well: only the "next rule" option works.

So I made a testcase:

/* purgecss ignore */
.text {
  color: red;
}

/* purgecss start ignore */
.text {
  color: blue;
}
/* purgecss end ignore */

outputs

/* purgecss ignore */

.text {
  color: red;
}

/* purgecss start ignore */

/* purgecss end ignore */

PS: I'm using Grunt, in a chain like this sass > postcss > string-replace > purgecss. I renamed all output files differently (not overwriting a single tmp file). So I can actually see that the ignore rules are fed correctly to purgecss (which is the case). So the fault somehow must be on purgecss end, at least from what I figured out.

If any more information is required from my setup to trace the bug(s), please let me know.

[Ffloriel]

@benface thanks for the details about the issue. You're right, it does not make sense right now. I'll change that.

@Benecke the grunt plugin has not yet been updated to the current version of purgecss. I'll release a new version later today, this will make /* purgecss start ignore */ works.

[Ffloriel]

@benface this should be fixed with 1.0.1
@Benecke the grunt plugin has been updated (v1.0.0), you should be able to use the whitelist comment /* purgecss start ignore */

[Remeic]

Hi, i have the same issue with purgecss-webpack-plugin
Ignore all /* purgecss start ignore */ and /* purgecss end ignore */
I use webpack 4 with purgecss-webpack-plugin 1.5.0

[jaredloson]

@Remeic Just ran into this. My issue was that cssnano was running before PurgeCSS and stripping out comments.

[viperfx07]

add ! after /*

These works on webpack 4

/*! purgecss start ignore */
/*! purgecss end ignore */

I read on cssnano docs on how to preserve the comments https://cssnano.co/optimisations/discardcomments/

[fernando-mf]

@viperfx07 thanks a lot I was about to whitelist my resets 😅

[sandyfigueroa]

I'm Migrating from Bootstrap vue to Tailwind, the thing is that when I run build command, the site seems to be good but the notifications doesn't have any style. When a Notification is needed, this notification appears in the bottom of the page and doesn't have Styles, just plain text.

I tried to ignore bootstrap-vue styles adding
/* purgecss start ignore */ and /* purgecss end ignore */ even I tried with ! after /* but nothing works.

/*! purgecss start ignore */
@import '_variables.scss';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
@import './_containers.scss';
@import './_buttons.scss';
 /*! purgecss end ignore */

I don't know if it has something to do but I'm Using SCSS.

The only solution I found for now was put a notification directly in the HTML inside a Div with "display: none", it works, but is not a good solution.

[guytzhak]

I solved this issue,
In my case I used gulp-sass to compile my scss into css.

In this case this is my "gulp" function for the task:

function style() {
    // Where should gulp look for the sass files?
    // My .sass files are stored in the styles folder
    // (If you want to use scss files, simply look for *.scss files instead)
    return (
        gulp
            .src("*.scss")
            // Initialize sourcemaps before compilation starts
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(purgecss({
                content: ['**/*.php', '*.php', '**/*/*.php'],
                safelist: {
                    standard: ['slick-list', '.slick-prev', '.slick-next', 'slick-dots', 'slick', 'slick-slider', 'body.rtl', 'slick-active', /^rtl$/, /^slick$/, /wpcf7$/, 'wpcf7', 'wpcf7-form'],
                    deep: [/slick-active$/, /slick-slide$/, /wpcf7$/],
                    greedy: [/rtl$/, /^slick$/, /:before$/],
                },
                variables: true
            }))
            .pipe(mmq({
                log: true
            }))
            // Use postcss with autoprefixer and compress the compiled file using cssnano
            .pipe(postcss([autoprefixer(), cssnano({
                preset: ['default', {
                    discardComments: {
                        removeAll: false,
                    },
                }]
            })]))
            // Now add/write the sourcemaps
            .pipe(sourcemaps.write(''))
            .pipe(gulp.dest("."))
    );
}

I change the position of the .pipe for the purgecss function to the top and it's solved the problem:

function style() {
    // Where should gulp look for the sass files?
    // My .sass files are stored in the styles folder
    // (If you want to use scss files, simply look for *.scss files instead)
    return (
        gulp
            .src("*.scss")
            .pipe(purgecss({
                content: ['**/*.php', '*.php', '**/*/*.php'],
                safelist: {
                    standard: ['slick-list', '.slick-prev', '.slick-next', 'slick-dots', 'slick', 'slick-slider', 'body.rtl', 'slick-active', /^rtl$/, /^slick$/, /wpcf7$/, 'wpcf7', 'wpcf7-form'],
                    deep: [/slick-active$/, /slick-slide$/, /wpcf7$/],
                    greedy: [/rtl$/, /^slick$/, /:before$/],
                },
                variables: true
            }))
            // Initialize sourcemaps before compilation starts
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(mmq({
                log: true
            }))
            // Use postcss with autoprefixer and compress the compiled file using cssnano
            .pipe(postcss([autoprefixer(), cssnano({
                preset: ['default', {
                    discardComments: {
                        removeAll: false,
                    },
                }]
            })]))
            // Now add/write the sourcemaps
            .pipe(sourcemaps.write(''))
            .pipe(gulp.dest("."))
    );
}

Hope you find this solution helpfull

[culov]

I'm still experiencing this issue and I'm not using cssnano.

/* purgecss start ignore */ doesn't appear to do a thing. Even if I add a !.

This makes it impossible for me to use purgecss. Has anyone found a real solution?