inline-style-prefixer

What is inline-style-prefixer?

The inline-style-prefixer is a JavaScript library used for automatically adding vendor prefixes to CSS styles defined in JavaScript objects. This is particularly useful when developing React applications that handle styles primarily in JavaScript. The prefixer uses the user agent to determine which prefixes are necessary for the current browser, ensuring cross-browser compatibility for CSS properties that require vendor prefixes.

What are inline-style-prefixer's main functionalities?

Automatic Prefixing

Automatically adds necessary CSS vendor prefixes to style objects based on the current browser's requirements.

{"display": 'flex'} // becomes {'display': ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex']} after processing

User Agent Based Prefixing

Initializes the prefixer with a specific user agent to tailor the prefixing process to a particular browser's needs.

const prefixer = new Prefixer({userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'}); const style = prefixer.prefix({display: 'flex'});

Other packages similar to inline-style-prefixer

autoprefixer

Autoprefixer is a more robust solution that integrates with build tools like PostCSS to automatically add vendor prefixes to CSS files. Unlike inline-style-prefixer, which is designed for inline styles in JavaScript, Autoprefixer works with static CSS files, making it suitable for a broader range of web development tasks.

postcss-prefixer

PostCSS-prefixer is a PostCSS plugin that allows developers to add prefixes to CSS properties manually. It requires explicit configuration for each prefix, offering more control but less automation compared to inline-style-prefixer, which automatically determines necessary prefixes.

README

inline-style-prefixer

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

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.

• 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.