react inline auto-prefixer

this is a strong utility for adding prefixes for inline styles as used in React.js, that supports most css prefixes, browser or server rendering, and nested style objects. 

Usage:

varprefixedStyle=autoprefix(stylesObject);

Example

importautoprefixfrom'autoprefix';varComponent=React.createClass({render(){return(<divstyle={autoprefix({flexDirection:'row'})>auto-prefixeswitheveryrender(suitablewhenstate/propschangesstyle)</div><divstyle={this.styleSheet.style1)>styleSheetwillonlybeauto-prefixedonceonmount-moreperformant
</div><divstyle={this.styleSheet.style2.nested1)>worksalsowhennested
</div>
)
}styleSheet: autoprefix({style1:{justifyContent: 'space-between',overflow: 'auto',flexShrink: 0},style2:{nested1:{display: 'flex',width: 'calc(100% - 10px)'}}})})

Server rendering

By default, it will add prefixes only for the client's browser. When doing server rendering of a react page, you should add prefixes for every relevant browser. that's really easy -

varprefixedStyle=autoprefix(stylesObject,true);// or - even easier, when requiring autoprefix, do this:varautoprefix=require('autoprefix')(true);

Supports:

• flex:
  • display: flex
  • alignContent
  • alignItems
  • alignSelf
  • flex
  • flexBasis
  • flexDirection
  • flexFlow
  • flexGrow
  • flexShrink
  • flexWrap
  • justifyContent
• old flex box (new flex properties are transformed automatically)
• animation, and its sub properties::
  • Delay
  • Direction
  • Duration
  • FillMode
  • IterationCount
  • Name
  • PlayState
  • TimingFunction
• appearance
• backfaceVisibility
• backgroundClip
• borderImage, borderImageSlice
• boxShadow
• boxSizing
• calc
• clipPath
• columns
• cursor
• fontSmoothing
• order
• perspective, perspectiveOrigin
• transform, and its sub properties:
  • Origin
  • OriginX
  • OriginY
  • OriginZ
  • Style
• transition, and its sub properties:
  • Delay
  • Duration
  • Property
  • TimingFunction
• userSelect

Installation

$ npm install auto-prefixer --save