added api docs and improved functions

Author: rofrischmann

modules/functions/matrix.js

@@ -1,6 +1,6 @@
 import isObject from '../utils/isObject'
 
 export default function matrix(a, b, c, d, x, y) {
-  const values = isObject(a) ? [ r.a, r.b, r.c, r.d, r.x, r.y ] : [ a, b, c, d, x, y ]
+  const values = isObject(a) ? [ a.a, a.b, a.c, a.d, a.x, a.y ] : [ a, b, c, d, x, y ]
   return 'matrix(' + values.join(',') + ')'
 }

modules/functions/matrix3d.js

@@ -1,6 +1,6 @@
 import isObject from '../utils/isObject'
 
 export default function matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
-  const values = isObject(a1) ? [ r.a1, r.b1, r.c1, r.d1, r.a2, r.b2, r.c2, r.d2, r.a3, r.b3, r.c3, r.d3, r.a4, r.b4, r.c4, r.d4 ] : [ a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 ]
+  const values = isObject(a1) ? [ a1.a1, a1.b1, a1.c1, a1.d1, a1.a2, a1.b2, a1.c2, a1.d2, a1.a3, a1.b3, a1.c3, a1.d3, a1.a4, a1.b4, a1.c4, a1.d4 ] : [ a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 ]
   return 'matrix3d(' + values.join(',') + ')'
 }

modules/functions/rotate.js

@@ -2,5 +2,5 @@ import isObject from '../utils/isObject'
 
 export default function rotate(x, y) {
   const values = isObject(x) ? [ r.x, r.y ] : [ x, y ]
-  return 'rotate(' + values.join(',') + ')'
+  return 'rotate(' + values.join('deg,') + 'deg' + ')'
 }

modules/functions/rotate3d.js

@@ -2,5 +2,5 @@ import isObject from '../utils/isObject'
 
 export default function rotate3d(x, y, z) {
   const values = isObject(x) ? [ r.x, r.y, r.z ] : [ x, y, z ]
-  return 'rotate3d(' + values.join(',') + ')'
+  return 'rotate3d(' + values.join('deg,') + 'deg' + ')'
 }

modules/functions/rotateX.js

@@ -1,3 +1,3 @@
 export default function rotateX(x) {
-  return 'rotateX(' + x + ')'
+  return 'rotateX(' + x + 'deg)'
 }

modules/functions/rotateY.js

@@ -1,3 +1,3 @@
 export default function rotateY(y) {
-  return 'rotateY(' + y + ')'
+  return 'rotateY(' + y + 'deg)'
 }

modules/functions/rotateZ.js

@@ -1,3 +1,3 @@
 export default function rotateZ(z) {
-  return 'rotateZ(' + z + ')'
+  return 'rotateZ(' + z + 'deg)'
 }

readme.md

@@ -1,9 +1,78 @@
-## JS functions to build CSS functions
+## JavaScript functions to build CSS functions
+
+This package ships functions that return the equivalent CSS function syntax.
+
+## API
+Right now we ship 25 functions.<br>
+
+* `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.<br>
+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, 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
- rgba(255, 255, 255, 0.5)
- ```
+import { translateX, scale, rotateX, multiple } from 'css-functions'
 
- ```css
- rgba(255, 255, 255, 0.5)
- ```
+// => 'translateX('10%') scale(0.5, 0.5) rotateX(180deg)'
+const combined = multiple(
+  translateX('10%'),
+  scale(0.5, 0.5),
+  rotateX(180)
+)
+```