diff --git a/modules/functions/blur.js b/modules/functions/blur.js new file mode 100644 index 0000000..cbcc36d --- /dev/null +++ b/modules/functions/blur.js @@ -0,0 +1,5 @@ +import applyUnitToNumber from '../utils/applyUnitToNumber' + +export default function blur(v) { + return 'blur(' + applyUnitToNumber(v) + ')' +} diff --git a/modules/functions/brightness.js b/modules/functions/brightness.js new file mode 100644 index 0000000..9e5f05a --- /dev/null +++ b/modules/functions/brightness.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('brightness') diff --git a/modules/functions/contrast.js b/modules/functions/contrast.js new file mode 100644 index 0000000..209469b --- /dev/null +++ b/modules/functions/contrast.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('contrast') diff --git a/modules/functions/drop-shadow.js b/modules/functions/drop-shadow.js new file mode 100644 index 0000000..1aecea6 --- /dev/null +++ b/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) + ')' +} diff --git a/modules/functions/grayscale.js b/modules/functions/grayscale.js new file mode 100644 index 0000000..7383a4e --- /dev/null +++ b/modules/functions/grayscale.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('grayscale') diff --git a/modules/functions/hueRotate.js b/modules/functions/hueRotate.js new file mode 100644 index 0000000..ee468af --- /dev/null +++ b/modules/functions/hueRotate.js @@ -0,0 +1,5 @@ +import applyUnitToNumber from '../utils/applyUnitToNumber' + +export default function hueRotate(v) { + return 'hue-rotate(' + applyUnitToNumber(v, 'deg') + ')' +} diff --git a/modules/functions/invert.js b/modules/functions/invert.js new file mode 100644 index 0000000..a628117 --- /dev/null +++ b/modules/functions/invert.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('invert') diff --git a/modules/functions/opacity.js b/modules/functions/opacity.js new file mode 100644 index 0000000..2f8a377 --- /dev/null +++ b/modules/functions/opacity.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('opacity') diff --git a/modules/functions/perspective.js b/modules/functions/perspective.js index 4282010..b171886 100644 --- a/modules/functions/perspective.js +++ b/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') diff --git a/modules/functions/saturate.js b/modules/functions/saturate.js new file mode 100644 index 0000000..d29da23 --- /dev/null +++ b/modules/functions/saturate.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('saturate') diff --git a/modules/functions/scaleX.js b/modules/functions/scaleX.js index 1b525c4..bd91087 100644 --- a/modules/functions/scaleX.js +++ b/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') diff --git a/modules/functions/scaleY.js b/modules/functions/scaleY.js index 3cb1442..9ed1b0d 100644 --- a/modules/functions/scaleY.js +++ b/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') diff --git a/modules/functions/scaleZ.js b/modules/functions/scaleZ.js index 9eead56..eab022b 100644 --- a/modules/functions/scaleZ.js +++ b/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') diff --git a/modules/functions/sepia.js b/modules/functions/sepia.js new file mode 100644 index 0000000..78bc6cd --- /dev/null +++ b/modules/functions/sepia.js @@ -0,0 +1,3 @@ +import simpleFunctionFactory from '../utils/simpleFunctionFactory' + +export default simpleFunctionFactory('sepia') diff --git a/modules/index.js b/modules/index.js index ad4a955..31ba8c3 100644 --- a/modules/index.js +++ b/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' diff --git a/modules/utils/simpleFunctionFactory.js b/modules/utils/simpleFunctionFactory.js new file mode 100644 index 0000000..6aaf336 --- /dev/null +++ b/modules/utils/simpleFunctionFactory.js @@ -0,0 +1,5 @@ +export default function simpleFunctionFactory(cssfunction) { + return function (v) { + return cssfunction + '(' + v + ')' + } +} diff --git a/readme.md b/readme.md index 5a3265a..d149222 100644 --- a/readme.md +++ b/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.
+Right now we ship 35 functions.
+* `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.
* `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,6 +92,8 @@ const combined = multiple( ## Units As the above example shows, we add default units to some numbers. #### px +* `blur` +* `dropShadow` * `translate` * `translate3d` * `translateX` @@ -89,6 +101,7 @@ As the above example shows, we add default units to some numbers. * `translateZ` #### deg +* `hueRotate` * `rotate` * `rotate3d` * `rotateX`