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.

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)
* camelCaseProperty(property)
* cssifyDeclaration(property, value)
* cssifyObject(object)
* hyphenateProperty(property)
* isPrefixedProperty(property)
* isPrefixedValue(value)
* isUnitlessProperty(property)
* normalizeProperty(property)
* resolveArrayValue(property, value)
* unprefixProperty(property)
* unprefixValue(value)

------

$3


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' }}
`

------

$3


Converts the property to camelCase.

`javascript
import { camelCaseProperty } from 'css-in-js-utils'

camelCaseProperty('padding-top')
// => 'paddingTop'

camelCaseProperty('-webkit-transition')
// => 'WebkitTransition'
`

------

$3


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'
`

------

$3


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'
`

------

$3


Converts the property to hyphen-case.
> Directly mirrors hyphenate-style-name.

`javascript
import { hyphenateProperty } from 'css-in-js-utils'

hyphenateProperty('paddingTop')
// => 'padding-top'

hyphenateProperty('WebkitTransition')
// => '-webkit-transition'
`

------

$3


Checks if a property includes a vendor prefix.

`javascript
import { isPrefixedProperty } from 'css-in-js-utils'

isPrefixedProperty('paddingTop')
// => false

isPrefixedProperty('WebkitTransition')
// => true
`

------


$3


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
`

------

$3


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
`

------

$3


Normalizes the property by unprefixing and camelCasing it.
> Uses the camelCaseProperty and unprefixProperty-methods.

`javascript
import { normalizeProperty } from 'css-in-js-utils'

normalizeProperty('-webkit-transition-delay')
// => 'transitionDelay'
`

------

$3


Concatenates array values to single CSS value.
> Uses the hyphenateProperty-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'
`

------

$3


Removes the vendor prefix (if set) from the property.

`javascript
import { unprefixProperty } from 'css-in-js-utils'

unprefixProperty('WebkitTransition')
// => 'transition'

unprefixProperty('transitionDelay')
// => 'transitionDelay'
`

------

$3


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.

Documentation is licensed under Creative Common License.

Created with ♥ by @rofrischmann.