npm.devtool.tech
👏 You can access css-in-js-utils package with using cssInJsUtils variable in browser devtools!
Useful utility functions for CSS in JS solutions

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

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

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' } ) // => { 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.

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.

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.

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.

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.

import { isPrefixedProperty } from 'css-in-js-utils' isPrefixedProperty('paddingTop') // => false isPrefixedProperty('WebkitTransition') // => true

isPrefixedValue(value)

Checks if a value includes vendor prefixes.

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.

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 and unprefixProperty-methods.

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

unprefixProperty(property)

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

import { unprefixProperty } from 'css-in-js-utils' unprefixProperty('WebkitTransition') // => 'transition' unprefixProperty('transitionDelay') // => '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)') // => 'calc(calc(100% - 50px)/2)' unprefixValue('100px') // => '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.

🔎Explore Package🔎CDN Script

Score

Popularity33/100
Quality94/100
Maintenance100/100