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:
var prefixedStyle = ;
Example
; var Component = React
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 -
var prefixedStyle = ;// or - even easier, when requiring autoprefix, do this:var 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