automatically apply default units to number values if possible

rofrischmann · rofrischmann · commit 1cfbb9f2b91b · 2016-12-12T16:01:50.000+01:00
diff --git a/modules/functions/rotate.js b/modules/functions/rotate.js
@@ -1,6 +1,7 @@
 import isObject from '../utils/isObject'
+import applyUnitToNumbers from '../utils/applyUnitToNumbers'
 
 export default function rotate(x, y) {
   const values = isObject(x) ? [ r.x, r.y ] : [ x, y ]
-  return 'rotate(' + values.join('deg,') + 'deg' + ')'
+  return 'rotate(' + applyUnitToNumbers(values, 'deg').join(',') + ')'
 }
diff --git a/modules/functions/rotate3d.js b/modules/functions/rotate3d.js
@@ -1,6 +1,7 @@
 import isObject from '../utils/isObject'
+import applyUnitToNumbers from '../utils/applyUnitToNumbers'
 
 export default function rotate3d(x, y, z) {
   const values = isObject(x) ? [ r.x, r.y, r.z ] : [ x, y, z ]
-  return 'rotate3d(' + values.join('deg,') + 'deg' + ')'
+  return 'rotate3d(' + applyUnitToNumbers(values, 'deg').join(',') + ')'
 }
diff --git a/modules/functions/rotateX.js b/modules/functions/rotateX.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function rotateX(x) {
-  return 'rotateX(' + x + 'deg)'
+  return 'rotateX(' + applyUnitToNumber(x, 'deg') + ')'
 }
diff --git a/modules/functions/rotateY.js b/modules/functions/rotateY.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function rotateY(y) {
-  return 'rotateY(' + y + 'deg)'
+  return 'rotateY(' + applyUnitToNumber(y, 'deg') + ')'
 }
diff --git a/modules/functions/rotateZ.js b/modules/functions/rotateZ.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function rotateZ(z) {
-  return 'rotateZ(' + z + 'deg)'
+  return 'rotateZ(' + applyUnitToNumber(z, 'deg') + ')'
 }
diff --git a/modules/functions/skew.js b/modules/functions/skew.js
@@ -1,6 +1,7 @@
 import isObject from '../utils/isObject'
+import applyUnitToNumbers from '../utils/applyUnitToNumbers'
 
 export default function skew(x, y) {
   const values = isObject(x) ? [ r.x, r.y ] : [ x, y ]
-  return 'skew(' + values.join(',') + ')'
+  return 'skew(' + applyUnitToNumbers(values, 'deg').join(',') + ')'
 }
diff --git a/modules/functions/skewX.js b/modules/functions/skewX.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function skewX(x) {
-  return 'skewX(' + x + ')'
+  return 'skewX(' + applyUnitToNumber(x, 'deg') + ')'
 }
diff --git a/modules/functions/skewY.js b/modules/functions/skewY.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function skewY(x) {
-  return 'skewY(' + x + ')'
+  return 'skewY(' + applyUnitToNumber(x, 'deg') + ')'
 }
diff --git a/modules/functions/translate.js b/modules/functions/translate.js
@@ -1,6 +1,7 @@
 import isObject from '../utils/isObject'
+import applyUnitToNumbers from '../utils/applyUnitToNumbers'
 
 export default function translate(x, y) {
   const values = isObject(x) ? [ r.x, r.y ] : [ x, y ]
-  return 'translate(' + values.join(',') + ')'
+  return 'translate(' + applyUnitToNumbers(values).join(',') + ')'
 }
diff --git a/modules/functions/translate3d.js b/modules/functions/translate3d.js
@@ -1,6 +1,7 @@
 import isObject from '../utils/isObject'
+import applyUnitToNumbers from '../utils/applyUnitToNumbers'
 
 export default function translate(x, y, z) {
   const values = isObject(x) ? [ r.x, r.y, r.z ] : [ x, y, z ]
-  return 'translate(' + values.join(',') + ')'
+  return 'translate(' + applyUnitToNumbers(values).join(',') + ')'
 }
diff --git a/modules/functions/translateX.js b/modules/functions/translateX.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function translateX(x) {
-  return 'translateX(' + x + ')'
+  return 'translateX(' + applyUnitToNumber(x) + ')'
 }
diff --git a/modules/functions/translateY.js b/modules/functions/translateY.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function translateY(y) {
-  return 'translateY(' + y + ')'
+  return 'translateY(' + applyUnitToNumber(y) + ')'
 }
diff --git a/modules/functions/translateZ.js b/modules/functions/translateZ.js
@@ -1,3 +1,5 @@
+import applyUnitToNumber from '../utils/applyUnitToNumber'
+
 export default function translateZ(z) {
-  return 'translateZ(' + z + ')'
+  return 'translateZ(' + applyUnitToNumber(z) + ')'
 }
