# fis-postprocessor-px2rem

> a postprocessor for fis to change 'px' to 'rem' in stylesheet

Latest version **1.0.4** (published 2016-05-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install fis-postprocessor-px2rem
pnpm add fis-postprocessor-px2rem
yarn add fis-postprocessor-px2rem
bun add fis-postprocessor-px2rem
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2016-05-11 |
| First published | 2016-01-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | younth |
| Maintainers | younth_go |
| Keywords | px2rem, rem, fis3, fis |

## Links

- npm: https://www.npmjs.com/package/fis-postprocessor-px2rem
- Repository: https://github.com/younth/fis-postprocessor-px2rem
- Homepage: https://github.com/younth/fis-postprocessor-px2rem#readme
- Issues: https://github.com/younth/fis-postprocessor-px2rem/issues
- npm.io page: https://npm.io/package/fis-postprocessor-px2rem

## Dependencies (2)

- [css](https://npm.io/package/css.md) ~2.2.0
- [extend](https://npm.io/package/extend.md) ~2.0.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.4 (latest) — 2016-05-11
- 1.0.3 — 2016-01-30
- 1.0.2 — 2016-01-30
- 1.0.1 — 2016-01-30
- 1.0.0 — 2016-01-30

## README

# fis-postprocessor-px2rem

a postprocessor for fis to change 'px' to 'rem' in stylesheet.

## Usage

* don't intend to transform the original value, eg: 1px border, add `/*no*/` after the declaration
* intend to use px by force，eg: font-size, add `/*px*/` after the declaration

**Attention: Dealing with SASS or LESS, only `/*...*/` comment can be used, in order to have the comments persisted**

## Install
* install fis-postprocessor-px2rem  
    `npm install -g fis-postprocessor-px2rem`
* modify fis-conf.js  
    ```
    fis.match('*css', {
        postprocessor: fis.plugin('px2rem')
    });
    ```

### Options

```
    {
        baseDpr: 2,             // base device pixel ratio (default: 2)
        remVersion: true,       // whether to generate rem version (default: true)
        remUnit: 75,            // rem unit value (default: 75)
        remPrecision: 6         // rem precision (default: 6)
    }
```

### Example

#### Pre processing:

One raw stylesheet: `test.css`

```
.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
```

#### After processing:

Rem version: `test.css`

```
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}
```

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