babel-plugin-react-inline-px2units
v1.0.2
Published
babel plugin
Downloads
9
Readme
babel-plugin-react-inline-px2units
react inline style: pixel units to rem units
Install
npm install babel-plugin-react-inline-px2units --save-dev
# or
yarn add -D babel-plugin-react-inline-px2units
Usage
The plugin is only used for JSX syntax, it works with preset-react
{
presets: ["@babel/preset-react"],
plugins: ["react-inline-px2units"]
}
With the default settings
/* input */
function App(){
return <div style={{width: '20px'}}></div>
}
/* output */
function App() {
return /*#__PURE__*/ React.createElement(\"div\", {
style: {
width: "20rem",
},
});
}
Options
| Option | type | default | desc | | ------------- | ------ | ------- | ----------------------------------------------------- | | divisor | number | 1 | replace pixel value with pixel / divisor | | multiple | number | 1 | replace pixel value with pixel * multiple | | decimalPlaces | number | 2 | replace pixel value with pixel.toFixed(decimalPlaces) | | targetUnits | string | rem | replace pixel units |
Tips
if you want to tranform pixel value in css, please use @remax/postcss-px2units