This package ships functions that return the equivalent CSS function syntax. There will be automatic value validation in non-production mode soon.
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)
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 })
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
})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)
)As the above example shows, we add default units to some numbers.
translatetranslate3dtranslateXtranslateYtranslateZ
rotaterotate3drotateXrotateYrotateZskewskewXskewY