# style-value-types

> Parsers, transformers and tests for special value types, eg: %, hex codes etc.

Latest version **5.1.2** (published 2022-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install style-value-types
pnpm add style-value-types
yarn add style-value-types
bun add style-value-types
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.1.2 |
| Published | 2022-08-15 |
| First published | 2017-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 57.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20154 |
| Author | Matt Perry |
| Maintainers | popmotion |
| Keywords | css, svg, hex, rgba, hsla |

## Links

- npm: https://www.npmjs.com/package/style-value-types
- Repository: https://github.com/Popmotion/popmotion/tree/master/packages/style-value-types
- Homepage: https://popmotion.io/
- Issues: https://github.com/Popmotion/popmotion/issues
- npm.io page: https://npm.io/package/style-value-types

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) 2.4.0
- [hey-listen](https://npm.io/package/hey-listen.md) ^1.0.8

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 5.1.2 (latest) — 2022-08-15
- 5.1.1 — 2022-08-10
- 5.1.0 — 2021-11-24
- 5.0.0 — 2021-09-23
- 4.1.5 — 2021-09-21
- 4.1.4 — 2021-03-19
- 4.1.3 — 2021-03-19
- 4.1.2 — 2021-03-19
- 4.1.1 — 2021-03-01
- 4.1.0 — 2021-03-01
- 4.0.3 — 2021-02-22
- 4.0.2 — 2021-02-22
- 4.0.1 — 2021-01-08
- 4.0.0 — 2021-01-07
- 3.2.0 — 2020-12-18
- … 31 more at https://npm.io/package/style-value-types/versions

## README

# Style Value Types
Parsers, transformers and tests for common style value types, eg: %, hex codes etc.

To help convert numerical values into commonly-used special value types, like `px` or `hex`, we provide an optional module called `style-value-types`:

```bash
npm install style-value-types --save 
```

Each value type has three functions:

- `test`: Returns `true` if the provided value is of that type.
- `parse`: Returns the value in a format suitable for animation. Either a `number` or `{ [key: string]: number }`.

And one of:
- `transform`: The reverse of `parse`. Accepts a `number` or map of named numbers and converts that into the value type.
- `createTransformer`: Accepts a value and returns a `transform` based on that specific value.

## Import

```javascript
import { color } from 'style-value-types';
```

## Example

```javascript
// Test
color.test('#fff'); // true
color.test(0); // false

// Parse
color.parse('rgba(255, 255, 255, 0)');
// { red: 255, green: 255, blue: 255, alpha: 0 }

// Transform
color.transform({ hue: 200, saturation: 100, lightness: 50, alpha: 0.5 });
// 'hsla(200, 100%, 50%, 0.5)'
```

## Included value types

- `alpha`: `Number` between `0` and `1`
- `complex`: Handles space and comma delimited values, like CSS box-shadow: `'10px 10px inset #f00, 5px 5px 30px #fff'`, gradient or a path definition.
- `color`: `String` of either `hex`, `hsla` or `rgba` type
- `degrees`: `String` ending in `deg`
- `hex`: `String` beginning with `#` and followed by 3 or 6-digit hex code
- `hsla`: `String` with valid `hsla` property
- `percent`: `String` ending in `%`
- `px`: `String` ending in `px`
- `scale`: `Number` with a `default` of `1` instead of `0`
- `rgbUnit`: Integer between `1` and `255`
- `rgba`: String in `rgba(rgbUnit, rgbUnit, rgbUnit, alpha)` format

## complex

The `complex` value type is slightly different to the others. Instead of a `transform` method, it has a `createTransformer` method which returns the `transform` method:

```javascript
const svgPath = 'M150 0 L75 200';
const transform = complex.createTransformer(svgPath);
```

The returned `transform` function is unique to the string given to it. When this function is provided an object of the same format as returned by `complex.parse()` (in this example `complex.parse(svgPath)`), it will use the original string as a template.

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