Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including postcss-plugin-px2rem with all npm packages installed. Try it out:

var postcssPluginPx2rem = require("postcss-plugin-px2rem")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-plugin-px2rem v0.8.1

A plugin for PostCSS that generates rem units from multi units.


NPM version Build Status Coverage Status NPM downloads Dependency Status

postcss plugin px2rem.


A plugin for PostCSS that generates rem units from pixel units.


$ npm i --save postcss-plugin-px2rem


input and output

// input
h1 {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 1px;

// output
h1 {
  margin: 0 0 0.2rem;
  font-size: 0.32rem;
  line-height: 1.2;
  letter-spacing: 0.01rem;


import { writeFile, readFileSync } from 'fs';
import postcss from 'postcss';
import pxtorem from 'postcss-plugin-px2rem';

const css = readFileSync('/path/to/test.css', 'utf8');
const options = {
  replace: false,
const processedCss = postcss(pxtorem(options)).process(css).css;

writeFile('/path/to/test.rem.css', processedCss, err => {
  if (err) throw err;
  console.log('Rem file written.');

with webpack

import px2rem from 'postcss-plugin-px2rem';
const px2remOpts = {
export default {
  module: {
    loaders: [
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader',
  postcss: [px2rem(px2remOpts)],

with atool-build


import webpack from 'atool-build/lib/webpack';
import px2rem from 'postcss-plugin-px2rem';

export default webpackConfig => {
  const px2remOpts = {

  return webpackConfig;



  rootValue: 100,
  unitPrecision: 5,
  propWhiteList: [],
  propBlackList: [],
  selectorBlackList: [],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 0
  • rootValue (Number|Object) The root element font size. Default is 100.
    • If rootValue is an object, for example { px: 50, rpx: 100 }, it will replace rpx to 1/100 rem , and px to 1/50 rem.
  • unitPrecision (Number) The decimal numbers to allow the REM units to grow to.
  • propWhiteList (Array) The properties that can change from px to rem.
    • Default is an empty array that means disable the white list and enable all properties.
    • Values need to be exact matches.
  • propBlackList (Array) The properties that should not change from px to rem.
    • Values need to be exact matches.
  • exclude (Reg) a way to exclude some folder,eg. /(node_module)/.
  • selectorBlackList (Array) The selectors to ignore and leave as px.
    • If value is string, it checks to see if selector contains the string.
      • ['body'] will match .body-class
    • If value is regexp, it checks to see if the selector matches the regexp.
      • [/^body$/] will match body but not .body
  • ignoreIdentifier (Boolean/String) a way to have a single property ignored, when ignoreIdentifier enabled, then replace would be set to true automatically.
  • replace (Boolean) replaces rules containing rems instead of adding fallbacks.
  • mediaQuery (Boolean) Allow px to be converted in media queries.
  • minPixelValue (Number) Set the minimum pixel value to replace.



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free