# is-style-prop-valid

> Utilities for CSS style properties

Latest version **0.0.7** (published 2019-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install is-style-prop-valid
pnpm add is-style-prop-valid
yarn add is-style-prop-valid
bun add is-style-prop-valid
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2019-12-01 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 34.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Jon Quach |
| Maintainers | itsjonq |
| Keywords | styled, components, styled-components, emotion, css-in-js, css, react |

## Links

- npm: https://www.npmjs.com/package/is-style-prop-valid
- Repository: https://github.com/itsjonq/is-style-prop-valid
- Homepage: https://github.com/itsjonq/is-style-prop-valid#readme
- Issues: https://github.com/itsjonq/is-style-prop-valid/issues
- npm.io page: https://npm.io/package/is-style-prop-valid

## Dependencies (4)

- [@itsjonq/is](https://npm.io/package/@itsjonq/is.md) ^0.0.1
- [memoize-one](https://npm.io/package/memoize-one.md) ^5.1.1
- [tiny-warning](https://npm.io/package/tiny-warning.md) ^1.0.3
- [@emotion/unitless](https://npm.io/package/@emotion/unitless.md) ^0.7.4

## 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.0.7 (latest) — 2019-12-01
- 0.0.6 — 2019-11-28
- 0.0.5 — 2019-11-28
- 0.0.4 — 2019-11-28
- 0.0.3 — 2019-11-28
- 0.0.2 — 2019-11-28
- 0.0.1 — 2019-11-28

## README

# is-style-prop-valid

[![Build Status](https://travis-ci.org/ItsJonQ/is-style-prop-valid.svg?branch=master)](https://travis-ci.org/ItsJonQ/is-style-prop-valid)
[![Coverage Status](https://coveralls.io/repos/github/ItsJonQ/is-style-prop-valid/badge.svg?branch=master)](https://coveralls.io/github/ItsJonQ/is-style-prop-valid?branch=master)
[![Bundle size](https://badgen.net/bundlephobia/minzip/is-style-prop-valid)](https://bundlephobia.com/result?p=is-style-prop-valid)

> Utilities for CSS style properties

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Installation](#installation)
-   [Usage](#usage)
-   [Utilities](#utilities)
    -   [isStylePropValid(prop)](#isstylepropvalidprop)
    -   [sanitizeStyleProps(props)](#sanitizestylepropsprops)
    -   [isUnitlessValue(prop)](#isunitlessvalueprop)
    -   [convertUnitValue(prop, value)](#convertunitvalueprop-value)
-   [Related](#related)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

```
npm install --save is-style-prop-valid
```

## Usage

A great use-case for these utilities is to prepare [object styles](https://emotion.sh/docs/object-styles) for libraries like [Emotion](https://emotion.sh/docs/introduction) or [Style Components](https://www.styled-components.com/) for use within [React](https://reactjs.org/).

##### Example

```jsx
import styled from "@emotion/styled";
import { sanitizeStyleProps } from "is-style-prop-valid";

const CustomView = styled.div({}, sanitizeStyleProps);

const Example = () => {
	return <CustomView background="red" padding={10} />;
};
```

---

## Utilities

### isStylePropValid(prop)

Determines if the prop is valid style [CSSProperty](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference).

###### prop

Type: `string`

##### Example

```js
import { isStylePropValid } from "is-style-prop-valid";

isStylePropValid("background");
// true

isStylePropValid("role");
// false
```

---

### sanitizeStyleProps(props)

Removes non style CSSProperty props from an object. Converts non-unitless values to px values.

###### props

Type: `object`

##### Example

```js
import { sanitizeStyleProps } from "is-style-prop-valid";

const props = {
	background: "red",
	onClick: () => undefined,
	padding: 10,
	zIndex: 50
};

sanitizeStyleProps(props);
// {
//     background: 'red',
//     padding: '10px',
//     zIndex: 50
// }
```

---

### isUnitlessValue(prop)

Determines if the CSSProperty is a unitless value. For example, `lineHeight`.

###### prop

Type: `string`

##### Example

```js
import { isUnitlessValue } from "is-style-prop-valid";

isUnitlessValue("lineHeight");
// true

isUnitlessValue("padding");
// false
```

---

### convertUnitValue(prop, value)

###### prop

Type: `string`

###### value

Type: `number`|`string`

###### Returns

Type: `number`|`string`

##### Example

```js
import { convertUnitValue } from "is-style-prop-valid";

convertUnitValue("padding", 10);
// 10px

convertUnitValue("zIndex", 10);
// 10
```

## Related

-   [@emotion/is-prop-valid](https://github.com/emotion-js/emotion/tree/master/packages/is-prop-valid)

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