# postcss-plugin-rpx2vw

> Postcss plugin transform rpx to vw or rem.

Latest version **1.0.0** (published 2022-07-13) · 6.1K weekly downloads

## Install

```sh
npm install postcss-plugin-rpx2vw
pnpm add postcss-plugin-rpx2vw
yarn add postcss-plugin-rpx2vw
bun add postcss-plugin-rpx2vw
```

## Health

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

Positive: no vulnerabilities.

Warnings: no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-07-13 |
| First published | 2019-07-17 |
| Weekly downloads | 6.1K |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | clarkxia, boiawang, rax-publisher |

## Links

- npm: https://www.npmjs.com/package/postcss-plugin-rpx2vw
- npm.io page: https://npm.io/package/postcss-plugin-rpx2vw

## Recent versions

- 1.0.0 (latest) — 2022-07-13
- 1.0.0-1 (beta) — 2022-07-11
- 1.0.0-0 — 2022-07-11
- 0.0.3 — 2022-02-21
- 0.0.3-beta.1 — 2022-02-16
- 1.0.0-beta.3 — 2022-02-08
- 1.0.0-beta.2 — 2022-01-18
- 1.0.0-beta.1 — 2022-01-18
- 1.0.0-beta.0 — 2022-01-18
- 0.0.2-beta.7 — 2021-12-23
- 0.0.2-beta.6 — 2021-12-22
- 0.0.2-beta.5 — 2021-12-22
- 0.0.2-beta.4 — 2021-12-22
- 0.0.2-beta.3 — 2021-12-22
- 0.0.2-beta.2 — 2021-12-22
- … 4 more at https://npm.io/package/postcss-plugin-rpx2vw/versions

## README

# Postcss plugin rpx2vw

> Transform rpx to vw.

## Install

```bash
$ npm install --save postcss-plugin-rpx2vw
```

## Example

### Input

```css
.a {
  margin: -10rpx .5vh;
  padding: 5vmin 9.5rpx 1rpx;
  border: 3rpx solid black;
  border-bottom-width: 1rpx;
  font-size: 14rpx;
  line-height: 20rpx;
}

.b {
  border: 1rpx solid black;
  margin-bottom: 1rpx;
  font-size: 20rpx;
  line-height: 30rpx;
}

@media (min-width: 750rpx) {
  .c {
    font-size: 16rpx;
    line-height: 22rpx;
  }
}
```

### Output

```css
.a {
  margin: -1.33333vw .5vh;
  padding: 5vmin 1.26667vw 0.13333vw;
  border: 0.4vw solid black;
  border-bottom-width: 0.13333vw;
  font-size: 1.86667vw;
  line-height: 2.66667vw;
}

.b {
  border: 0.13333vw solid black;
  margin-bottom: 0.13333vw;
  font-size: 2.66667vw;
  line-height: 4vw;
}

@media (min-width: 100vw) {
  .c {
    font-size: 2.13333vw;
    line-height: 2.93333vw;
  }
}
```

## Usage

Default Options:

```js
{
  viewportWidth: 750,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  unitPrecision: 5,
}
```

- `viewportWidth` The width of the viewport.
- `viewportUnit` Expected unit.
- `fontViewportUnit` Expected font unit.
- `unitPrecision` The decimal point is exact to several digits.

```javascript
const PostcssPluginRpxToVw = require('postcss-plugin-rpx2vw');

postcss([ PostcssPluginRpxToVw ]);
```

## Contributing
   Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.

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