PostCSS Unit Conversion

PostCSS plugin for converting units from px to em or rem. Removes the need for using scss mixins like em() or rem(). Write in px and convert on the fly.

Usage

Add to project via from postcss-unit-conversion on npm and set options below.

$ npm install --save-dev postcss-unit-conversion

And add to your project and requrire.

postcss([
  require( 'postcss-unit-conversion' )( options )
]);

Set optional options (defaults below).

var options = {
    base: 16,
    precision: 3,
    toEM: [
        'letter-spacing',
        'text-shadow'
    ],
    toREM: [
        'box-shadow',
        'font-size',
        'margin',
        'padding'
    ]
};

Anything not added to either toEM or toREM will retain px (or supplied) values.

Conversion

In

.foo {
  border: 2px solid blue;
  border-radius: 2px;
  box-shadow: 5px 10px #888;
  font-size: 32px;
  letter-spacing: 2px;
  margin: 2px 0;
  padding: 10px 0;
  text-shadow: 2px 2px #f00;
}

Out

.foo {
  border: 2px solid blue;
  border-radius: 2px;
  box-shadow: 0.313rem 0.625rem #888;
  font-size: 2.000rem;
  letter-spacing: 0.125em;
  margin: 0.125rem 0;
  padding: 0.625rem 0;
  text-shadow: 0.125em 0.125em #f00;
}

Testing

Run

$ npm run test

Tests the code example above. Will test against options provided in your post css setup.

See PostCSS docs for examples for your environment.

Roadmap

• Add ignore option to ignore conversion of certain elements or classes.
• Webpack testing and support.