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
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)
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' }
)
assignStyle(
{
color: 'red',
':hover': {
backgroundColor: 'black'
}
},
{
':hover': {
backgroundColor: 'blue'
}
}
)
camelCaseProperty(property)
Converts the property
to camelCase.
import { camelCaseProperty } from 'css-in-js-utils'
camelCaseProperty('padding-top')
camelCaseProperty('-webkit-transition')
cssifyDeclaration(property, value)
Generates a CSS declaration (property
:value
) string.
import { cssifyDeclaration } from 'css-in-js-utils'
cssifyDeclaration('paddingTop', '400px')
cssifyDeclaration('WebkitFlex', 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
.
import { cssifyObject } from 'css-in-js-utils'
cssifyObject({
paddingTop: '400px',
paddingBottom: undefined,
WebkitFlex: 3,
_anyKey: [1, 2, 4]
})
hyphenateProperty(property)
Converts the property
to hyphen-case.
Directly mirrors hyphenate-style-name.
import { hyphenateProperty } from 'css-in-js-utils'
hyphenateProperty('paddingTop')
hyphenateProperty('WebkitTransition')
isPrefixedProperty(property)
Checks if a property
includes a vendor prefix.
import { isPrefixedProperty } from 'css-in-js-utils'
isPrefixedProperty('paddingTop')
isPrefixedProperty('WebkitTransition')
isPrefixedValue(value)
Checks if a value
includes vendor prefixes.
import { isPrefixedValue } from 'css-in-js-utils'
isPrefixedValue('200px')
isPrefixedValue(200)
isPrefixedValue('-webkit-calc(100% - 50px)')
isUnitlessProperty(property)
Checks if a property
accepts unitless values.
import { isUnitlessProperty } from 'css-in-js-utils'
isUnitlessProperty('width')
isUnitlessProperty('flexGrow')
isUnitlessProperty('lineHeight')
isUnitlessProperty('line-height')
normalizeProperty(property)
Normalizes the property
by unprefixing and camelCasing it.
Uses the camelCaseProperty
and unprefixProperty
-methods.
import { normalizeProperty } from 'css-in-js-utils'
normalizeProperty('-webkit-transition-delay')
resolveArrayValue(property, value)
Concatenates array values to single CSS value.
Uses the hyphenateProperty
-method.
import { resolveArrayValue } from 'css-in-js-utils'
resolveArrayValue('display', [ '-webkit-flex', 'flex' ])
resolveArrayValue('paddingTop', [ 'calc(100% - 50px)', '100px' ])
unprefixProperty(property)
Removes the vendor prefix (if set) from the property
.
import { unprefixProperty } from 'css-in-js-utils'
unprefixProperty('WebkitTransition')
unprefixProperty('transitionDelay')
unprefixValue(value)
Removes all vendor prefixes (if any) from the value
.
import { unprefixValue } from 'css-in-js-utils'
unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)')
unprefixValue('100px')
Direct Import
Every utility function may be imported directly to save bundle size.
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.