To help you get started, we've collected the most common ways that inline-style-prefixer is being used within popular public projects.

styled-components / vue-styled-components / src / utils / autoprefix.js View on Github

root.walkDecls((decl) => {
    /* No point even checking custom props */
    if (/^--/.test(decl.prop)) return

    const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }
    const prefixed = prefixAll(objStyle)
    Object.keys(prefixed).reverse().forEach(newProp => {
      const newVals = prefixed[newProp]
      const newValArray = Array.isArray(newVals) ? newVals : [newVals]
      newValArray.forEach((newVal) => {
        decl.cloneBefore({
          prop: hyphenateStyleName(newProp),
          value: newVal
        })
      })
    })
    decl.remove()
  })
}

View more ways to use inline-style-prefixer

inline-style-prefixer

A small, simple and fast vendor prefixer from JavaScript style object.

Support Us

Support Robin Frischmann's work on Fela and its ecosystem (inline-style-prefixer) directly via Patreon.

Installation

yarn add inline-style-prefixer

If you're still using npm, you may run npm i --save inline-style-prefixer.

Browser Support

It supports all major browsers with the following versions. For other, unsupported browses, we automatically use a fallback.

• Chrome: 55+
• Android (Chrome): 55+
• Android (Stock Browser): 5+
• Android (UC): 11+
• Firefox: 52+
• Safari: 9+
• iOS (Safari): 9+
• Opera: 30+
• Opera (Mini): 12+
• IE: 11+
• IE (Mobile): 11+
• Edge: 12+

It will only add prefixes if a property still needs them in one of the above mentioned versions.
Therefore, e.g. border-radius will not be prefixed at all.

Need to support legacy browser versions?
Don't worry - we got you covered. Check this guide.

Usage

import { prefix } from 'inline-style-prefixer'

const style = {
  transition: '200ms all linear',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue'
}

const output = prefix(style)

output === {
  WebkitTransition: '200ms all linear',
  transition: '200ms all linear',
  MozBoxSizing: 'border-box',
  boxSizing: 'border-box',
  display: [ '-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex' ]
  color: 'blue'
}

Usage with TypeScript

You can use TypeScript definition from DefinitelyTyped using @types/inline-style-prefixer

yarn add @types/inline-style-prefixer

# alternatively use npm
npm i --save @types/inline-style-prefixer

Documentation

If you got any issue using this prefixer, please first check the FAQ's. Most cases are already covered and provide a solid solution.

• Usage Guides
• Data Reference
• API Reference

Community

Here are some popular users of this library:

• Aphrodite
• Fela
• Glamor
• Material UI
• nano-css
• Radium
• react-native-web
• styled-components
• Styletron

PS: Feel free to add your solution!

Support

Join us on Gitter. We highly appreciate any contribution.
We also love to get feedback.

License

inline-style-prefixer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all contributors.