Margin shorthands are not patched correctly

[fdietze]

When merging and patching margin/padding shorthands, the result is wrong:

var vnode = h('div#root', h('div',{style: {
    margin: '10px 20px 40px',   // top | horizontal | bottom (https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Syntax)
    marginRight: '20px'
  }},'A'));
patch(container, vnode);

var newVnode = h('div#root', h('div',{style: {
    margin : '10px 20px 40px',
  }}, 'B'));
patch(vnode, newVnode); // marginRight will be removed here. This is wrong.

Fiddle: https://jsfiddle.net/m7t4xj12/1/

[fdietze]

Here are the pure dom operations:

var node = document.createElement('div')
container.appendChild(node)
node.style.margin = '10px 20px 40px';
node.style.marginRight = '30px';
node.style.marginRight = '';

Result:

<div style="margin-top: 10px; margin-bottom: 40px; margin-left: 20px;"></div>

The shorthand itself is the problem... 😢

https://jsfiddle.net/6uhtronb/

[fdietze]

React issue: facebook/react#6348
Vue: vuejs/vue#7756

[nojvek]

I don't think this is a problem of snabbdom. As shown from your pure dom operations that browser still behaves quirky with

var node = document.createElement('div')
container.appendChild(node)
node.style.margin = '10px 20px 40px';
node.style.marginRight = '30px';
node.style.marginRight = '';

because two different properties are being diffed.

The workaround soln is to use

var vnode = h('div#root', h('div',{style: {
    marginRight: '20px',
    marginLeft: '20px',
    marginTop: '10px',
    marginBottom: '40px',
  }},'A'));
patch(container, vnode);

var newVnode = h('div#root', h('div',{style: {
    marginLeft: '20px',
    marginTop: '10px',
    marginBottom: '40px',
  }},'B'));
patch(vnode, newVnode); 

[fdietze]

Correct. The solution is to not use shorthands. This should be clearly noted in the readme, else people get unexpected behavior.

[mightyiam]

Closing this in favor of #815.