background shorthand produces invalid CSS

[nsaunders]

Describe the bug

The background "shorthand" function produces invalid CSS.

To Reproduce

For example...

background (contain /\ placed sideCenter sideCenter)

...is rendered as...

background: contain center center

...even though the correct syntax, per the CSS Backgrounds and Borders Module Level 3 specification, is...

background: center center/contain

Another example relates to background-origin and background-clip:

background (boxClip paddingBox /\ origin contentBox)

...is rendered as (comment mine, per spec)...

background: padding-box content-box /* background-origin background-clip */

Notice that the background-origin and background-clip values are reversed.

Proposal

I'm not sure the background "shorthand" function saves much code, if any at all, compared to setting the constituent properties individually. At the same time, it doesn't offer much type safety and, as demonstrated, produces inaccurate results.

For the moment, I lean toward scrapping this API altogether.

Alternatively:

1. The function must produce accurate results, even if that means the API changes a bit.
2. Ideally, the API should provide meaningful type safety, for example preventing a <bg-size> in the absence of a <bg-position> (spec).
3. The font shorthand property should probably be reimplemented with a similar API at the same time to avoid inconsistent API design.