react-prefixer
v2.0.1
Published
Add vendor-specific prefixes to React styles
Downloads
3,980
Maintainers
Readme
react-prefixer
react-prefixer is a tiny package designed to provide vender-specific prefixes to the style objects you use in your React project.
Table of contents
Installation
$ npm install react-prefixer
Usage
import prefix from 'react-prefixer';
const styles = prefix({
userSelect: 'none'
});
console.log(styles); // {WebkitUserSelect:"none"}
It also works on deeply-nested objects:
import prefix from 'react-prefixer';
const styles = prefix({
some:{
really:{
deep:{
style:{
userSelect: 'none'
}
}
}
}
});
console.log(styles); // {some:{really:{deep:{style:{WebkitUserSelect:"none"}}}}}
And will appropriately modify your values for legacy syntaxes on transition:
import prefix from 'react-prefixer';
const styles = prefix({
transition: 'transform 200ms'
});
console.log(styles); // {WebkitTransition:"-webkit-transform 200ms"}, if on Safari for example
It will also do the tweener or most recent vendor syntax for flexbox:
import prefix from 'react-prefixer';
const styles = prefix({
display: 'flex'
});
console.log(styles);
// {display: '-webkit-flex'}, if on Safari
// {display: '-ms-flexbox'}, if on IE10
Test environments
When running in test environments where there is a JS-based DOM (jsdom
for example), the getComputedStyle
method will return an empty array of styles when calculating the prefix. This previously caused an error which is since resolved, however it will default to assuming no browser prefix at all. As such, if you want to perform tests based on a specific browser prefix, you will need to mock the getComputedStyle
property on the window
. An example that is for tests with Webkit browsers:
const originalGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = function(...args) {
if (arguments[0] === document.documentElement) {
return ['-webkit-appearance'];
}
return originalGetComputedStyle.apply(window, args);
};
Browser support
- IE10+ and Edge
- Firefox
- Chrome
- Safari
- Opera
Development
Standard stuff, clone the repo and npm i
to get the dependencies. npm scripts available:
build
=> runs webpack to build the compiled JS file withNODE_ENV
set todevelopment
build:minified
=> runs webpack to build the compiled and optimized JS file withNODE_ENV
set toproduction
clean
=> runsrimraf
on bothlib
anddist
directoriesdev
=> runs the webpack dev server for the playgroundlint
=> runs ESLint against files in thesrc
folderlint:fix
=> runslint
with--fix
appliedprepublish
=> if in publish, runsprepublish:compile
prepublish:compile
=> runsclean
,lint
,test
,transpile
,build
andbuild:minified
test
=> runsava
against all files insrc
test:watch
=> runstest
with a persistent watchertranspile
=> runs Babel against files insrc
to files inlib
Happy prefixing!