# postcss-unit-conversion

> PostCSS plugin for converting units from px to em or rem.

Latest version **0.0.3** (published 2018-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-unit-conversion
pnpm add postcss-unit-conversion
yarn add postcss-unit-conversion
bun add postcss-unit-conversion
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-12-07 |
| First published | 2018-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | jomurgel |
| Maintainers | jomurgel |
| Keywords | postcss, css, postcss-plugin, unit-conversion, px to em, px to rem, rem, em, conversion, unit, webpack |

## Links

- npm: https://www.npmjs.com/package/postcss-unit-conversion
- Repository: https://github.com/jomurgel/postcss-unit-conversion
- Issues: https://github.com/jomurgel/postcss-unit-conversion/issues
- npm.io page: https://npm.io/package/postcss-unit-conversion

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^6.0.16

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2018-12-07
- 0.0.2 — 2018-12-07
- 0.0.1 — 2018-12-07

## README

# PostCSS Unit Conversion [![Build Status][ci-img]][ci] [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
<img src="https://img.shields.io/badge/version-0.0.3-green.svg" alt="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.

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/jomurgel/postcss-unit-conversion.svg
[ci]:      https://travis-ci.org/jomurgel/postcss-unit-conversion

## Usage
Add to project via from [postcss-unit-conversion on npm](https://www.npmjs.com/package/postcss-unit-conversion) and set options below.
``` bash
$ npm install --save-dev postcss-unit-conversion
```

And add to your project and requrire.

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

Set optional options (defaults below).
``` js
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
```css
.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
```css
.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
``` bash
$ 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.

---
_Source: https://npm.io/package/postcss-unit-conversion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._