Package Exports

pixrem

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pixrem) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, percent, or unitless pixel value. Pixrem also tries to get the root font-size from CSS (html or :root) and overrides this option.

options

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

replace replaces rules containing rems instead of adding fallbacks.
atrules generates fallback in at-rules too (media-queries)

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.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