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: 1.333rem;
    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, %, or unitless pixel value. Pixrem also tries to get the root font-size from CSS (html or :root) and overrides this option. You can use html option to disable it in case you need it.

options

Type: Object | Null Default: { replace: false, atrules: false, html: true }

• replace replaces rules containing rems instead of adding fallbacks.
• atrules generates fallback in at-rules too (media-queries)
• html overrides root font-size from CSS html {} or :root {}

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

1.2.2, Mar 27, 2015

• Fix root-font size detection

1.2.1, Mar 23, 2015

• Reduce line-breaks when inserting clone node

1.2.0, Feb 19, 2015

• Add option html to disable root font-size detection
• Fix root-font size defined with calc
• Throw error when root font-size is invalid

1.1.1, Feb 5, 2015:

• Fix root font-size detection

1.1.0, Jan 25, 2015:

• PostCSS 4
• Expose postcss processor

1.0.0, Nov 26, 2014:

• Generate rem fallbacks only when needed
• Updated to PostCSS v3.0
• Get root font-size from CSS

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