Hi @javiereguiluz,

I don't know really how that plugin works but I think you may be right about that issue being caused by the removal of comments in production mode...

That's part of the minification process which is triggered by the minimized option of the css-loader:

Based on its documentation you can use CSSNano options instead of boolean, so maybe there is a way to minimize CSS files but keep some of the comments.

However... Encore doesn't allow to change these options easily yet. You can still do it by modifying the generated Webpack config object manually but that makes the webpack.config.js file way more complex than it should be. That'll probably be solved once #335 gets merged since it adds an Encore.configureCssLoader(callback) method.

Thanks for the detailed answer! I don't know anything about the internals of Encore, but the simplest solution to me would be to be able to control the order in which things are executed. If I could run PurgeCSS plugin before Encore's minify plugins, this problem would be solved. Thanks!

@javiereguiluz encore does not have a minifying plugin for CSS. The CSS Loader does the minification of CSS.

@stof as you can see I know nothing about Encore internals 😝 Anyway, can we control the order of things somehow? Thanks!

@javiereguiluz yo can control orders of plugins (well, partially, as core plugins don't have priorities allowing to hook in the middle unfortunately, defeating the feature). But that won't help you in this case, as minimizing CSS is not performed by a plugin but by the loader itself.

And as said by @Lyrkan, configuring the CSS loader is not possible easily currently. It will be solved by #335. For now, it would require transforming the generated config (which is probably a pain for this case)

@javiereguiluz To extend a bit more on what @stof said:

• loaders: they basically take some data as an input, processes them and output the result. You can define chains of loaders in Webpack (what Encore does) that are used based on the kind of file being imported into your code. For instance if you import a Sass file, it may go through the sass-loader (which will convert it to CSS), then through the postcss-loader (which will transform it using various plugins), then through the css-loader (which will do multiple things such as resolving URLs, minifying the code, etc.)

• plugins: they are an entirely different thing. They can use some hooks that Webpack and other loaders/plugins expose to do whatever they want to (clean your build directory, generate a manifest of your assets, display a "build ended" notification, etc.). For instance, the purgecss-webpack-plugin seems to use the additional-assets hook... which is triggered way after all the assets have already been processed by loaders (this is one of the last hooks handled by Webpack).

@Lyrkan perfectly explained! Thanks.

I wish things worked differently though. For example, instead of minifying CSS contents when loading them, I'd prefer to have a MinifyPlugin() executed as the last step of the whole process, after all the other transformations have taken place. But this is how things are, so let's focus on finding a solution around them instead of trying to change them.

Well, as we said, we already have the solution: #335 gives access to configuring the CSS loader, which would allow to configure the options of the minification (allowing to keep comments)

I also had this issue with webpack, purgecss and rails. My fix was to change the ignore comments to:
/*! purgecss start ignore */ and /*! purgecss end ignore */. This way they are not removed.

@tomasmcm thanks! You are right and your solution works and it's the most straightforward one. If anyone needs more control over the CSS loader, #335 is now merged. So, I'm closing this as fixed. Thank you all!