Skip to content
PostCSS plugin for converting units from px to em or rem.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

PostCSS Unit Conversion Build Status License: MIT

Version 0.0.3

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.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.