diff --git a/modules/index.js b/modules/index.js
@@ -1,57 +1,27 @@
-import hsl from './functions/hsl'
-import hsla from './functions/hsla'
-import matrix from './functions/matrix'
-import matrix3d from './functions/matrix3d'
-import perspective from './functions/perspective'
-import rgb from './functions/rgb'
-import rgba from './functions/rgba'
-import rotate from './functions/rotate'
-import rotate3d from './functions/rotate3d'
-import rotateX from './functions/rotateX'
-import rotateY from './functions/rotateY'
-import rotateZ from './functions/rotateZ'
-import scale from './functions/scale'
-import scale3d from './functions/scale3d'
-import scaleX from './functions/scaleX'
-import scaleY from './functions/scaleY'
-import scaleZ from './functions/scaleZ'
-import skew from './functions/skew'
-import skewX from './functions/skewX'
-import skewY from './functions/skewY'
-import translate from './functions/translate'
-import translate3d from './functions/translate3d'
-import translateX from './functions/translateX'
-import translateY from './functions/translateY'
-import translateZ from './functions/translateZ'
+export hsl from './functions/hsl'
+export hsla from './functions/hsla'
+export matrix from './functions/matrix'
+export matrix3d from './functions/matrix3d'
+export perspective from './functions/perspective'
+export rgb from './functions/rgb'
+export rgba from './functions/rgba'
+export rotate from './functions/rotate'
+export rotate3d from './functions/rotate3d'
+export rotateX from './functions/rotateX'
+export rotateY from './functions/rotateY'
+export rotateZ from './functions/rotateZ'
+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 skew from './functions/skew'
+export skewX from './functions/skewX'
+export skewY from './functions/skewY'
+export translate from './functions/translate'
+export translate3d from './functions/translate3d'
+export translateX from './functions/translateX'
+export translateY from './functions/translateY'
+export translateZ from './functions/translateZ'
 
-import multiple from './multiple'
-
-export default {
-  hsl,
-  hsla,
-  matrix,
-  matrix3d,
-  perspective,
-  rgb,
-  rgba,
-  rotate,
-  rotate3d,
-  rotateX,
-  rotateY,
-  rotateZ,
-  scale,
-  scale3d,
-  scaleX,
-  scaleY,
-  scaleZ,
-  skew,
-  skewX,
-  skewY,
-  translate,
-  translate3d,
-  translateX,
-  translateY,
-  translateZ,
-
-  multiple
-}
+export multiple from './multiple'
diff --git a/modules/utils/applyUnitToNumber.js b/modules/utils/applyUnitToNumber.js
@@ -0,0 +1,9 @@
+export default function applyUnitToNumbers(value, unit = 'px') {
+  // only transform number values other than 0
+  // as 0 does not need a value anyway
+  if (typeof value === 'number' && value !== 0) {
+    return value + unit
+  }
+
+  return value
+}
diff --git a/modules/utils/applyUnitToNumbers.js b/modules/utils/applyUnitToNumbers.js
@@ -0,0 +1,13 @@
+export default function applyUnitToNumbers(values, unit = 'px') {
+  for (let i = 0, len = values.length; i < len; ++i) {
+    const value = values[i]
+
+    // only transform number values other than 0
+    // as 0 does not need a value anyway
+    if (typeof value === 'number' && value !== 0) {
+      values[i] = value + unit
+    }
+  }
+
+  return values
+}
diff --git a/modules/utils/isObject.js b/modules/utils/isObject.js
@@ -1,3 +1,3 @@
 export default function isObject(obj) {
-  return obj instanceof Object && !Array.isArray(obj)
+  return typeof obj === 'object' && !Array.isArray(obj)
 }
diff --git a/readme.md b/readme.md
@@ -1,8 +1,9 @@
 ## JavaScript functions to build CSS functions
 
 This package ships functions that return the equivalent CSS function syntax.
+There will be automatic value validation in non-production mode soon.
 
-## API
+## Functions
 Right now we ship 25 functions.<br>
 
 * `hsl(h, s, l)`
@@ -36,7 +37,7 @@ 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 })`
+* `hsla({ hue, saturation, lightness, alpha })`
 * `rgb({ red, green, blue })`
 * `rgba({ red, green, blue, alpha })`
 
@@ -69,10 +70,30 @@ It safely combines both returned strings separated by a whitespace.
 ```javascript
 import { translateX, scale, rotateX, multiple } from 'css-functions'
 
