`calc` prefixes break complex values

[nsaunders]

It looks like browser prefixes aren't properly applied to complex values that include calc expressions.

Considering current widespread support, are the prefixes still needed anyway?

Given:

padding (px 1) (px 1) (px 1) (em 1.0 @-@ px 1)

Expected:

{
  padding:1px 1px 1px -webkit-calc(1em - 1px);
  padding:1px 1px 1px -moz-calc(1em - 1px);
  padding:1px 1px 1px -ms-calc(1em - 1px);
  padding:1px 1px 1px -o-calc(1em - 1px);
  padding:1px 1px 1px calc(1em - 1px);
}

Actual:

{
  padding:-webkit-1px 1px 1px calc(1em - 1px);
  padding:-moz-1px 1px 1px calc(1em - 1px);
  padding:-ms-1px 1px 1px calc(1em - 1px);
  padding:-o-1px 1px 1px calc(1em - 1px);
  padding:1px 1px 1px calc(1em - 1px);
}

[turion]

Considering current widespread support, are the prefixes still needed anyway?

Yes, I think it would be ok to remove them.

It's still interesting to understand how this error comes across: The trouble is in the Semigroup instance of Value, which boils down to:

https://github.com/sebastiaanvisser/clay/blob/16f55a5c6ab7fd98e39cedf852bd3400a02ac45f/src/Clay/Property.hs#L27

When you do <> on values, and one of them has prefixes like the browsers, the prefixes will move to the outside. Spoiler alert: padding is defined using <>. Not sure what would be the cleanest solution, if not removing the browser prefixes for calc.