Why is css reduced even with everything ignored?

[dhymik]

I have one single scss file being processed by Gulp 4, this is tailwind.scss.

Without purgecss, the resulting css is 1,5 MB in size.
With purgecss in the chain, it is 24 kByte.
With purgecss and everything in tailwind.scss ignored, css size is 600 kByte.

My tailwind.scss file looks like this:

@charset "UTF-8";

/* purgecss start ignore */
@import "_baseStyles.scss";
@import "_components.scss";
@import "_utilities.scss";
@import "_design.scss";
/* purgecss end ignore */

Why is css file size reduced from 1,5 MBytes to 600 kBytes with everything ignored?

[joshua-martin]

@dhymik I cant see this behaviour, if I run purgecss with everything ignored, my file the same size. Are you running anything that is stripping comments prior to your purgecss step?

[janko]

I had the same problem. What I noticed is that my SASS compiler seemed to remove the CSS comments, so when it came for PurgeCSS to do its thing, it didn't find any ignore comments in the compiled CSS. I found that strange, because according to SASS language specification, comments should be retained. Maybe sass-loader is set to remove comments in production mode 🤷‍♂

[I-Want-ToBelieve]

If you use sass-loader, exactly, sass-loader-minify ... then the comments you wrote to purgecss have been deleted by sass-loader! !!

webpack-contrib/sass-loader#763

[dhymik]

The reported issue was caused by the Sass compiler. I solved the issue by modifying the css ignore comments to

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

Note the exclamation mark behind the opening comment tag. This instructs SASS to leave the comments in even in compress mode. See SASS docs here.