From 80bb8f2beff7dfc3b435238d243b748aceaefa2f Mon Sep 17 00:00:00 2001 From: Shastel Date: Wed, 29 Aug 2018 18:07:27 +0300 Subject: [PATCH 1/4] Add css filtering functions --- modules/functions/blur.js | 5 +++++ modules/functions/brightness.js | 3 +++ modules/functions/contrast.js | 3 +++ modules/functions/drop-shadow.js | 9 +++++++++ modules/functions/grayscale.js | 3 +++ modules/functions/hueRotate.js | 5 +++++ modules/functions/invert.js | 3 +++ modules/functions/opacity.js | 3 +++ modules/functions/perspective.js | 6 +++--- modules/functions/saturate.js | 3 +++ modules/functions/scaleX.js | 6 +++--- modules/functions/scaleY.js | 6 +++--- modules/functions/scaleZ.js | 6 +++--- modules/functions/sepia.js | 3 +++ modules/index.js | 2 ++ modules/utils/simpleFunctionFactory.js | 5 +++++ readme.md | 15 ++++++++++++++- 17 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 modules/functions/blur.js create mode 100644 modules/functions/brightness.js create mode 100644 modules/functions/contrast.js create mode 100644 modules/functions/drop-shadow.js create mode 100644 modules/functions/grayscale.js create mode 100644 modules/functions/hueRotate.js create mode 100644 modules/functions/invert.js create mode 100644 modules/functions/opacity.js create mode 100644 modules/functions/saturate.js create mode 100644 modules/functions/sepia.js create mode 100644 modules/utils/simpleFunctionFactory.js 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..683a6c7 --- /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..452c52a --- /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..18b92df --- /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..813599f --- /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..3fddd71 --- /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..14d5aa6 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..99965a8 --- /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..90ddff4 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..7d74598 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..ed81691 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..cfa463d --- /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..47f9fa4 100644 --- a/modules/index.js +++ b/modules/index.js @@ -1,3 +1,5 @@ +export blur from './functions/blur' +export brightnes from './functions/brightnes' export hsl from './functions/hsl' export hsla from './functions/hsla' export matrix from './functions/matrix' 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` From c219a7cf619846cf2c5c218dcc535f1a786461ef Mon Sep 17 00:00:00 2001 From: Joe Pea Date: Tue, 11 Sep 2018 22:32:55 -0700 Subject: [PATCH 2/4] fix typo --- modules/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/index.js b/modules/index.js index 47f9fa4..9630e58 100644 --- a/modules/index.js +++ b/modules/index.js @@ -1,5 +1,5 @@ export blur from './functions/blur' -export brightnes from './functions/brightnes' +export brightness from './functions/brightness' export hsl from './functions/hsl' export hsla from './functions/hsla' export matrix from './functions/matrix' From 7704ae48708ebc319b4be9762b6472ed4654541b Mon Sep 17 00:00:00 2001 From: Joe Pea Date: Tue, 11 Sep 2018 22:44:22 -0700 Subject: [PATCH 3/4] fix imports --- modules/functions/brightness.js | 2 +- modules/functions/contrast.js | 2 +- modules/functions/grayscale.js | 2 +- modules/functions/invert.js | 2 +- modules/functions/opacity.js | 2 +- modules/functions/perspective.js | 2 +- modules/functions/saturate.js | 2 +- modules/functions/scaleX.js | 2 +- modules/functions/scaleY.js | 2 +- modules/functions/scaleZ.js | 2 +- modules/functions/sepia.js | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/modules/functions/brightness.js b/modules/functions/brightness.js index 683a6c7..9e5f05a 100644 --- a/modules/functions/brightness.js +++ b/modules/functions/brightness.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('brightness') diff --git a/modules/functions/contrast.js b/modules/functions/contrast.js index 452c52a..209469b 100644 --- a/modules/functions/contrast.js +++ b/modules/functions/contrast.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('contrast') diff --git a/modules/functions/grayscale.js b/modules/functions/grayscale.js index 18b92df..7383a4e 100644 --- a/modules/functions/grayscale.js +++ b/modules/functions/grayscale.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('grayscale') diff --git a/modules/functions/invert.js b/modules/functions/invert.js index 813599f..a628117 100644 --- a/modules/functions/invert.js +++ b/modules/functions/invert.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('invert') diff --git a/modules/functions/opacity.js b/modules/functions/opacity.js index 3fddd71..2f8a377 100644 --- a/modules/functions/opacity.js +++ b/modules/functions/opacity.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('opacity') diff --git a/modules/functions/perspective.js b/modules/functions/perspective.js index 14d5aa6..b171886 100644 --- a/modules/functions/perspective.js +++ b/modules/functions/perspective.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('perspective') diff --git a/modules/functions/saturate.js b/modules/functions/saturate.js index 99965a8..d29da23 100644 --- a/modules/functions/saturate.js +++ b/modules/functions/saturate.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('saturate') diff --git a/modules/functions/scaleX.js b/modules/functions/scaleX.js index 90ddff4..bd91087 100644 --- a/modules/functions/scaleX.js +++ b/modules/functions/scaleX.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('scaleX') diff --git a/modules/functions/scaleY.js b/modules/functions/scaleY.js index 7d74598..9ed1b0d 100644 --- a/modules/functions/scaleY.js +++ b/modules/functions/scaleY.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('scaleY') diff --git a/modules/functions/scaleZ.js b/modules/functions/scaleZ.js index ed81691..eab022b 100644 --- a/modules/functions/scaleZ.js +++ b/modules/functions/scaleZ.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('scaleZ') diff --git a/modules/functions/sepia.js b/modules/functions/sepia.js index cfa463d..78bc6cd 100644 --- a/modules/functions/sepia.js +++ b/modules/functions/sepia.js @@ -1,3 +1,3 @@ -import simpleFunctionFactory from 'utils/simpleFunctionFactory' +import simpleFunctionFactory from '../utils/simpleFunctionFactory' export default simpleFunctionFactory('sepia') From fca8cc97766bd21b53d620449da3d33af99dd92b Mon Sep 17 00:00:00 2001 From: shastel Date: Fri, 14 Sep 2018 15:55:51 +0300 Subject: [PATCH 4/4] Add missing imports --- modules/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/modules/index.js b/modules/index.js index 9630e58..31ba8c3 100644 --- a/modules/index.js +++ b/modules/index.js @@ -1,9 +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' @@ -12,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'