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.

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

txhawks / css-in-js-utils Goto Github PK

css-in-js-utils's Introduction

CSS-in-JS Utilities

Installation

Why?

Utilities

camelCaseProperty(property)

cssifyDeclaration(property, value)

cssifyObject(object)

hyphenateProperty(property)

isPrefixedProperty(property)

isPrefixedValue(value)

isUnitlessProperty(property)

normalizeProperty(property)

resolveArrayValue(property, value)

unprefixProperty(property)

unprefixValue(value)