search

purescript-contrib / purescript-css

A clean, type-safe library for describing, manipulating and rendering CSS
Apache License 2.0
105 stars 39 forks source link

`background` shorthand produces invalid CSS #165

Open nsaunders opened 2 years ago

nsaunders commented 2 years ago

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.