Removing duplicated code causes browser compatibility code broken

[tiye]

Problem related here(but in Chinese): http://segmentfault.com/q/1010000000524331
In short:

.it-is-flex {
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: -ms-flexbox;
  -ms-flex-direction: row;

  display: flex;
  flex-direction: row;
}

After running cleancss in command line, I got a file containning only one display property.
While wrting that in another style works:

.it-is-flex {  
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

My demo can be found here:
http://repo.tiye.me/flexbox-bug/

While it's quite nice a strategy to rid code of duplicated properties, it may also result in confusion why compiled CSS is not working as expected.

[GoalSmashers]

Please see discussion in #210.

[tiye]

So, named "property merging algorithm" #168