Naming Prosecution Mitigator

    auto-prefixer

    0.4.2 • Public • Published

    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 = autoprefix(stylesObject);

    Example

    import autoprefix from 'autoprefix';
     
    var Component = React.createClass({
      render() {
          return (
            <div style={autoprefix({flexDirection:'row'})>
                auto-prefixes with every render (suitable when state/props changes style)
            </div>
            <div style={this.styleSheet.style1)>
                styleSheet will only be auto-prefixed once on mount - more performant
            </div>
            <div style={this.styleSheet.style2.nested1)>
                works also when nested
            </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 -

    var prefixedStyle = autoprefix(stylesObject, true);
    // or - even easier, when requiring autoprefix, do this:
    var autoprefix = 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

    Travis build status Code Climate Test Coverage Dependency Status devDependency Status

    Install

    npm i auto-prefixer

    DownloadsWeekly Downloads

    333

    Version

    0.4.2

    License

    MIT

    Last publish

    Collaborators

    • yonatanmn