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

Autoprefixer for Inline Style objects

Warning: Very early stage supporting only a small set of prefixes by now. Usage on your own risk!

npm install inline-style-prefixer

inline-style-prefixer adds required vendor prefixes to your style object. It only adds prefixes if they're actually required since it evaluates the environments userAgent.

The information is based on caniuse.com.

Usage

import Prefixer from 'inline-style-prefixer';

let styles = {
	transition: '200ms all linear',
	userSelect: 'none',
	nested : {
		boxSizing: 'border-box',
		appearance: 'none',
		color: 'blue',
		flex: 1
	}
}

Prefixer.process(styles);

Assuming you are using .e.g Chrome version 27.0 this would output the following styles object:

{
	transition: '200ms all linear',
	WebkitUserSelect: 'none',
	userSelect: 'none',
	nested: {
		boxSizing: 'border-box',
		WebkitAppearance: 'none',
		appearance: 'none',
		color: 'blue',
		WebkitFlex: 1,
		flex: 1
	}
}

Custom userAgent

Sometimes your environment does not provide a proper userAgent string e.g. if you are rendering on server-side. Therefore you can use setUserAgent and getUserAgent.

import Prefixer from 'inline-style-prefixer';

Prefixer.setUserAgent('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');
Prefixer.getUserAgent() // => 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

How it works

While installing it automatically searches the latest caniuse.com data for CSS properties and creates a data map sort by browsers. Those maps include pairs of properties and the maximum version that needs a prefix.

Based on browser and browser version it then generates a list of properties that need to be prefixed.

Conclusion: It only adds prefixes that are really needed!

License

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