Initial work towards native css support

[sokra]

What kind of change does this PR introduce?
experiment

Did you add tests for your changes?
yes

Does this PR introduce a breaking change?
no

What needs to be documented once your changes are merged?

• experiments.css: true enables css support. See Native CSS support #14893 for progress and documentation.

[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)

[alexander-akait]

CSS allow to write url like:

div {
  background: url('./img\
\
\
\
-other-part.png');
}

We normalize it in css-loader.

Here example of most of all urls - https://github.com/webpack-contrib/css-loader/blob/master/test/fixtures/url/url.css, we can add them here (all test passed in css-loader).

Also CSS allows to have interesting things in url:

div {  
  background: url(./img\'img.png);  
  background: url("./img%27%27%27img.png"); 
}

Test case for @import https://github.com/webpack-contrib/css-loader/blob/master/test/fixtures/import/import.css, but some of them broken for snapshots testing, broken things do not changed and keeping as is in CSS without resolving.

Also CSS allow to do circular imports (they just ignored because already loaded):

file.css

@import "file.css";

[sokra]

Thanks. I'll add these as tests.

Some of them are a bit weird: image-set("./img1x.png" 1x);
Seem like using url() is optional here... That makes it a bit more complicated...

[sokra]

And I found another fancy thing in the spec:

background-image: image('sprites.svg#xywh=40,0,20,20', black)

https://developer.mozilla.org/en-US/docs/Web/CSS/image/image()

[alexander-akait]

background-image: image('sprites.svg#xywh=40,0,20,20', black)

Yep, but in real world I have not seen anyone use this, url is shorter 😄

[sokra]

Yep, but in real world I have not seen anyone use this

It seem to be new and not yet supported:

It can show a fallback colors and crop images, so that's capability that url() doesn't have.

[vankop]

should we do here same as #14857

[vankop]

interesting small improvement #10064 (comment) possible here

[vankop]

maybe we need a hooks here (at least in webpack@6)

[webpack-bot]

I've created an issue to document this in webpack/webpack.js.org.