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.
yarn add css-in-js-utilsBy 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.
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)
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.
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' }}Converts the property to camelCase.
import { camelCaseProperty } from 'css-in-js-utils' camelCaseProperty('padding-top') // => 'paddingTop' camelCaseProperty('-webkit-transition') // => 'WebkitTransition'Generates a CSS declaration (property:value) string.
import { cssifyDeclaration } from 'css-in-js-utils' cssifyDeclaration('paddingTop', '400px') // => 'padding-top:400px' cssifyDeclaration('WebkitFlex', 3) // => '-webkit-flex:3'Generates a CSS string using all key-property pairs in object. It automatically removes declarations with value types other than number and string.
import { cssifyObject } from 'css-in-js-utils' cssifyObject({ paddingTop: '400px', paddingBottom: undefined, WebkitFlex: 3, _anyKey: [1, 2, 4] }) // => 'padding-top:400px;-webkit-flex:3'Converts the property to hyphen-case.
Directly mirrors hyphenate-style-name.
import { hyphenateProperty } from 'css-in-js-utils' hyphenateProperty('paddingTop') // => 'padding-top' hyphenateProperty('WebkitTransition') // => '-webkit-transition'Checks if a property includes a vendor prefix.
import { isPrefixedProperty } from 'css-in-js-utils' isPrefixedProperty('paddingTop') // => false isPrefixedProperty('WebkitTransition') // => trueChecks if a value includes vendor prefixes.
import { isPrefixedValue } from 'css-in-js-utils' isPrefixedValue('200px') isPrefixedValue(200) // => false isPrefixedValue('-webkit-calc(100% - 50px)') // => trueChecks if a property accepts unitless values.
import { isUnitlessProperty } from 'css-in-js-utils' isUnitlessProperty('width') // => false isUnitlessProperty('flexGrow') isUnitlessProperty('lineHeight') isUnitlessProperty('line-height') // => trueNormalizes the property by unprefixing and camelCasing it.
Uses the
camelCasePropertyandunprefixProperty-methods.
import { normalizeProperty } from 'css-in-js-utils' normalizeProperty('-webkit-transition-delay') // => 'transitionDelay'Concatenates array values to single CSS value.
Uses the
hyphenateProperty-method.
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'Removes the vendor prefix (if set) from the property.
import { unprefixProperty } from 'css-in-js-utils' unprefixProperty('WebkitTransition') // => 'transition' unprefixProperty('transitionDelay') // => 'transitionDelay'Removes all vendor prefixes (if any) from the value.
import { unprefixValue } from 'css-in-js-utils' unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)') // => 'calc(calc(100% - 50px)/2)' unprefixValue('100px') // => '100px'Every utility function may be imported directly to save bundle size.
import camelCaseProperty from 'css-in-js-utils/lib/camelCaseProperty'css-in-js-utils is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.