Add css filtering functions

modules/functions/blur.js

@@ -0,0 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
+export default function blur(v) {
+  return 'blur(' + applyUnitToNumber(v) + ')'
+}

modules/functions/brightness.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('brightness')

modules/functions/contrast.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('contrast')

modules/functions/drop-shadow.js

@@ -0,0 +1,9 @@
+import isObject from '../utils/isObject'
+import applyUnitToNumbers from '../utils/applyUnitToNumber'
+
+export default function dropShadow(x, y, blur, spread) {
+  const values = isObject(x) ? [ x.x, x.y, x.blur, x.spread ] : [ x, y, blur, spread  ]
+  const filtred = values.filter(v => v != null)
+
+  return 'drop-shadow(' + applyUnitToNumbers(filtred) + ')'
+}

modules/functions/grayscale.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('grayscale')

modules/functions/hueRotate.js

@@ -0,0 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
+export default function hueRotate(v) {
+  return 'hue-rotate(' + applyUnitToNumber(v, 'deg') + ')'
+}

modules/functions/invert.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('invert')

modules/functions/opacity.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('opacity')

modules/functions/perspective.js

@@ -1,3 +1,3 @@
-export default function perspective(p) {
-  return 'perspective(' + p + ')'
-}
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('perspective')

modules/functions/saturate.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('saturate')

modules/functions/scaleX.js

@@ -1,3 +1,3 @@
-export default function scaleX(x) {
-  return 'scaleX(' + x + ')'
-}
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('scaleX')

modules/functions/scaleY.js

@@ -1,3 +1,3 @@
-export default function scaleY(y) {
-  return 'scaleY(' + y + ')'
-}
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('scaleY')

modules/functions/scaleZ.js

@@ -1,3 +1,3 @@
-export default function scaleZ(z) {
-  return 'scaleZ(' + z + ')'
-}
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('scaleZ')

modules/functions/sepia.js

@@ -0,0 +1,3 @@
+import simpleFunctionFactory from '../utils/simpleFunctionFactory'
+
+export default simpleFunctionFactory('sepia')

modules/index.js

@@ -1,7 +1,15 @@
+export blur from './functions/blur'
+export brightness from './functions/brightness'
+export contrast from './function/contrast'
+export dropShadow from './functions/dropShadow'
+export grayscale from './function/grayscale'
 export hsl from './functions/hsl'
 export hsla from './functions/hsla'
+export hueRotate from './functions/hueRotate'
+export invert from './functions/invert'
 export matrix from './functions/matrix'
 export matrix3d from './functions/matrix3d'
+export opacity from './functions/opacity'
 export perspective from './functions/perspective'
 export rgb from './functions/rgb'
 export rgba from './functions/rgba'
@@ -10,11 +18,13 @@ export rotate3d from './functions/rotate3d'
 export rotateX from './functions/rotateX'
 export rotateY from './functions/rotateY'
 export rotateZ from './functions/rotateZ'
+export saturate from './function/saturate'
 export scale from './functions/scale'
 export scale3d from './functions/scale3d'
 export scaleX from './functions/scaleX'
 export scaleY from './functions/scaleY'
 export scaleZ from './functions/scaleZ'
+export sepia from './function/sepia'
 export skew from './functions/skew'
 export skewX from './functions/skewX'
 export skewY from './functions/skewY'

modules/utils/simpleFunctionFactory.js

@@ -0,0 +1,5 @@
+export default function simpleFunctionFactory(cssfunction) {
+  return function (v) {
+    return cssfunction + '(' + v + ')'
+  }
+}

readme.md

@@ -4,12 +4,20 @@ 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.<br>
+Right now we ship 35 functions.<br>
 
+* `blur(v)`
+* `brightness(v)`
+* `contrast(v)`
+* `dropShadow(offsetX, offsetY, blurRadius, spreadRadius, color)`
+* `grayscale(v)`
 * `hsl(h, s, l)`
 * `hsla(h, s, l, a)`
+* `hueRotate(v)`
+* `invert(v)`
 * `matrix(a, b, c, d, x, y)`
 * `matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)`
+* `opacity(v)`
 * `perspective(p)`
 * `rgb(r, g, b)`
 * `rgba(r, g, b, a)`
@@ -18,11 +26,13 @@ Right now we ship 25 functions.<br>
 * `rotateX(x)`
 * `rotateY(y)`
 * `rotateZ(z)`
+* `saturate(v)`
 * `scale(x, y)`
 * `scale3d(x, y, z)`
 * `scaleX(x)`
 * `scaleY(y)`
 * `scaleZ(z)`
+* `sepia(z)`
 * `skew(x, y)`
 * `skewX(x)`
 * `skewY(y)`
@@ -82,13 +92,16 @@ const combined = multiple(
 ## Units
 As the above example shows, we add default units to some numbers.
 #### px
+* `blur`
+* `dropShadow`
 * `translate`
 * `translate3d`
 * `translateX`
 * `translateY`
 * `translateZ`
 
 #### deg
+* `hueRotate`
 * `rotate`
 * `rotate3d`
 * `rotateX`