background-image gradients are lost if background-image has a url defined as the "background"

[AlexKeySmith]

Take the following CSS:

.test {
    background: url("http://placehold.it/100x100");
    background-repeat: repeat;
    background-image: linear-gradient(rgba(44, 44, 44, 0.1), rgba(44, 44, 44, 0.5)), url("http://placehold.it/100x100");
    width: 100px;
    height: 100px;
}

This will result in:

.test{background:url(http://placehold.it/100x100);background:url(http://placehold.it/100x100);width:100px;height:100px}

Note, the linear-gradient is lost.

If you remove the url on the background e.g. the following

background-image: linear-gradient(rgba(44, 44, 44, 0.1), rgba(44, 44, 44, 0.5)), url("http://placehold.it/100x100");

becomes:

background-image: linear-gradient(rgba(44, 44, 44, 0.1), rgba(44, 44, 44, 0.5))

It does not occur.

It is probably not the most sensible CSS, however it is interpreted in the browser as expected, whereas clean-css gives you a surprise :-)

[jakubpawlowicz]

That's surprising indeed!

[jakubpawlowicz]

Fixed in 3.1.2!

[AlexKeySmith]

Thanks @jakubpawlowicz ! :-)