Pixrem

A CSS post-processor that generates pixel fallbacks for rem units.
Written with PostCSS.
Add it to your build process with grunt-pixrem.

Installation

npm install --save pixrem

Usage

Pixrem is a CSS post-processor that, given CSS and a root em value, returns CSS with pixel unit fallbacks or replacements. Check the browser data: if you want to use rem units and support < IE9, Opera Mini, or older Opera Mobile, this post-processor is for you.

Example

'use strict';
var fs = require('fs');
var pixrem = require('pixrem');
var css = fs.readFileSync('main.css', 'utf8');
var processedCss = pixrem.process(css, '200%');

fs.writeFile('main.with-fallbacks.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('IE8, you\'re welcome.');
});

Pixrem takes this:

.sky {
  margin: 2.5rem 2px 3em 100%;
  color: blue;
}

@media screen and (min-width: 20rem) {
  .leaf {
    margin-bottom: 1.333rem;
    font-size: 1.5rem;
  }
}

And returns this:

.sky {
  margin: 80px 2px 3em 100%;
  margin: 2.5rem 2px 3em 100%;
  color: blue;
}

@media screen and (min-width: 20rem) {
  .leaf {
    margin-bottom: 42px;
    margin-bottom: 1.333rem;
    font-size: 48px;
    font-size: 1.5rem;
  }
}

Parameters

css

Type: String

Some CSS to process.

rootvalue

Type: String | Null
Default: 16px

The root element font size. Can be px, rem, em, percent, or unitless pixel value.

options

Type: Object | Null
Default: { replace: false }

replace replaces rules containing rems instead of adding fallbacks.

Contribute

Report bugs and feature proposals in the Github issue tracker. Run tests with jasmine-node. In lieu of a formal styleguide, take care to maintain the existing coding style.

Release History

0.1.4, March 6, 2014: Code optimization from AI.
0.1.3, Dec 14, 2013: Fix regex for < 0 values.
0.1.1, 0.1.2, Dec 14, 2013: Documentation improvements.
0.1.0, Dec 14, 2013: Initial release.

License

MIT

iamvdo / node-pixrem