JavaScript utility functions for CSSinJS to build CSS functions.
Clone or download
HenriBeck Merge pull request #17 from trusktr/patch-3
allow scale() to accept one arg like the spec
Latest commit d9fbfbc Sep 12, 2018
Permalink
Failed to load latest commit information.
modules
test
.babelrc
.esformatter
.eslintrc
.gitignore
package.json
readme.md

readme.md

JavaScript functions to build CSS functions

This package ships functions that return the equivalent CSS function syntax. There will be automatic value validation in non-production mode soon.

Functions

Right now we ship 25 functions.

  • hsl(h, s, l)
  • hsla(h, s, l, a)
  • matrix(a, b, c, d, x, y)
  • matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
  • perspective(p)
  • rgb(r, g, b)
  • rgba(r, g, b, a)
  • rotate(x, y)
  • rotate3d(x, y, z)
  • rotateX(x)
  • rotateY(y)
  • rotateZ(z)
  • scale(x, y)
  • scale3d(x, y, z)
  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • skew(x, y)
  • skewX(x)
  • skewY(y)
  • translate(x, y)
  • translate3d(x, y, z)
  • translateX(x)
  • translateY(y)
  • translateZ(z)

Parameter object notation

All parameters can always be passed as a single objects as well.
The keys always match the parameter name e.g. rotate3d({ x, y, z }) except for the following color functions:

  • hsl({ hue, saturation, lightness })
  • hsla({ hue, saturation, lightness, alpha })
  • rgb({ red, green, blue })
  • rgba({ red, green, blue, alpha })

Example

import { rgba, translate3d } from 'css-functions'

// => 'rgba(255, 0, 255, 0.5)'
const color = rgba(255, 0, 255, 0.5)
const color = rgba({
  red: 255,
  green: 0,
  blue: 255,
  alpha: 0.5
})

// => 'translate3d(10px, 10%, 0)'
const transform = translate3d('10px', '10%', 0)
const transform = translate3d({
  x: '10px',
  y: '10%',
  z: 0
})

Multiple functions

To combine multiple functions safely, it ships the multiple API. It safely combines both returned strings separated by a whitespace.

import { translateX, scale, rotateX, multiple } from 'css-functions'

// => 'translateX(10px) translateY(5%) scale(0.5, 0.5) rotateX(180deg)'
const combined = multiple(
  translateX(10),
  translateY('5%'),
  scale(0.5, 0.5),
  rotateX(180)
)

Units

As the above example shows, we add default units to some numbers.

px

  • translate
  • translate3d
  • translateX
  • translateY
  • translateZ

deg

  • rotate
  • rotate3d
  • rotateX
  • rotateY
  • rotateZ
  • skew
  • skewX
  • skewY