Incompatibility with the latest version of mini-css-extract-plugin (0.4.3)

[Lyrkan]

Hi there,

It seems that there is an issue when using the latest versions of the mini-css-extract-plugin and this plugin together.

We have a test case in Webpack Encore with the following stylesheet:

// roboto_font.css
@font-face {
    font-family: 'Roboto';
    src: url('./../fonts/Roboto.woff2') format('woff2');
}

When we require that file with mini-css-extract-plugin@0.4.2 everything works as intended, however with mini-css-extract-plugin@0.4.3 we get the following manifest (don't mind the other entries):

{
	"build/bg.css": "/build/bg.css",
	"build/font.css": "/build/font.css",
	"build/main.js": "/build/main.js",
	"build/runtime.js": "/build/runtime.js",
	"build/images/another_bg_image.css": "/build/images/symfony_logo.ea1ca6f7.png",
	"build/fonts/roboto_font.css": "/build/fonts/Roboto.9896f773.woff2"
}

As you can see, instead of having a "build/fonts/Roboto.woff2" key, we get "build/fonts/roboto_font.css"... which doesn't feel right at all :)

I tracked down the issue to this PR: webpack/mini-css-extract-plugin#177 (comment)

Apparently webpack-assets-manifest was also affected and managed to solve it (webdeveric/webpack-assets-manifest#39).

[karlvr]

I've just come across this issue. It appears to be caused because the mini-css-extract-plugin (I didn't establish it conclusively as the source, but it seems like it) is causing our moduleAsset function to be called a second time for a given static asset (e.g. background.png) but with module.userRequest set to the CSS source file. So we end up mapping background.png to main.css and then in our manifest end up with "main.css": "background.HASH.png" in our manifest. Of course because we can only have one key for "main.css", but there are likely multiple assets referenced by it, we also lose any mention of lots of our assets.

The solution in
webdeveric/webpack-assets-manifest#39 looks like it might actually be just because they check that they haven't already got a mapping for the file before adding it.

A similar, but simpler change works here if we add to the moduleAsset function a check that moduleAssets[file] is not already set. Is it safe to assume that the first time we hear about an asset, it's always the asset itself, and that the CSS referencing the asset will always follow...?

[fernandopasik]

The current workaround for this is to force the dependency to 0.4.2 through yarn resolutions.