@westart/postcss-pxr v1.0.0

PostCSS pxr unit

Automatically converts px to rem based on baseFontSize setting.

Installation

npm install @westart/postcss-pxr

Usage

In webpack.config.js use as post css plugin. Here's example using stylus:

const poststylus = require('poststylus'),
      pxr = require('@westart/postcss-pxr')
{
    rules: {
        test: /\.styl(us)?$/,
        use: [
            {
                loader: 'stylus-loader',
                options: {
                    use: [
                        poststylus([
                            pxr({ baseFontSize: 16 })
                        ])
                    ],
                }
            },
        ]
    }
}

Then the following code:

html, body {
    font-size 16px
}
.some-element {
    font-size 32pxr
    padding 8pxr 24pxr
}

would produce:

html, body {
    font-size: 16px;
}
.some-element {
    font-size: 2rem;
    padding: 0.5rem 1.5rem;
}