{"id":20196819,"url":"https://github.com/itsjonq/is-style-prop-valid","last_synced_at":"2025-04-10T10:43:59.115Z","repository":{"id":36444147,"uuid":"224559390","full_name":"ItsJonQ/is-style-prop-valid","owner":"ItsJonQ","description":"🎒 Utilities for CSS style properties","archived":false,"fork":false,"pushed_at":"2022-12-11T19:06:25.000Z","size":5047,"stargazers_count":3,"open_issues_count":18,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-07T22:47:23.964Z","etag":null,"topics":["css","css-in-js","emotion","mixins","props","react","style","styled-components","styled-system"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItsJonQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-28T03:05:10.000Z","updated_at":"2019-12-01T05:25:58.000Z","dependencies_parsed_at":"2023-01-17T01:31:41.282Z","dependency_job_id":null,"html_url":"https://github.com/ItsJonQ/is-style-prop-valid","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fis-style-prop-valid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fis-style-prop-valid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fis-style-prop-valid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fis-style-prop-valid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/is-style-prop-valid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248200498,"owners_count":21063908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","emotion","mixins","props","react","style","styled-components","styled-system"],"created_at":"2024-11-14T04:26:12.226Z","updated_at":"2025-04-10T10:43:59.100Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎒 is-style-prop-valid\n\n[![Build Status](https://travis-ci.org/ItsJonQ/is-style-prop-valid.svg?branch=master)](https://travis-ci.org/ItsJonQ/is-style-prop-valid)\n[![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)\n[![Bundle size](https://badgen.net/bundlephobia/minzip/is-style-prop-valid)](https://bundlephobia.com/result?p=is-style-prop-valid)\n\n\u003e Utilities for CSS style properties\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Utilities](#utilities)\n    -   [isStylePropValid(prop)](#isstylepropvalidprop)\n    -   [sanitizeStyleProps(props)](#sanitizestylepropsprops)\n    -   [isUnitlessValue(prop)](#isunitlessvalueprop)\n    -   [convertUnitValue(prop, value)](#convertunitvalueprop-value)\n-   [Related](#related)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm install --save is-style-prop-valid\n```\n\n## Usage\n\nA 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/).\n\n##### Example\n\n```jsx\nimport styled from \"@emotion/styled\";\nimport { sanitizeStyleProps } from \"is-style-prop-valid\";\n\nconst CustomView = styled.div({}, sanitizeStyleProps);\n\nconst Example = () =\u003e {\n\treturn \u003cCustomView background=\"red\" padding={10} /\u003e;\n};\n```\n\n---\n\n## Utilities\n\n### isStylePropValid(prop)\n\nDetermines if the prop is valid style [CSSProperty](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference).\n\n###### prop\n\nType: `string`\n\n##### Example\n\n```js\nimport { isStylePropValid } from \"is-style-prop-valid\";\n\nisStylePropValid(\"background\");\n// true\n\nisStylePropValid(\"role\");\n// false\n```\n\n---\n\n### sanitizeStyleProps(props)\n\nRemoves non style CSSProperty props from an object. Converts non-unitless values to px values.\n\n###### props\n\nType: `object`\n\n##### Example\n\n```js\nimport { sanitizeStyleProps } from \"is-style-prop-valid\";\n\nconst props = {\n\tbackground: \"red\",\n\tonClick: () =\u003e undefined,\n\tpadding: 10,\n\tzIndex: 50\n};\n\nsanitizeStyleProps(props);\n// {\n//     background: 'red',\n//     padding: '10px',\n//     zIndex: 50\n// }\n```\n\n---\n\n### isUnitlessValue(prop)\n\nDetermines if the CSSProperty is a unitless value. For example, `lineHeight`.\n\n###### prop\n\nType: `string`\n\n##### Example\n\n```js\nimport { isUnitlessValue } from \"is-style-prop-valid\";\n\nisUnitlessValue(\"lineHeight\");\n// true\n\nisUnitlessValue(\"padding\");\n// false\n```\n\n---\n\n### convertUnitValue(prop, value)\n\n###### prop\n\nType: `string`\n\n###### value\n\nType: `number`|`string`\n\n###### Returns\n\nType: `number`|`string`\n\n##### Example\n\n```js\nimport { convertUnitValue } from \"is-style-prop-valid\";\n\nconvertUnitValue(\"padding\", 10);\n// 10px\n\nconvertUnitValue(\"zIndex\", 10);\n// 10\n```\n\n## Related\n\n-   [@emotion/is-prop-valid](https://github.com/emotion-js/emotion/tree/master/packages/is-prop-valid)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fis-style-prop-valid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fis-style-prop-valid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fis-style-prop-valid/lists"}