postcss-pxrem-function v0.1.0

postcss-pxrem-function

PostCSS plugin to use pxRem() or pxrem() function to convert pixels to rem.

.foo {
  font-size: pxRem(16px); // font-size: 1rem;
  border-radious: pxrem(16px); // border-radious: 1rem;
}

.foo {
  padding: pxRem(16px) pxrem(20px); // padding: 1rem 1.25rem;
}

Migration from 0.0.x to 0.1.x

In version 0.1.x the pxRem() is can also be used as pxrem() to solve stylelint compatibility. The changes are backwards compatible.

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-pxrem-function

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-pxrem-function'),
    require('autoprefixer')
  ]
}

Step 4: Add configuration for pixels divider:

module.exports = {
  plugins: [
    require('postcss-pxrem-function')({
      divider: 10, // 16(px) / 10 => 1.6rem. Default is 16
    })
  ]
}