Rewrite @import and url() resolution as PostCSS plugins

[andyjansson]

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.

[TrySound]

Yo, guys! Did you read sokra's icss2 proposal?
https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7
I started implement it in postcss-icss-import and postcss-icss-url
I almost done with fixing values (last one) plugin. Next step is finishing new-loader

[TrySound]

Do you think this example will be processed correctly?

.foo {
  background: url(__url__0);
}

[andyjansson]

@TrySound 👋

I read through the proposal. I don't think there's enough detail to say how we're going to be affected by it. We'd just like to be fed fully formed CSS and not have to bother with how webpack handles things internally. Also, what's the time frame for this thing?

[TrySound]

New-loader will process only icss which is only :import and :export rules. All other things will be processed with postcss-loader and icss (css-modules) plugins.

[TrySound]

I'm gonna care about css-loader this week.

[andyjansson]

@TrySound any update on this?

[michael-ciniawsky]

#655