Shorthand properties don't merge with equivalent non-shorthand properties as expected.

[tkaemming]

Shorthand properties (e.g. padding, margin, font, etc.) mixed with individual property declarations don't merge as expected, and the resulting property list can violate specificity rules.

For instance, this example:

h1 { padding: 0 10px; }
h1#id { padding-top: 10px; }

should combine to either of these equivalent forms:

padding: 10px 10px 0 10px

or:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

… but right now, that property list ends up merging and resulting in this property list:

padding: 0 10px;
padding-top: 10px;

or, this property list — since the output order is non-deterministic:

padding-top: 10px;
padding: 0 10px;

These two different forms have two different results, with their computed results being:

padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;

and:

padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;

This behavior is explained under "Tricky edge cases" on the MDN documentation.

A good first step would probably be to expand shorthand properties to individual properties upon parsing (ensuring shorthand and individual properties are never merged.) Later, properties could be "compressed" back into shorthand when possible to conserve bytes.

[tkaemming]

This is partially fixed — I updated this in GH-20 this so that margin and padding are expanded from their shorthand forms to specific property values. If other shorthand properties are used, a warning will get logged so that the caller (hopefully) knows that they should use the specific form when they are depending on rules to inherit correctly.

There are still a few things to do here:

• Add support for border-width. This should be reasonably easy, except the property name prefix would need to be changed to a template, as the property-{top,right,bottom,left} pattern doesn't hold here, since this expands to border-{top,right,bottom,left}-width. See Add support for border-width shorthand property. #21.
• If all of the specific properties are defined for a node, we should be able to collapse them back to the shorthand to simplify the output and save on bytes. I didn't do this yet, since the Properties type is a mapping of string values, which can include a priority definition (e.g. !important.) Ideally, this would only merge the specific values back into a shorthand representation if all of the property value priorities are the same. It'd be a lot simpler do to this if the Properties object was a mapping where values are Property types which include the priority attribute.
• Add support for the more complex shorthand properties, such as font and background.

[tkaemming]

I didn't do this yet, since the Properties type is a mapping of string values, which can include a priority definition (e.g. !important.)

Oops, I forgot about this one. Should do that before releasing the next version.