Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

css-in-js-utils

3.0.0 • 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

576,775

version

3.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability