$ npm install inline-style-prefix-all
inline-style-prefix-all is a tiny (3.3kb gzipped) static javascript Autoprefixer for inline style objects. It uses data from caniuse.com to get all properties that require a prefix up to a given browser version.
It was extracted from inline-style-prefixer. Check that repository for detailed information on which properties are supported, which special plugins are used and other stuff.
You could also use inline-style-prefixer completely as it uses prefix-all as a fallback, but this repository has reduced file size.
It will only add prefixes if a property still needs them in one of the following browser versions.
This means e.g. border-radius
will not be prefixed at all.
For legacy support check custom build.
npm install inline-style-prefix-all --save
import prefixAll from 'inline-style-prefix-all'
const styles = {
transition: '200ms all linear',
boxSizing: 'border-box',
display: 'flex',
color: 'blue'
}
const prefixedStyles = prefixAll(styles)
// prefixedStyles === output
const output = {
WebkitTransition: '200ms all linear',
// Firefox dropped prefixed transition with version 16
// IE never supported prefixed transitions
transition: '200ms all linear',
MozBoxSizing: 'border-box',
// Firefox up to version 28 needs a prefix
// Others dropped prefixes out of scope
boxSizing: 'border-box',
// Fallback/prefixed values get grouped in arrays
display: ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex']
color: 'blue'
}
You may have to create a custom build if you need older browser versions. Just modify the config.js file which includes all the browser version specifications.
npm install
npm run build
inline-style-prefix-all is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
I would love to see people getting involved.
If you have a feature request please create an issue. Also if you're even improving inline-style-prefix-all by any kind please don't be shy and send a pull request to let everyone benefit.
If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.
If you are creating a pull request, try to use commit messages that are self-explanatory. Also always add some tests unless it's totally senseless (add a reason why it's senseless) and test your code before you commit so Travis won't throw errors.
© 2010 - cnpmjs.org x YWFE | Home | YWFE