https://github.com/itsjonq/is-style-prop-valid

🎒 Utilities for CSS style properties
https://github.com/itsjonq/is-style-prop-valid

css css-in-js emotion mixins props react style styled-components styled-system

Last synced: 3 days ago
JSON representation

🎒 Utilities for CSS style properties

• Host: GitHub
• URL: https://github.com/itsjonq/is-style-prop-valid
• Owner: ItsJonQ
• License: mit
• Created: 2019-11-28T03:05:10.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T19:06:25.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T06:20:14.637Z (10 days ago)
• Topics: css, css-in-js, emotion, mixins, props, react, style, styled-components, styled-system
• Language: JavaScript
• Homepage:
• Size: 4.81 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

-   [Installation](#installation)

-   [Usage](#usage)

-   [Utilities](#utilities)

    -   [isStylePropValid(prop)](#isstylepropvalidprop)

    -   [sanitizeStyleProps(props)](#sanitizestylepropsprops)

    -   [isUnitlessValue(prop)](#isunitlessvalueprop)

    -   [convertUnitValue(prop, value)](#convertunitvalueprop-value)

-   [Related](#related)

## 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 ;

};

```

---

## 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)