Selective support for multiple property values declarations

[bago]

Juice already have opened issues about "missing vendor prefixes support" wrt to "display: flex" (#205) and "background-image: linear-gradient" needs (#27).

But the issue is more general and the simpler scenario is declaring a "flat" color and then declaring a transparent color for platforms supporting RGBA.

You may want to declare a 50% transparent red color but also provide a fallback for email clients not supporting rgba, so you declare it this way:

a {
  color: red;
  color: rgba(255,0,0,.5);
}

Current juice will only put inline the last declaration and the "fallback" won't work anymore.

The same issue happens when you try to declare multiple times the display or the background-image using vendor prefixed versions of the flex display mode or the linear-gradient declarations.

The "right" way to deal with this cascading issue would be to inline EVERY property even when they are overridden, but this put a lot of useless properties inline and this makes the resulting code very big.

I think a good solution is the one implemented by Styliner by keeping the multiple declarations for the same property only when the declarations belongs to the same "rule", so:

a {
  color: red;
  color: rgba(255,0,0,.5);
}

will inline "color: red; color: rgba(255,0,0,.5)" while

a {
  color: red;
}
a {
  color: rgba(255,0,0,.5);
}

will only inline "color: rgba(255,0,0,.5)".