babel-plugin-react-inline-px2units v1.0.2

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

Tips

if you want to tranform pixel value in css, please use @remax/postcss-px2units