fix(css): add node support for external @import

[noreiller]

Issue:
When using the CSS experiments and using @import in CSS code, the compilation fails with these error messages:

Module build failed: UnhandledSchemeError: Reading from "http://example.com/image.png" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "http:" URIs.

Changes:
This PR will handle the @import rules for node and add a dedicated test.

CSS example code:

@import "https://test.cases/path/../../../../configCases/css/external/external.css";

[webpack-bot]

For maintainers only:

• This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
• This needs to be backported to webpack 4 (issue will be created when merged)

[vankop]

you should @import from your code base and set public path. ( e.g. in your case https://example.com/ ). If you need assets public path you can use https://webpack.js.org/configuration/module/#rulegeneratorpublicpath

[noreiller]

@vankop My bad, I have surely put a bad description and so you misunderstood the issue.
When enabling CSS experiments, node cannot parse the following CSS codes:

/* test/configCases/css/external/style2.css */
body {
	background: url(//example.com/image.png) url(https://example.com/image.png);
	background-image: url(http://example.com/image.png);
}

/* test/configCases/css/external/style.css */
@import "style2.css";
@import "https://test.cases/path/../../../../configCases/css/external/external.css";

[vankop]

if you want to handle http/https protocol urls ( bundle assets from this protocol requests ) you should just enable https://webpack.js.org/configuration/experiments/#experimentsbuildhttp

[noreiller]

But it's not the wanted behavior. I don't want to bundle the remote CSS in the current compilation, I want Webpack to let me use the standard CSS behavior as described in https://developer.mozilla.org/en-US/docs/Web/CSS/@import.
The web target build already handles that thanks to the code I duplicated for the node target: https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js#L141-L163.

[vankop]

yeah.. as I said in separate PR we should support ignore option.. #15821

[noreiller]

Sorry, I disagree. Why don't you want to hack the source assets with magic comments when you can easily handle the code?

[vankop]

ok.. in css instead of ignoring request webpack creates ExternalModule and there is no support for node

[noreiller]

ok.. in css instead of ignoring request webpack creates ExternalModule and there is no support for node
Yes

My test is failing in some cases because I try to check that the @import rule is in the bundled file, have you any idea to do another way than mine?

[noreiller]

@vankop @sokra Do you think this PR could be merged?

[noreiller]

@vankop @sokra Do you think this PR could be merged?

up 🙄

[alexander-akait]

@noreiller @sokra on vacation, he will be here in near future, your PRs on our radar, so don't worry

[noreiller]

Oh ok! Thanks for the update.

[sokra]

Thanks