# css-viewport-units-transform

> Transform CSS viewport units of a style object to pixels based on window dimensions

Latest version **0.10.3** (published 2019-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-viewport-units-transform
pnpm add css-viewport-units-transform
yarn add css-viewport-units-transform
bun add css-viewport-units-transform
```

## 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.10.3 |
| Published | 2019-03-05 |
| First published | 2018-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Krister Kari |
| Maintainers | kristerkari |
| Keywords | CSS-in-JS, styles, CSS, Viewport units |

## Links

- npm: https://www.npmjs.com/package/css-viewport-units-transform
- Repository: https://github.com/kristerkari/css-viewport-units-transform
- Homepage: https://github.com/kristerkari/css-viewport-units-transform#readme
- Issues: https://github.com/kristerkari/css-viewport-units-transform/issues
- npm.io page: https://npm.io/package/css-viewport-units-transform

## 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.10.3 (latest) — 2019-03-05
- 0.10.2 — 2018-06-24
- 0.10.1 — 2018-06-03
- 0.10.0 — 2018-06-03
- 0.0.1 — 2018-05-31

## README

# css-viewport-units-transform

[![Build Status](https://travis-ci.org/kristerkari/css-viewport-units-transform.svg?branch=master)](https://travis-ci.org/kristerkari/css-viewport-units-transform)
[![Build status](https://ci.appveyor.com/api/projects/status/yurf32v23qawgkmp/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/css-viewport-units-transform/branch/master)
[![Coverage Status](https://coveralls.io/repos/github/kristerkari/css-viewport-units-transform/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/css-viewport-units-transform?branch=master)
![Size](https://img.shields.io/bundlephobia/minzip/css-viewport-units-transform.svg)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

Transform CSS viewport units of a Javascript style object to pixels based on window dimensions.

Supports `vw`, `vh`, `vmin` and `vmax` units.

```js
import { transform } from "css-viewport-units-transform";
// or const transform = require("css-viewport-units-transform").transform;

transform(
  {
    fontSize: "10vw"
  },
  {
    width: 480,
    height: 100
  }
);
```

↓ ↓ ↓ ↓ ↓ ↓

```js
{
  fontSize: 48;
}
```

or

```js
transform(
  {
    myClass: {
      fontSize: "10vh"
    }
  },
  {
    width: 480,
    height: 100
  }
);
```

↓ ↓ ↓ ↓ ↓ ↓

```js
{
  myClass: {
    fontSize: 10,
  }
}
```

## Dependencies

- None

---
_Source: https://npm.io/package/css-viewport-units-transform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._