# postcss-convert-px-to-vw

> Convert px to rem or vw

Latest version **2.0.0** (published 2023-02-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install postcss-convert-px-to-vw
pnpm add postcss-convert-px-to-vw
yarn add postcss-convert-px-to-vw
bun add postcss-convert-px-to-vw
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-02-21 |
| First published | 2019-09-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 29.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | issac |
| Maintainers | issac360 |
| Keywords | postcss, plugin |

## Links

- npm: https://www.npmjs.com/package/postcss-convert-px-to-vw
- Repository: https://github.com/topit/postcss-convert-px-to-vw
- Homepage: https://github.com/topit/postcss-convert-px-to-vw#readme
- Issues: https://github.com/topit/postcss-convert-px-to-vw/issues
- npm.io page: https://npm.io/package/postcss-convert-px-to-vw

## Dependencies (1)

- [css](https://npm.io/package/css.md) ^3.0.0

## Recent versions

- 2.0.0 (latest) — 2023-02-21
- 1.0.1 — 2019-09-19
- 1.0.0 — 2019-09-19

## README

# postcss-px-to-remvw

用于转换 px 单位至 rem 和 vw 单位。

## install

```shell
npm i postcss-px-to-remvw
```

## Options

- `baseSize`: 转换基准，默认 `{ rem: 75, vw: 7.5 }`，如原始大小为 `36px` ,则转换后为 `0.48rem` 和 `4.8vw`。
- `precision`: 默认 `6` ，转换保留有效位数。
- `forceRemProps`: 只生成 `rem` 单位，不生成 `vw` 单位的属性。
- `keepRuleComment`: 默认 `'no'` ，不转换的行注释。
- `keepFileComment`: 默认 `'pxtoremvw-disable'` ，不转换的文件注释。
- `toRem`: 默认 `true`，是否生成 `rem` 单位。
- `toVw`: 默认 `true`，是否生成 `vw` 单位。

## Usage

### Postcss

```javascript
  import postcss from 'postcss'
  import pxToRemVw from 'postcss-px-to-remvw'
  const opts = {}

  postcss([pxToRemVw(opts)])
    .process(css, { from: './input.css', to: './output.css' })
    .then(result => {
      fs.writeFileSync('./output.css', result.css)
      if ( result.map ) fs.writeFile('./output.css.map', result.map)
    })
    .catch(err => {
      console.error(err)
    })
```

### postcss-loader

```javascript
  {
    test: /.css$/,
    loader: {
      loader: require.resolve('postcss-loader'),
      options: {
        // ...
        plugins: () => [
          // ...
          require('postcss-px-to-remvw')({
            baseSize: {
              rem: 750,
              vw: 7.5
            },
            precision: 6,
            forceRemProps: [ 'font', 'font-size' ],
            keepRuleComment: 'no',
            keepFileComment: 'pxtoremvw-disable',
            toVw: shouldPostCssGenVw,
            toRem: shouldPostCssGenRem
          }),
        ],
        // ...
      },
    }
  }
```

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