{"id":13550698,"url":"https://github.com/robinweser/css-in-js-utils","last_synced_at":"2025-04-04T14:07:23.204Z","repository":{"id":44143870,"uuid":"81833560","full_name":"robinweser/css-in-js-utils","owner":"robinweser","description":"Useful utility functions for CSS in JS solutions","archived":false,"fork":false,"pushed_at":"2023-12-04T10:43:01.000Z","size":1713,"stargazers_count":76,"open_issues_count":14,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T18:08:44.538Z","etag":null,"topics":["css","css-in-js","cssinjs","utils"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/robinweser.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-13T14:27:57.000Z","updated_at":"2025-01-03T21:39:04.000Z","dependencies_parsed_at":"2024-08-01T12:18:24.873Z","dependency_job_id":"b2ea1214-f740-4fbc-9d55-1f768c125c01","html_url":"https://github.com/robinweser/css-in-js-utils","commit_stats":{"total_commits":39,"total_committers":11,"mean_commits":"3.5454545454545454","dds":0.6923076923076923,"last_synced_commit":"f04cb1541956f4b5590bdc18a6552737507e2aa7"},"previous_names":["rofrischmann/css-in-js-utils"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fcss-in-js-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fcss-in-js-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fcss-in-js-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Fcss-in-js-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinweser","download_url":"https://codeload.github.com/robinweser/css-in-js-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190250,"owners_count":20898702,"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","cssinjs","utils"],"created_at":"2024-08-01T12:01:36.355Z","updated_at":"2025-04-04T14:07:23.183Z","avatar_url":"https://github.com/robinweser.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# CSS-in-JS Utilities\nA library that provides useful utilities functions for CSS-in-JS solutions.\u003cbr\u003e\nThey are intended to be used by CSS-in-JS library authors rather used directly.\n\u003cbr\u003e\n\n\u003cimg alt=\"TravisCI\" src=\"https://travis-ci.org/rofrischmann/css-in-js-utils.svg?branch=master\"\u003e \u003cimg alt=\"Test Coverage\"  src=\"https://api.codeclimate.com/v1/badges/2964ee833f8d2104cac6/test_coverage\" /\u003e \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/css-in-js-utils.svg\"\u003e \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/css-in-js-utils.svg\"\u003e \u003cimg alt=\"gzipped size\" src=\"https://img.shields.io/bundlephobia/minzip/css-in-js-utils.svg?colorB=4c1\u0026label=gzipped%20size\"\u003e\n\n## Installation\n```sh\nyarn add css-in-js-utils\n```\n\n## Why?\nBy now I have authored and collaborated on many different libraries and found I would rewrite the very same utility functions every time. That's why this repository is hosting small utilities especially built for CSS-in-JS solutions and tools. Even if there are tons of different libraries already, they all basically use the same mechanisms and utilities.\n\n## Utilities\n* [`assignStyle(base, ...extend)`](#assignstylebase-extend)\n* [`camelCaseProperty(property)`](#camelcasepropertyproperty)\n* [`cssifyDeclaration(property, value)`](#cssifydeclarationproperty-value)\n* [`cssifyObject(object)`](#cssifyobjectobject)\n* [`hyphenateProperty(property)`](#hyphenatepropertyproperty)\n* [`isPrefixedProperty(property)`](#isprefixedpropertyproperty)\n* [`isPrefixedValue(value)`](#isprefixedvaluevalue)\n* [`isUnitlessProperty(property)`](#isunitlesspropertyproperty)\n* [`normalizeProperty(property)`](#normalizepropertyproperty)\n* [`resolveArrayValue(property, value)`](#resolvearrayvalueproperty-value)\n* [`unprefixProperty(property)`](#unprefixpropertyproperty)\n* [`unprefixValue(value)`](#unprefixvaluevalue)\n\n------\n\n### `assignStyle(base, ...extend)`\nMerges deep style objects similar to `Object.assign`.\u003cbr\u003e\nIt also merges array values into a single array whithout creating duplicates. The last occurence of every item wins.\n\n```javascript\nimport { assignStyle } from 'css-in-js-utils'\n\nassignStyle(\n  { color: 'red', backgroundColor: 'black' },\n  { color: 'blue' }\n)\n// =\u003e { color: 'blue', backgroundColor: 'black' }\n\nassignStyle(\n  {\n    color: 'red',\n    ':hover': {\n      backgroundColor: 'black'\n    }\n  },\n  { \n    ':hover': {\n      backgroundColor: 'blue'\n    }\n  }\n)\n// =\u003e { color: 'red', ':hover': { backgroundColor: 'blue' }}\n```\n\n------\n\n### `camelCaseProperty(property)`\nConverts the `property` to camelCase.\n\n```javascript\nimport { camelCaseProperty } from 'css-in-js-utils'\n\ncamelCaseProperty('padding-top')\n// =\u003e 'paddingTop'\n\ncamelCaseProperty('-webkit-transition')\n// =\u003e 'WebkitTransition'\n```\n\n------\n\n### `cssifyDeclaration(property, value)`\nGenerates a CSS declaration (`property`:`value`) string.\n\n```javascript\nimport { cssifyDeclaration } from 'css-in-js-utils'\n\ncssifyDeclaration('paddingTop', '400px')\n// =\u003e 'padding-top:400px'\n\ncssifyDeclaration('WebkitFlex', 3)\n// =\u003e '-webkit-flex:3'\n```\n\n------\n\n### `cssifyObject(object)`\nGenerates a CSS string using all key-property pairs in `object`.\nIt automatically removes declarations with value types other than `number` and `string`.\n\n```javascript\nimport { cssifyObject } from 'css-in-js-utils'\n\ncssifyObject({\n  paddingTop: '400px',\n  paddingBottom: undefined,\n  WebkitFlex: 3,\n  _anyKey: [1, 2, 4]\n})\n// =\u003e 'padding-top:400px;-webkit-flex:3'\n```\n\n------\n\n### `hyphenateProperty(property)`\nConverts the `property` to hyphen-case.\n\u003e Directly mirrors [hyphenate-style-name](https://github.com/rexxars/hyphenate-style-name).\n\n```javascript\nimport { hyphenateProperty } from 'css-in-js-utils'\n\nhyphenateProperty('paddingTop')\n// =\u003e 'padding-top'\n\nhyphenateProperty('WebkitTransition')\n// =\u003e '-webkit-transition'\n```\n\n------\n\n### `isPrefixedProperty(property)`\nChecks if a `property` includes a vendor prefix.\n\n```javascript\nimport { isPrefixedProperty } from 'css-in-js-utils'\n\nisPrefixedProperty('paddingTop')\n// =\u003e false\n\nisPrefixedProperty('WebkitTransition')\n// =\u003e true\n```\n\n------\n### `isPrefixedValue(value)`\nChecks if a `value` includes vendor prefixes.\n\n```javascript\nimport { isPrefixedValue } from 'css-in-js-utils'\n\nisPrefixedValue('200px')\nisPrefixedValue(200)\n// =\u003e false\n\nisPrefixedValue('-webkit-calc(100% - 50px)')\n// =\u003e true\n```\n\n------\n\n### `isUnitlessProperty(property)`\nChecks if a `property` accepts unitless values.\n\n```javascript\nimport { isUnitlessProperty } from 'css-in-js-utils'\n\nisUnitlessProperty('width')\n// =\u003e false\n\nisUnitlessProperty('flexGrow')\nisUnitlessProperty('lineHeight')\nisUnitlessProperty('line-height')\n// =\u003e true\n```\n\n------\n\n### `normalizeProperty(property)`\nNormalizes the `property` by unprefixing **and** camelCasing it.\n\u003e Uses the [`camelCaseProperty`](#camelcasepropertyproperty) and [`unprefixProperty`](#unprefixpropertyproperty)-methods.\n\n```javascript\nimport { normalizeProperty } from 'css-in-js-utils'\n\nnormalizeProperty('-webkit-transition-delay')\n// =\u003e 'transitionDelay'\n```\n\n------\n\n### `resolveArrayValue(property, value)`\nConcatenates array values to single CSS value.\n\u003e Uses the [`hyphenateProperty`](#hyphenatepropertyproperty)-method.\n\n\n```javascript\nimport { resolveArrayValue } from 'css-in-js-utils'\n\nresolveArrayValue('display', [ '-webkit-flex', 'flex' ])\n// =\u003e '-webkit-flex;display:flex'\n\nresolveArrayValue('paddingTop', [ 'calc(100% - 50px)', '100px' ])\n// =\u003e 'calc(100% - 50px);padding-top:100px'\n```\n\n------\n\n### `unprefixProperty(property)`\nRemoves the vendor prefix (if set) from the `property`.\n\n```javascript\nimport { unprefixProperty } from 'css-in-js-utils'\n\nunprefixProperty('WebkitTransition')\n// =\u003e 'transition'\n\nunprefixProperty('transitionDelay')\n// =\u003e 'transitionDelay'\n```\n\n------\n\n### `unprefixValue(value)`\nRemoves all vendor prefixes (if any) from the `value`.\n\n```javascript\nimport { unprefixValue } from 'css-in-js-utils'\n\nunprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)')\n// =\u003e 'calc(calc(100% - 50px)/2)'\n\nunprefixValue('100px')\n// =\u003e '100px'\n```\n\n## Direct Import\nEvery utility function may be imported directly to save bundle size.\n\n```javascript\nimport camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty'\n```\n\n## License\ncss-in-js-utils is licensed under the [MIT License](http://opensource.org/licenses/MIT).\u003cbr\u003e\nDocumentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).\u003cbr\u003e\nCreated with ♥ by [@rofrischmann](http://rofrischmann.de).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Fcss-in-js-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinweser%2Fcss-in-js-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Fcss-in-js-utils/lists"}