Miss any of our Open RFC calls?Watch the recordings here! »

css-in-js-utils

3.0.4 • Public • Published

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.

Install

npm i css-in-js-utils

DownloadsWeekly Downloads

867,225

Version

3.0.4

License

MIT

Unpacked Size

112 kB

Total Files

56

Last publish

Collaborators

  • avatar