Skip to content

Latest commit

 

History

History
99 lines (86 loc) · 2.12 KB

readme.md

File metadata and controls

99 lines (86 loc) · 2.12 KB
Raw

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