pixrem

A CSS post-processor that generates pixel fallbacks for rem units.

Pixrem

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

npm install --save pixrem

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.

'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;
  }
}

Type: String

Some CSS to process.

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.

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 {}

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.

1.2.3, Mar 27, 2015

  • Fix: copy and reduce decl.before, only if defined

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.

MIT