Background position wrongly merged?

[atomictag]

It seems the latest versions are more aggressive in merging background attributes with multiple values - but the merge is not always correct. Here's an example with background-position:

Source .css:

.test {
    background: url(top.png) no-repeat, url(bottom.png) no-repeat, url(middle.png) no-repeat;
    background-position: left 0px top -12px, left 0px bottom -12px, left 0px top 0px;
}

clean-css 2.1.8 (OK - but background-position is not merged):

.test{
    background:url(top.png) no-repeat,url(bottom.png) no-repeat,url(middle.png) no-repeat;
    background-position:left 0 top -12px,left 0 bottom -12px,left 0 top 0
}

clean-css 2.2.3 (NOT OK - background-position is merged in the wrong place):

.test {
    background:url(top.png) no-repeat,url(bottom.png) no-repeat,url(middle.png) no-repeat left 0 top -12px,left 0 bottom -12px,left 0 top 0
}

expected (OK - all background properties are merged correctly):

.test{
    background:url(top.png) no-repeat left 0 top -12px,url(bottom.png) no-repeat left 0 bottom -12px,url(middle.png) no-repeat left 0 top 0;
}

[GoalSmashers]

It's wrong indeed. Fix is coming!

[GoalSmashers]

Fixed in 2.2.7!

[hbj]

Still happening with 2.2.13.

Source:

background: url(images/check-empty.png) no-repeat right 10px top 10px, linear-gradient(0deg, #efefef 0%, #ffffff 100%);

Result with default options (not OK):

background:url(images/check-empty.png) right 10px no-repeat,linear-gradient(0deg,#efefef 0,#fff 100%);

Result with --skip-advanced (OK):

background:url(images/check-empty.png) no-repeat right 10px top 10px,linear-gradient(0deg,#efefef 0,#fff 100%);

[jakubpawlowicz]

Could you please check with 2.2.16? Works fine for me.

[hbj]

Same with 2.2.16. Here is the complete code failing:

.checkbox.button input + label {
        background: url(images/check-empty.png) no-repeat right 10px top 10px, linear-gradient(0deg, #efefef 0%, #ffffff 100%);
}

Result:

.checkbox.button input+label{background:url(images/check-empty.png) right 10px no-repeat,linear-gradient(0deg,#efefef 0,#fff 100%)}

[jakubpawlowicz]

Got it now. Reopening...

[rafinskipg]

Same issue here with 2.2.16

this

background: url("/assets/images/icons/arrow_down_2x.png") no-repeat right 9px top 15px/9px 7px, linear-gradient(-179deg, #FFFFFF 0%, #F9F9F9 100%);

produces

background: url(/assets/images/icons/da1d8bf2.arrow_down_2x.png) right 9px/9px 7px no-repeat,linear-gradient(-179deg,#FFF 0,#F9F9F9 100%);

[XhmikosR]

@rafinskipg: disable advanced optimizations until this is fixed.

[HonzaMikula]

Yep, have the same issue. I hope you fix it soon. Thanks.

[jakubpawlowicz]

3.0 will have an option to disable shorthand compacting too. Hopefully will be able to fix it though.

[jakubpawlowicz]

It's fixed in master and 2.2 branch now. Also version 2.2.22 has just been released with this fix.