为React添加Flexbox样式的前缀

Question

我真的很喜欢React如何为你净化事件所以我很惊讶地发现他们也没有为你的CSS样式添加前缀!

无论如何,我开始实现我自己的基本前缀,如下所示:

var prefixes = ["ms", "Moz", "Webkit", "O"];
var properties = [
  'userSelect',
  'transform',
  'transition',
  'transformOrigin',
  'transformStyle',
  'transitionProperty',
  'transitionDuration',
  'transitionTimingFunction',
  'transitionDelay',
  'borderImage',
  'borderImageSlice',
  'boxShadow',
  'backgroundClip',
  'backfaceVisibility',
  'perspective',
  'perspectiveOrigin',
  'animation',
  'animationDuration',
  'animationName',
  'animationDelay',
  'animationDirection',
  'animationIterationCount',
  'animationTimingFunction',
  'animationPlayState',
  'animationFillMode',
  'appearance',
  'flexGrow',
];


function vendorPrefix(property, value) {
  var result = {}
  result[property] = value

  if( properties.indexOf(property) == -1 ){
    return result;
  }

  property = property[0].toUpperCase() + property.slice(1);

  for (var i = 0; i < prefixes.length; i++) {
    result[prefixes[i] + property] = value;
  };

  return result;
}

React.prefix = function(obj) {
  var result = {};

  for(var key in obj){
    var prefixed = vendorPrefix(key, obj[key])
    for(var pre in prefixed){
      result[pre] = prefixed[pre]
    } 
  }
  return result;
};

但后来我意识到一个大问题,React使用一个对象作为样式并适当地为flexbox添加前缀,你需要为值而不是属性添加前缀.因此,我不能同时包含以下所有样式:

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

任何想法如何解决这个问题？

Answer 1

我更喜欢将样式放在单独的文件中并使用Autoprefixer。

使用 grunt 和其他任务运行程序进行设置非常容易，并且可以针对您想要支持的特定浏览器。它会检查 caniuse 数据库以保持最新状态，甚至会从 CSS 中删除任何不必要的前缀。

它还可以使用 less 和 sass 作为后编译器。

希望有帮助！