JSPM

  • Created
  • Published
  • Downloads 3092904
  • Score
    100M100P100Q217628F
  • License MIT

Run-time Autoprefixer for JavaScript style objects

Package Exports

  • inline-style-prefixer
  • inline-style-prefixer/es/index.js
  • inline-style-prefixer/lib/createPrefixer
  • inline-style-prefixer/lib/createPrefixer.js
  • inline-style-prefixer/lib/data
  • inline-style-prefixer/lib/data.js
  • inline-style-prefixer/lib/generator
  • inline-style-prefixer/lib/generator/index.js
  • inline-style-prefixer/lib/index.js
  • inline-style-prefixer/lib/plugins/calc
  • inline-style-prefixer/lib/plugins/calc.js
  • inline-style-prefixer/lib/plugins/crossFade
  • inline-style-prefixer/lib/plugins/crossFade.js
  • inline-style-prefixer/lib/plugins/cursor
  • inline-style-prefixer/lib/plugins/cursor.js
  • inline-style-prefixer/lib/plugins/filter
  • inline-style-prefixer/lib/plugins/filter.js
  • inline-style-prefixer/lib/plugins/flex
  • inline-style-prefixer/lib/plugins/flex.js
  • inline-style-prefixer/lib/plugins/flexboxIE
  • inline-style-prefixer/lib/plugins/flexboxIE.js
  • inline-style-prefixer/lib/plugins/flexboxOld
  • inline-style-prefixer/lib/plugins/flexboxOld.js
  • inline-style-prefixer/lib/plugins/gradient
  • inline-style-prefixer/lib/plugins/gradient.js
  • inline-style-prefixer/lib/plugins/grid
  • inline-style-prefixer/lib/plugins/grid.js
  • inline-style-prefixer/lib/plugins/imageSet
  • inline-style-prefixer/lib/plugins/imageSet.js
  • inline-style-prefixer/lib/plugins/logical
  • inline-style-prefixer/lib/plugins/logical.js
  • inline-style-prefixer/lib/plugins/position
  • inline-style-prefixer/lib/plugins/position.js
  • inline-style-prefixer/lib/plugins/sizing
  • inline-style-prefixer/lib/plugins/sizing.js
  • inline-style-prefixer/lib/plugins/transition
  • inline-style-prefixer/lib/plugins/transition.js
  • inline-style-prefixer/lib/utils/capitalizeString
  • inline-style-prefixer/lib/utils/capitalizeString.js
  • inline-style-prefixer/lib/utils/prefixProperty
  • inline-style-prefixer/lib/utils/prefixProperty.js
  • inline-style-prefixer/lib/utils/prefixValue
  • inline-style-prefixer/lib/utils/prefixValue.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (inline-style-prefixer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

inline-style-prefixer

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

npm downloads gzipped size npm version

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: 13+
  • iOS (Safari): 13+
  • 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.

Community

Here are some popular users of this library:

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.