Autoprefixer for inline styles
JavaScript
Switch branches/tags
Clone or download
Pull request Compare This branch is 4 commits ahead, 155 commits behind rofrischmann:master.
xymostech Make prefixAll not put camelCased properties in the strings it genera…
…tes.

Summary: Sometimes, `.prefixAll` generated styles that looked like
`{marginLeft: "-webkit-calc(50% - (608px / 2));marginLeft:-moz-calc(50% - (608px / 2));marginLeft:calc(50% - (608px / 2))" }`.
(I observed this locally on a bibliotron page). This is pretty clearly wrong,
where the styles inside the string haven't been dash-cased, so only the
`-webkit-calc()` version would end up being parsed correctly. This fixes that
by dash-casing properties before putting them in strings.

Test Plan:
 - `npm run test`

Auditors: jlfwong
3
Latest commit f41f304 Feb 10, 2016

README.md

[![Build Status](https://travis-ci.org/rofrischmann/inline-style-prefixer.svg)](https://travis-ci.org/rofrischmann/inline-style-prefixer) [![Test Coverage](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/badges/coverage.svg)](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/coverage) [![Code Climate](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/badges/gpa.svg)](https://codeclimate.com/github/rofrischmann/inline-style-prefixer) [![npm version](https://badge.fury.io/js/inline-style-prefixer.svg)](http://badge.fury.io/js/inline-style-prefixer) [![npm downloads](https://img.shields.io/npm/dm/inline-style-prefixer.svg)](https://img.shields.io/npm/dm/inline-style-prefixer.svg) ![Dependencies](https://david-dm.org/rofrischmann/inline-style-prefixer.svg) ![Gzipped Size](https://img.shields.io/badge/gzipped-~8k-brightgreen.svg)

inline-style-prefixer adds required vendor prefixes to your style object. It only adds prefixes if they're actually required by evaluating the browser's userAgent against data from caniuse.com.

Browser Support

Supports the major browsers with the following versions.
For legacy support check custom build.

  • Chrome: 30+
  • Safari: 6+
  • Firefox: 25+
  • Opera: 13+
  • IE: 9+
  • Edge 12+
  • iOS: 6+
  • Android: 4+
  • IE mobile: 9+
  • Opera mini: 5+
  • Android UC: 9+
  • Android Chrome: 30+

Whitelisted Browser

Some browser e.g. headless browsers are whitelisted to not throw errors and not prefix at all.

  • PhantomJS

Docs

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

npm install inline-style-prefixer

Prefixer([config])

import Prefixer from 'inline-style-prefixer'

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

const prefixer = new Prefixer()
const prefixedStyles = prefixer.prefix(styles)

// Assuming you are using e.g. Chrome version 25
// prefixedStyles === output
const output = {
  transition: '200ms all linear',
  WebkitUserSelect: 'none',
  boxSizing: 'border-box',
  display: '-webkit-flex',
  color: 'blue'
}

Config

userAgent

Default: navigator.userAgent

Sometimes your environment does not provide a proper userAgent string e.g. if you are rendering on server-side. Therefore optionally just pass a userAgent-string.

const customUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36'

const prefixer = new Prefixer({userAgent: customUserAgent})

keepUnprefixed

Default: false

Use this option to keep default values. This should be used if you're facing wrong prefixes.

const styles = {
  userSelect: 'none',
  display: 'flex'
}

const prefixer = new Prefixer({keepUnprefixed: true})
const prefixedStyles = prefixer.prefix(styles)

// Assuming you are using e.g. Chrome version 22
// prefixedStyles === output
const output = {
  WebkitUserSelect: 'none',  
  // unprefixed properties do not get removed
  userSelect: 'none',
  // unprefixed values will be appended to the string
  display: '-webkit-flex;display:flex'
}

Prefixer.prefixAll (static)

Sometimes you might to prerender something without knowing the userAgent yet. Use the static prefixAll to achieve that.

const styles = {alignItems: 'center'}

const prefixedStyles = Prefixer.prefixAll(styles)

// the userAgent doesn't matter
// prefixedStyles === output
const output = {
  MozAlignItems: 'center',
  WebkitAlignItems: 'center',
  msAlignItems: 'center',
  alignItems: 'center',
  // it also adds legacy properties
  // by running every plugin available
  WebkitBoxAlign: 'center',
  msFlexAlign: 'center',
}

Prefix Information

Every Prefixer instance also provides prefix information.

// e.g. using a Chrome version 40 userAgent
prefixer.cssPrefix = '-webkit-'
prefixer.jsPrefix = 'Webkit'
prefixer.prefixedKeyframes = '-webkit-keyframes'

Custom Build & Legacy Support

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

License

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

Contributing

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-prefixer by any kind please don't be shy and send a pull request to let everyone benefit.

Issues

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.

Pull Requests

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.