From 963d2d370ba59ae1b56923e84382f7f2292bffac Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Wed, 1 Dec 2021 08:35:21 -0600
Subject: [PATCH] [#136] Add support for RGBA color values

---
 src/token.js      | 26 +++++++++++++++++---------
 src/token.test.js | 15 ++++++++++++++-
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/token.js b/src/token.js
index 52d08c68..179e42bb 100644
--- a/src/token.js
+++ b/src/token.js
@@ -1,13 +1,16 @@
 const R_NUMBER_COMPONENT = /(\d|-|\.)/
 const R_FORMAT_CHUNKS = /([^\-0-9.]+)/g
 const R_UNFORMATTED_VALUES = /[0-9.-]+/g
-const R_RGB = (() => {
+const R_RGBA = (() => {
   const number = R_UNFORMATTED_VALUES.source
   const comma = /,\s*/.source
 
-  return new RegExp(`rgb\\(${number}${comma}${number}${comma}${number}\\)`, 'g')
+  return new RegExp(
+    `rgba?\\(${number}${comma}${number}${comma}${number}(${comma}${number})?\\)`,
+    'g'
+  )
 })()
-const R_RGB_PREFIX = /^.*\(/
+const R_RGBA_PREFIX = /^.*\(/
 const R_HEX = /#([0-9]|[a-f]){3,6}/gi
 const VALUE_PLACEHOLDER = 'VAL'
 
@@ -162,11 +165,16 @@ const sanitizeObjectForHexProps = stateObject => {
  * @return {string}
  * @private
  */
-const sanitizeRGBChunk = rgbChunk => {
-  const numbers = rgbChunk.match(R_UNFORMATTED_VALUES).map(Math.floor)
-  const prefix = rgbChunk.match(R_RGB_PREFIX)[0]
-
-  return `${prefix}${numbers.join(',')})`
+const sanitizeRGBAChunk = rgbChunk => {
+  const rgbaRawValues = rgbChunk.match(R_UNFORMATTED_VALUES)
+  const rgbNumbers = rgbaRawValues.slice(0, 3).map(Math.floor)
+  const prefix = rgbChunk.match(R_RGBA_PREFIX)[0]
+
+  if (rgbaRawValues.length === 3) {
+    return `${prefix}${rgbNumbers.join(',')})`
+  } else if (rgbaRawValues.length === 4) {
+    return `${prefix}${rgbNumbers.join(',')},${rgbaRawValues[3]})`
+  }
 }
 
 /**
@@ -178,7 +186,7 @@ const sanitizeRGBChunk = rgbChunk => {
  * @private
  */
 const sanitizeRGBChunks = formattedString =>
-  filterStringChunks(R_RGB, formattedString, sanitizeRGBChunk)
+  filterStringChunks(R_RGBA, formattedString, sanitizeRGBAChunk)
 
 /**
  * Note: It's the duty of the caller to convert the Array elements of the
diff --git a/src/token.test.js b/src/token.test.js
index baae08a2..c1ab5e1d 100644
--- a/src/token.test.js
+++ b/src/token.test.js
@@ -25,6 +25,19 @@ test('can tween an rgb color with a number in the tween', () => {
   expect(interpolated.color).toEqual(to.color)
 })
 
+test('can tween an rgba color with a number in the tween', () => {
+  const from = { color: 'rgba(0,128,255,0)', x: 0 },
+    to = { color: 'rgba(128,255,0,1)', x: 10 }
+
+  let interpolated = interpolate(from, to, 0)
+  expect(interpolated.color).toEqual(from.color)
+  interpolated = interpolate(from, to, 0.5)
+  expect(interpolated.color).toEqual('rgba(64,191,127,0.5)')
+  expect(interpolated.x).toEqual(5)
+  interpolated = interpolate(from, to, 1)
+  expect(interpolated.color).toEqual(to.color)
+})
+
 test('can tween hex color values', () => {
   const from = { color: '#ff00ff' },
     to = { color: '#00ff00' }
@@ -49,7 +62,7 @@ test('can tween multiple rgb color tokens', () => {
   expect(interpolated.color).toEqual(to.color)
 })
 
-test("each token chunk can have it's own easing curve", () => {
+test('each token chunk can have its own easing curve', () => {
   const from = { color: 'rgb(0,0,0)' },
     to = { color: 'rgb(255,255,255)' },
     easing = 'linear easeInQuad easeInCubic'