# css-in-js-utils > Useful utility functions for CSS in JS solutions Latest version **3.1.0** (published 2020-08-11) · MIT license · 0 weekly downloads ## Install ```sh npm install css-in-js-utils pnpm add css-in-js-utils yarn add css-in-js-utils bun add css-in-js-utils ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.0 | | Published | 2020-08-11 | | First published | 2017-02-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 59.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 77 | | Author | robinweser | | Maintainers | rofrischmann | | Keywords | css, cssinjs, utils, small | ## Links - npm: https://www.npmjs.com/package/css-in-js-utils - Repository: https://github.com/robinweser/css-in-js-utils - Homepage: https://github.com/robinweser/css-in-js-utils#readme - Issues: https://github.com/robinweser/css-in-js-utils/issues - npm.io page: https://npm.io/package/css-in-js-utils ## Dependencies (1) - [hyphenate-style-name](https://npm.io/package/hyphenate-style-name.md) ^1.0.3 ## 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 - 3.1.0 (latest) — 2020-08-11 - 3.0.4 — 2019-11-19 - 3.0.3 — 2019-11-19 - 3.0.2 — 2019-05-08 - 3.0.1 — 2019-05-08 - 3.0.0 — 2018-09-25 - 2.0.1 — 2018-04-04 - 2.0.0 — 2017-08-30 - 1.0.3 — 2017-03-06 - 1.0.2 — 2017-02-17 - 1.0.1 — 2017-02-17 - 1.0.0 — 2017-02-13 ## README # CSS-in-JS Utilities A library that provides useful utilities functions for CSS-in-JS solutions.
They are intended to be used by CSS-in-JS library authors rather used directly.
TravisCI Test Coverage npm downloads npm version gzipped size ## Installation ```sh yarn add css-in-js-utils ``` ## Why? By 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. ## Utilities * [`assignStyle(base, ...extend)`](#assignstylebase-extend) * [`camelCaseProperty(property)`](#camelcasepropertyproperty) * [`cssifyDeclaration(property, value)`](#cssifydeclarationproperty-value) * [`cssifyObject(object)`](#cssifyobjectobject) * [`hyphenateProperty(property)`](#hyphenatepropertyproperty) * [`isPrefixedProperty(property)`](#isprefixedpropertyproperty) * [`isPrefixedValue(value)`](#isprefixedvaluevalue) * [`isUnitlessProperty(property)`](#isunitlesspropertyproperty) * [`normalizeProperty(property)`](#normalizepropertyproperty) * [`resolveArrayValue(property, value)`](#resolvearrayvalueproperty-value) * [`unprefixProperty(property)`](#unprefixpropertyproperty) * [`unprefixValue(value)`](#unprefixvaluevalue) ------ ### `assignStyle(base, ...extend)` Merges deep style objects similar to `Object.assign`.
It also merges array values into a single array whithout creating duplicates. The last occurence of every item wins. ```javascript import { assignStyle } from 'css-in-js-utils' assignStyle( { color: 'red', backgroundColor: 'black' }, { color: 'blue' } ) // => { color: 'blue', backgroundColor: 'black' } assignStyle( { color: 'red', ':hover': { backgroundColor: 'black' } }, {  ':hover': { backgroundColor: 'blue' } } ) // => { color: 'red', ':hover': { backgroundColor: 'blue' }} ``` ------ ### `camelCaseProperty(property)` Converts the `property` to camelCase. ```javascript import { camelCaseProperty } from 'css-in-js-utils' camelCaseProperty('padding-top') // => 'paddingTop' camelCaseProperty('-webkit-transition') // => 'WebkitTransition' ``` ------ ### `cssifyDeclaration(property, value)` Generates a CSS declaration (`property`:`value`) string. ```javascript import { cssifyDeclaration } from 'css-in-js-utils' cssifyDeclaration('paddingTop', '400px') // => 'padding-top:400px' cssifyDeclaration('WebkitFlex', 3) // => '-webkit-flex:3' ``` ------ ### `cssifyObject(object)` Generates a CSS string using all key-property pairs in `object`. It automatically removes declarations with value types other than `number` and `string`. ```javascript import { cssifyObject } from 'css-in-js-utils' cssifyObject({ paddingTop: '400px', paddingBottom: undefined, WebkitFlex: 3, _anyKey: [1, 2, 4] }) // => 'padding-top:400px;-webkit-flex:3' ``` ------ ### `hyphenateProperty(property)` Converts the `property` to hyphen-case. > Directly mirrors [hyphenate-style-name](https://github.com/rexxars/hyphenate-style-name). ```javascript import { hyphenateProperty } from 'css-in-js-utils' hyphenateProperty('paddingTop') // => 'padding-top' hyphenateProperty('WebkitTransition') // => '-webkit-transition' ``` ------ ### `isPrefixedProperty(property)` Checks if a `property` includes a vendor prefix. ```javascript import { isPrefixedProperty } from 'css-in-js-utils' isPrefixedProperty('paddingTop') // => false isPrefixedProperty('WebkitTransition') // => true ``` ------ ### `isPrefixedValue(value)` Checks if a `value` includes vendor prefixes. ```javascript import { isPrefixedValue } from 'css-in-js-utils' isPrefixedValue('200px') isPrefixedValue(200) // => false isPrefixedValue('-webkit-calc(100% - 50px)') // => true ``` ------ ### `isUnitlessProperty(property)` Checks if a `property` accepts unitless values. ```javascript import { isUnitlessProperty } from 'css-in-js-utils' isUnitlessProperty('width') // => false isUnitlessProperty('flexGrow') isUnitlessProperty('lineHeight') isUnitlessProperty('line-height') // => true ``` ------ ### `normalizeProperty(property)` Normalizes the `property` by unprefixing **and** camelCasing it. > Uses the [`camelCaseProperty`](#camelcasepropertyproperty) and [`unprefixProperty`](#unprefixpropertyproperty)-methods. ```javascript import { normalizeProperty } from 'css-in-js-utils' normalizeProperty('-webkit-transition-delay') // => 'transitionDelay' ``` ------ ### `resolveArrayValue(property, value)` Concatenates array values to single CSS value. > Uses the [`hyphenateProperty`](#hyphenatepropertyproperty)-method. ```javascript import { resolveArrayValue } from 'css-in-js-utils' resolveArrayValue('display', [ '-webkit-flex', 'flex' ]) // => '-webkit-flex;display:flex' resolveArrayValue('paddingTop', [ 'calc(100% - 50px)', '100px' ]) // => 'calc(100% - 50px);padding-top:100px' ``` ------ ### `unprefixProperty(property)` Removes the vendor prefix (if set) from the `property`. ```javascript import { unprefixProperty } from 'css-in-js-utils' unprefixProperty('WebkitTransition') // => 'transition' unprefixProperty('transitionDelay') // => 'transitionDelay' ``` ------ ### `unprefixValue(value)` Removes all vendor prefixes (if any) from the `value`. ```javascript import { unprefixValue } from 'css-in-js-utils' unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)') // => 'calc(calc(100% - 50px)/2)' unprefixValue('100px') // => '100px' ``` ## Direct Import Every utility function may be imported directly to save bundle size. ```javascript import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty' ``` ## License css-in-js-utils is licensed under the [MIT License](http://opensource.org/licenses/MIT).
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).
Created with ♥ by [@rofrischmann](http://rofrischmann.de). --- _Source: https://npm.io/package/css-in-js-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._