JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3997385
  • Score
    100M100P100Q193520F
  • License MIT

Useful utility functions for CSS in JS solutions

Package Exports

  • css-in-js-utils
  • css-in-js-utils/lib/camelCaseProperty
  • css-in-js-utils/lib/hyphenateProperty
  • css-in-js-utils/lib/isPrefixedValue
  • css-in-js-utils/lib/isUnitlessProperty
  • css-in-js-utils/lib/unprefixProperty

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-in-js-utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Installation

yarn add css-in-js-utils

Utilities

camelCaseProperty(property)

Converts the property to camelCase.

import { camelCaseProperty } from 'css-in-js-utils'

console.log(camelCaseProperty('padding-top'))
// => 'paddingTop'

console.log(camelCaseProperty('-webkit-transition'))
// => 'WebkitTransition'

hyphenateProperty(property)

Converts the property to hyphen-case.

Directly mirrors hyphenate-style-name.

import { hyphenateProperty } from 'css-in-js-utils'

console.log(hyphenateProperty('paddingTop'))
// => 'padding-top'

console.log(hyphenateProperty('WebkitTransition'))
// => '-webkit-transition'

isPrefixedProperty(property)

Checks if a property includes a vendor prefix.

import { isPrefixedProperty } from 'css-in-js-utils'

console.log(isPrefixedProperty('paddingTop'))
// => false

console.log(isPrefixedProperty('WebkitTransition'))
// => true

isPrefixedValue(value)

Checks if a value includes vendor prefixes.

import { isPrefixedValue } from 'css-in-js-utils'

console.log(isPrefixedValue('200px'))
console.log(isPrefixedValue(200))
// => false

console.log(isPrefixedValue('-webkit-calc(100% - 50px)'))
// => true

isUnitlessProperty(property)

Checks if a property accepts unitless values.

Directly mirrors unitless-css-property.

import { isUnitlessProperty } from 'css-in-js-utils'

console.log(isUnitlessProperty('width'))
// => false

console.log(isUnitlessProperty('flexGrow'))
console.log(isUnitlessProperty('lineHeight'))
// => true

normalizeProperty(property)

Normalizes the property by unprefixing and camelCasing it.

Uses the camelCaseProperty and unprefixProperty-methods.

import { normalizeProperty } from 'css-in-js-utils'

console.log(normalizeProperty('-webkit-transition-delay'))
// => 'transitionDelay'

unprefixProperty(property)

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

import { unprefixProperty } from 'css-in-js-utils'

console.log(unprefixProperty('WebkitTransition'))
// => 'transition'

console.log(unprefixProperty('transitionDelay'))
// => 'transitionDelay'

unprefixValue(value)

Removes all vendor prefixes (if any) from the value.

import { unprefixValue } from 'css-in-js-utils'

console.log(unprefixValue('-webkit-calc(-moz-calc(100% - 50px)/2)'))
// => 'calc(calc(100% - 50px)/2)'

console.log(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.