Basic rgb hex interpolation. Fixes #3

Author: codepunkt

src/__tests__/__snapshots__/index.test.js.snap

@@ -189,33 +189,43 @@ Object {
 exports[`css-spring matches snapshots 2`] = `
 Object {
   "0%": Object {
+    "background": "#bbd653",
     "padding-left": "-48px",
   },
   "1%": Object {
+    "background": "#becf51",
     "padding-left": "-45px",
   },
   "10%": Object {
+    "background": "#e9461b",
     "padding-left": "18px",
   },
   "100%": Object {
+    "background": "#ff0000",
     "padding-left": "50px",
   },
   "11%": Object {
+    "background": "#ee3615",
     "padding-left": "25px",
   },
   "12%": Object {
+    "background": "#f3270f",
     "padding-left": "32px",
   },
   "13%": Object {
+    "background": "#f71a0a",
     "padding-left": "38px",
   },
   "14%": Object {
+    "background": "#fb0d05",
     "padding-left": "44px",
   },
   "15%": Object {
+    "background": "#fe0201",
     "padding-left": "49px",
   },
   "16%": Object {
+    "background": "#ff0000",
     "padding-left": "54px",
   },
   "17%": Object {
@@ -228,6 +238,7 @@ Object {
     "padding-left": "64px",
   },
   "2%": Object {
+    "background": "#c1c54d",
     "padding-left": "-40px",
   },
   "20%": Object {
@@ -261,6 +272,7 @@ Object {
     "padding-left": "66px",
   },
   "3%": Object {
+    "background": "#c5b848",
     "padding-left": "-34px",
   },
   "30%": Object {
@@ -294,72 +306,117 @@ Object {
     "padding-left": "52px",
   },
   "4%": Object {
+    "background": "#c9aa42",
     "padding-left": "-28px",
   },
   "40%": Object {
+    "background": "#ff0000",
     "padding-left": "51px",
   },
   "41%": Object {
+    "background": "#ff0100",
     "padding-left": "50px",
   },
   "42%": Object {
+    "background": "#fe0201",
     "padding-left": "49px",
   },
   "43%": Object {
+    "background": "#fe0402",
     "padding-left": "48px",
   },
   "44%": Object {
+    "background": "#fd0502",
     "padding-left": "48px",
   },
   "45%": Object {
+    "background": "#fd0602",
     "padding-left": "47px",
   },
   "46%": Object {
+    "background": "#fd0703",
     "padding-left": "47px",
   },
   "47%": Object {
+    "background": "#fd0803",
     "padding-left": "46px",
   },
+  "48%": Object {
+    "background": "#fc0803",
+  },
   "5%": Object {
+    "background": "#ce9a3c",
     "padding-left": "-21px",
   },
   "52%": Object {
+    "background": "#fc0803",
     "padding-left": "46px",
   },
   "53%": Object {
+    "background": "#fd0803",
     "padding-left": "47px",
   },
+  "54%": Object {
+    "background": "#fd0703",
+  },
+  "55%": Object {
+    "background": "#fd0703",
+  },
   "56%": Object {
+    "background": "#fd0602",
     "padding-left": "47px",
   },
   "57%": Object {
+    "background": "#fd0502",
     "padding-left": "48px",
   },
+  "58%": Object {
+    "background": "#fe0502",
+  },
+  "59%": Object {
+    "background": "#fe0402",
+  },
   "6%": Object {
+    "background": "#d38a36",
     "padding-left": "-13px",
   },
   "60%": Object {
+    "background": "#fe0301",
     "padding-left": "48px",
   },
   "61%": Object {
+    "background": "#fe0301",
     "padding-left": "49px",
   },
+  "62%": Object {
+    "background": "#fe0201",
+  },
   "63%": Object {
+    "background": "#ff0201",
     "padding-left": "49px",
   },
   "64%": Object {
+    "background": "#ff0100",
     "padding-left": "50px",
   },
+  "65%": Object {
+    "background": "#ff0100",
+  },
+  "66%": Object {
+    "background": "#ff0000",
+  },
   "69%": Object {
     "padding-left": "50px",
   },
   "7%": Object {
+    "background": "#d9792f",
     "padding-left": "-5px",
   },
   "70%": Object {
     "padding-left": "51px",
   },
   "8%": Object {
+    "background": "#de6828",
     "padding-left": "3px",
   },
   "82%": Object {
@@ -369,6 +426,7 @@ Object {
     "padding-left": "50px",
   },
   "9%": Object {
+    "background": "#e45722",
     "padding-left": "10px",
   },
 }

src/__tests__/index.test.js

@@ -15,9 +15,11 @@ describe('css-spring', () => {
       spring(
         {
           'padding-left': '-50px',
+          background: '#bada55',
         },
         {
           'padding-left': '50px',
+          background: '#f00',
         },
         {
           preset: 'wobbly',

src/__tests__/parse.test.js

@@ -1,42 +1,47 @@
 import {
   combine,
+  parseHexColor,
   parseStyles,
   parseValues,
   split,
 } from '../parse'
 
 describe('parse', () => {
   describe('combine', () => {
-    test('returns value for unknown properties', () => {
+    test('returns value for unknown props', () => {
       expect(combine('foo', 'bar')).toEqual('bar')
     })
     test('returns value for non-array values', () => {
       expect(combine('border', 'bar')).toEqual('bar')
     })
     test('returns combined value for array values', () => {
-      expect(combine('border', [ '1px', 'solid', '#f00' ])).toEqual('1px solid #f00')
+      expect(combine('border', [ '1px', 'solid', '#f00' ]))
+        .toEqual('1px solid #f00')
     })
   })
 
   describe('parseStyles', () => {
-    test('only parses properties that exist in both start and end styles', () => {
+    test('only parses props that exist in both start and end styles', () => {
       expect(
         parseStyles({ margin: '0 0 10px 10px' }, { padding: '10px 10px 0 0' })
       ).toEqual([])
     })
-    test('only parses properties that have the same number of values', () => {
+    test('only parses props that have the same number of values', () => {
       expect(
         parseStyles({ margin: '0 0 10px 10px' }, { margin: '10px 0 0' })
       ).toEqual([])
     })
-    test('only parses properties where every start/end combination can be parsed', () => {
+    test('fails parse on equal number of props but different type', () => {
       expect(
         parseStyles({ margin: '0 0 10px 10px' }, { margin: '10px foo 0 0' })
       ).toEqual([])
     })
     test('returns parsed information object', () => {
       expect(
-        parseStyles({ border: '0 solid #f00', opacity: 0 }, { border: '10px solid #f00', opacity: 1 })
+        parseStyles(
+          { border: '0 solid #f00', opacity: 0 },
+          { border: '10px solid #f00', opacity: 1 }
+        )
       ).toEqual([
         { prop: 'border', start: 0, end: 10, unit: 'px' },
         { prop: 'border', fixed: 'solid' },
@@ -50,27 +55,48 @@ describe('parse', () => {
     test('returns fixed when both values are equal', () => {
       expect(parseValues('solid', 'solid')).toEqual({ fixed: 'solid' })
     })
-    test('returns undefined when one of the values is not numeric', () => {
+    test('returns rgb colors when both values are colors', () => {
+      expect(parseValues('#f00', '#00f'))
+        .toEqual({ rgb: [[ 255, 0, 0 ], [ 0, 0, 255 ]]})
+    })
+    test('returns undefined otherwise', () => {
       expect(parseValues('solid', '1px')).toEqual(undefined)
       expect(parseValues(0, '#f00')).toEqual(undefined)
     })
     test('returns start, end and unit otherwise', () => {
-      expect(parseValues('1px', '10px')).toEqual({ start: 1, end: 10, unit: 'px' })
-      expect(parseValues(0, 1)).toEqual({ start: 0, end: 1, unit: '' })
-      expect(parseValues(0, '10rem')).toEqual({ start: 0, end: 10, unit: 'rem' })
-      expect(parseValues('0px', 1)).toEqual({ start: 0, end: 1, unit: 'px' })
+      expect(parseValues('1px', '10px'))
+        .toEqual({ start: 1, end: 10, unit: 'px' })
+      expect(parseValues(0, 1))
+        .toEqual({ start: 0, end: 1, unit: '' })
+      expect(parseValues(0, '10rem'))
+        .toEqual({ start: 0, end: 10, unit: 'rem' })
+      expect(parseValues('0px', 1))
+        .toEqual({ start: 0, end: 1, unit: 'px' })
     })
   })
 
   describe('split', () => {
-    test('returns value for unknown properties', () => {
+    test('returns value for unknown props', () => {
       expect(split('foo', 'bar')).toEqual('bar')
     })
     test('returns value for non-splittable values', () => {
       expect(split('border', 'bar')).toEqual('bar')
     })
     test('returns splitted value otherwise', () => {
-      expect(split('border', '1px solid #f00')).toEqual([ '1px', 'solid', '#f00' ])
+      expect(split('border', '1px solid #f00'))
+        .toEqual([ '1px', 'solid', '#f00' ])
+    })
+  })
+
+  describe('parseHexColor', () => {
+    test('parses hex color shorthand', () => {
+      expect(parseHexColor('#f00')).toEqual([ 255, 0, 0 ])
+    })
+    test('parses hex color', () => {
+      expect(parseHexColor('#00ff00')).toEqual([ 0, 255, 0 ])
+    })
+    test('doesnt parse when not a hex color', () => {
+      expect(parseHexColor('wat')).toEqual(undefined)
     })
   })
 })

src/__tests__/util.test.js

@@ -5,6 +5,7 @@ import {
   calculateObsoleteValues,
   getInterpolator,
   omitEmptyValues,
+  rgbFloatToHex,
   toString,
 } from '../util'
 
@@ -108,4 +109,13 @@ describe('util', () => {
         .toEqual('0%{opacity:0;left:20px;}100%{opacity:1;left:200px;}')
     })
   })
+
+  describe('rgbFloatToHex', () => {
+    test('converts floats to hex, prepends 0 to single digit results', () => {
+      expect(rgbFloatToHex(15)).toEqual('0f')
+      expect(rgbFloatToHex(254)).toEqual('fe')
+      expect(rgbFloatToHex(500)).toEqual('ff')
+      expect(rgbFloatToHex(-6)).toEqual('00')
+    })
+  })
 })

src/index.js

@@ -15,6 +15,7 @@ import {
   calculateObsoleteValues,
   getInterpolator,
   omitEmptyValues,
+  rgbFloatToHex,
   toString,
 } from './util'
 
@@ -57,7 +58,7 @@ export const spring = (startStyles, endStyles, options = {}) => {
   const parsed = parseStyles(startStyles, endStyles)
 
   // build keyframe styles based on parsed properties
-  parsed.forEach(({ prop, unit, start, end, fixed }) => {
+  parsed.forEach(({ prop, unit, start, end, rgb, fixed }) => {
     // if start and end values differ, interpolate between them
     if (!isNil(start) && !isNil(end)) {
       interpolate(start, end).forEach((interpolated, i) => {
@@ -67,6 +68,17 @@ export const spring = (startStyles, endStyles, options = {}) => {
         value = value === 0 || !unit ? value : `${value}${unit}`
         result[i] = addValueToProperty(result[i], prop, value)
       })
+    // if hex representations of rgb colors are found
+    } else if (!isNil(rgb)) {
+      // interpolate each color component separately
+      const r = interpolate(rgb[0][0], rgb[1][0])
+      const g = interpolate(rgb[0][1], rgb[1][1])
+      const b = interpolate(rgb[0][2], rgb[1][2])
+      r.forEach((interpolated, i) => {
+        const toRgb = rgbFloatToHex
+        result[i] = addValueToProperty(result[i], prop,
+          `#${toRgb(r[i])}${toRgb(g[i])}${toRgb(b[i])}`)
+      })
     // otherwise the value is fixed and can directly be appended to the
     // resulting keyframe styles
     } else if (!isNil(fixed)) {
@@ -81,7 +93,10 @@ export const spring = (startStyles, endStyles, options = {}) => {
   const obsoleteValues = calculateObsoleteValues(result)
   result = mapValues(result, (value, i) => {
     const result = mapValues(value, (value, key) => combine(key, value))
-    return pickBy(result, (_, property) => obsoleteValues[property].indexOf(Number(i)) < 0)
+    return pickBy(
+      result,
+      (_, property) => obsoleteValues[property].indexOf(Number(i)) < 0,
+    )
   })
   result = omitEmptyValues(result)
   result = appendToKeys(result, '%')
@@ -109,7 +124,7 @@ export const spring = (startStyles, endStyles, options = {}) => {
 // console.time('interpolate 2')
 // spring(
 //   { 'margin-left': `250px`, border: '1px solid #f00' },
-//   { 'margin-left': 0, border: '10px solid #f00' },
+//   { 'margin-left': 0, border: '10px solid #bada55' },
 //   { preset: 'gentle' },
 // )
 // console.timeEnd('interpolate 2')