@alexsvg/postcss-pxrem

PostCSS plugin that allows to use pxr unit, which essentially equals to px converted to rem automatically

Usage no npm install needed!

<script type="module">
  import alexsvgPostcssPxrem from 'https://cdn.skypack.dev/@alexsvg/postcss-pxrem';
</script>

README

PostCSS pxrem

Converts px to rem based on baseFontSize setting.

Installation this:

npm install @alexsvg/postcss-pxrem

Usage this:

In webpack.config.js if you use stylus:

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

Input code:

html, body {
    font-size 18px
}
.style {
    font-size 54pxr
    margin 18pxr 18pxr
}

Output code:

html, body {
    font-size: 18px;
}
.style {
    font-size: 3rem;
    margin: 1rem 1rem;
}