Description
I'm a member of the cssnano team. Due to the way css-loader works, we've had to make certain allowances to the code in order to keep everything functioning correctly [1][2]. Unfortunately, as the code keep on evolving, we continue running into issues which has to do with the integration in css-loader. Rather than continuing the trend of implementing hacks in individual packages, we'd rather fix the issue at its source.
Upon reviewing css-loader's code base, we learned that cssnano is included in a postcss pipeline preceded by a local plugin called css-loader-parser which replaces @import and url() references with ___CSS_LOADER_ constants. This causes some issues for us because at the time the CSS AST reaches cssnano, the CSS is still unfinished and is actually finalised using regex replacement after the pipeline has finished. Not only is this problematic for us, but it may also cause issues when control is returned back to webpack due to the CSS (having been minified and optimised) no longer is what css-loader expects (which is seemingly also why css-loader excludes certain optimisations). Rather than working on unfinished CSS and leaving users with a diminished experience, we feel that cssnano should be invoked at the very end, working with the fully processed CSS.
After some discussion between me and @ben-eb, we concluded that the ideal course of action would be to remove the regex replacements and instead replace them with postcss plugins, allowing all processing to be done within the pipeline. This would not only solve the issues for us, but would probably also make css-loader a bit more performant and manageable as well.
We'd love to hear your thoughts on this.