https://github.com/cssinjs/css-functions
JavaScript utility functions for CSSinJS to build CSS functions.
https://github.com/cssinjs/css-functions
css-functions
Last synced: 10 months ago
JSON representation
JavaScript utility functions for CSSinJS to build CSS functions.
- Host: GitHub
- URL: https://github.com/cssinjs/css-functions
- Owner: cssinjs
- Created: 2016-06-05T11:33:03.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-14T12:56:01.000Z (over 7 years ago)
- Last Synced: 2025-06-06T23:09:04.442Z (11 months ago)
- Topics: css-functions
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 73
- Watchers: 7
- Forks: 9
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## 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
```javascript
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.
```javascript
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`