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,3 +1,5 @@
+export blur from './functions/blur'
+export brightness from './functions/brightness'
 export hsl from './functions/hsl'
 export hsla from './functions/hsla'
 export matrix from './functions/matrix'

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`