-// => 'translateX('10%') scale(0.5, 0.5) rotateX(180deg)'
+// => 'translateX(10px) translateY(5%) scale(0.5, 0.5) rotateX(180deg)'
 const combined = multiple(
-  translateX('10%'),
+  translateX(10),
+  translateY('5%'),
   scale(0.5, 0.5),
   rotateX(180)
 )
 ```
+
+## Units
+As the above example shows, we add default units to some numbers.
+#### px
+* `translate`
+* `translate3d`
+* `translateX`
+* `translateY`
+* `translateZ`
+
+#### deg
+* `rotate`
+* `rotate3d`
+* `rotateX`
+* `rotateY`
+* `rotateZ`
+* `skew`
+* `skewX`
+* `skewY`
diff --git a/test/multiple-test.js b/test/multiple-test.js
@@ -2,6 +2,6 @@ import multiple from '../modules/multiple'
 
 describe('Combining multiple css functions', () => {
   it('should concatenate each function', () => {
-    expect(multiple('translateX(30px) translateY(40px)')).to.eql('translateX(30px) translateY(40px)')
+    expect(multiple('translateX(30px)', 'translateY(40px)')).to.eql('translateX(30px) translateY(40px)')
   })
 })
diff --git a/test/utils/applyUnitToNumber-test.js b/test/utils/applyUnitToNumber-test.js
@@ -0,0 +1,15 @@
+import applyUnitToNumber from '../../modules/utils/applyUnitToNumber'
+
+describe('Applying a unit to a number', () => {
+  it('should default to px', () => {
+    expect(applyUnitToNumber(3)).to.eql('3px')
+  })
+
+  it('should use the passed unit', () => {
+    expect(applyUnitToNumber(3, 'deg')).to.eql('3deg')
+  })
+
+  it('should not apply a unit to strings', () => {
+    expect(applyUnitToNumber('3px')).to.eql('3px')
+  })
+})
diff --git a/test/utils/applyUnitToNumbers-test.js b/test/utils/applyUnitToNumbers-test.js
@@ -0,0 +1,15 @@
+import applyUnitToNumbers from '../../modules/utils/applyUnitToNumbers'
+
+describe('Applying units to numbers', () => {
+  it('should default to px', () => {
+    expect(applyUnitToNumbers([ 3, 4 ])).to.eql([ '3px', '4px' ])
+  })
+
+  it('should use the passed unit', () => {
+    expect(applyUnitToNumbers([ 3, 4 ], 'deg')).to.eql([ '3deg', '4deg' ])
+  })
+
+  it('should not apply units to strings', () => {
+    expect(applyUnitToNumbers([ '3px', 4 ])).to.eql([ '3px', '4px' ])
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import isObject from '../utils/isObject'`
	`2`	`+import applyUnitToNumbers from '../utils/applyUnitToNumbers'`
`2`	`3`
`3`	`4`	`export default function rotate(x, y) {`
`4`	`5`	`const values = isObject(x) ? [ r.x, r.y ] : [ x, y ]`
`5`		`- return 'rotate(' + values.join('deg,') + 'deg' + ')'`
	`6`	`+ return 'rotate(' + applyUnitToNumbers(values, 'deg').join(',') + ')'`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import applyUnitToNumber from '../utils/applyUnitToNumber'`
	`2`	`+`
`1`	`3`	`export default function rotateX(x) {`
`2`		`- return 'rotateX(' + x + 'deg)'`
	`4`	`+ return 'rotateX(' + applyUnitToNumber(x, 'deg') + ')'`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import applyUnitToNumber from '../utils/applyUnitToNumber'`
	`2`	`+`
`1`	`3`	`export default function rotateY(y) {`
`2`		`- return 'rotateY(' + y + 'deg)'`
	`4`	`+ return 'rotateY(' + applyUnitToNumber(y, 'deg') + ')'`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import applyUnitToNumber from '../utils/applyUnitToNumber'`
	`2`	`+`
`1`	`3`	`export default function rotateZ(z) {`
`2`		`- return 'rotateZ(' + z + 'deg)'`
	`4`	`+ return 'rotateZ(' + applyUnitToNumber(z, 'deg') + ')'`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import applyUnitToNumber from '../utils/applyUnitToNumber'`
	`2`	`+`
`1`	`3`	`export default function skewX(x) {`
`2`		`- return 'skewX(' + x + ')'`
	`4`	`+ return 'skewX(' + applyUnitToNumber(x, 'deg') + ')'`
`3`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import applyUnitToNumber from '../utils/applyUnitToNumber'`
	`2`	`+`
`1`	`3`	`export default function skewY(x) {`
`2`		`- return 'skewY(' + x + ')'`
	`4`	`+ return 'skewY(' + applyUnitToNumber(x, 'deg') + ')'`
`3`	`5`	`}`