Ensure default value is set on styles that can be joined using a shorthand

[dariocravero]

Since we swapped to using css modules instead of emotion, when the bundle gets created any styles that can use a shorthand (eg margin) get convert to that format instead of using different properties. It works fine most times, but it breaks if there's no default value set on a prop.

Take this example:

Vertical
marginTop < 0
marginRight < 0
marginBottom < 0
marginLeft <

marginLeft has no default value.

In production, CSS modules compiles it to:

margin: var(--marginTop) var(--marginRight) var(--marginBottom) var(--marginLeft);

Since var(--marginLeft) takes undefined, the style breaks.

Here's an example of the problem with raw HTML:

lass="test" style="--marginTop: 20px;--marginRight: 20px;--marginBottom: 20px;--marginLeft:20px;">
  Works
</div>

<div class="test" style="--marginTop: 20px;--marginRight: 20px;--marginBottom: 20px;">
  Doesn't (missing default value for --marginLeft var)
</div>

<style>
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background-color:blue; }
.test {
  margin: var(--marginTop) var(--marginRight) var(--marginBottom) var(--marginLeft);
  background-color: red;
}
</style>

We could say this is down to users to mind that on their apps but CSS modules doesn't merge the values in development mode so it's easy to miss. Tools should help with that but the morpher should ultimately ensure that any styles that can be shorthanded get a default to prevent these issues.