CSS: incorrect minification of background shorthand

[JRaspass]

If you write your background CSS across three properties like so:

background: #fff url(foo.svg) no-repeat;
background-position: right .75rem center;
background-size: auto calc(100% - 1.5rem);

Then all is right with the world and it is minified to this:

background:#fff url(foo.svg) no-repeat;background-position:right .75rem center;background-size:auto calc(100% - 1.5rem)

However if you combine the properties into one:

background: #fff url(foo.svg) no-repeat right .75rem center / auto calc(100% - 1.5rem);

Then the following invalid CSS is produced:

background:#fff url(foo.svg) no-repeat 100% .75rem 50% calc(100% - 1.5rem)

There's two bugs here, adding the forward slash back in between the .75rem and the 50% causes it to be valid, but it still looks wrong.

The original right .75rem center / auto calc(100% - 1.5rem) is needed to correctly display that image to the right of the element, .75 rem from each edge.

[tdewolff]

It was getting confused by the calc function, should be working now!

[JRaspass]

@tdewolff 87dacf4 has restored the slash & auto, but Chrome thinks the new CSS is also invalid:

background: #fff url(foo.svg) no-repeat 100% .75rem 50%/auto calc(100% - 1.5rem)

Swapping the 100% and 50% back to right and center respectively causes Chrome to accept it:

background: #fff url(foo.svg) no-repeat right .75rem center/auto calc(100% - 1.5rem)

[tdewolff]

You are right, I've had an error in my assumptions. To sum up, these are valid values:

• Just one value: left | right | top | bottom | center | <value> and the other is assumed to be center
• Two values: left | right | center | <value> and top | bottom | center | <value>
• Two to four values: center | [left | right] <value>? and center | [top | bottom] <value>? in any order

In the last case, we can minify left 5% to just 5% and top 5% to 5%. Only right and bottom make sense there. The error in the minifier currently is that in right .75rem center it should retain right and minify center to 50%.

[JRaspass]

/me renames CSS to complicated style sheets :-P

Thanks for looking into this more @tdewolff, I look forward to testing whatever fix you come up with.

[tdewolff]

Additionally I've found that bottom 10% right 20% can be minified to 80% 90%. Does the new commit work for you?

[JRaspass]

@tdewolff I can confirm that the recent commit has fixed all my issues, awesome work, thanks! :-)