From 109dec16818c23d7b4f55e3c2fa976089ce962cf Mon Sep 17 00:00:00 2001
From: Haew <hi@haew.xyz>
Date: Fri, 1 May 2020 05:22:52 +0200
Subject: [PATCH 1/2] Allow colors to be defined as closures

---
 __tests__/withAlphaVariable.test.js | 12 ++++++++++++
 src/util/withAlphaVariable.js       |  7 +++++++
 2 files changed, 19 insertions(+)

diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js
index ff5d3a5291d6..12ec2df281d6 100644
--- a/__tests__/withAlphaVariable.test.js
+++ b/__tests__/withAlphaVariable.test.js
@@ -95,3 +95,15 @@ test('it ignores colors that already have an alpha channel', () => {
     'background-color': 'hsla(240, 100%, 50%, 0.5)',
   })
 })
+
+test('it allows a closure to be passed', () => {
+  expect(
+    withAlphaVariable({
+      color: variable => `rgba(0, 0, 0, var(${variable}))`,
+      property: 'background-color',
+      variable: '--bg-opacity',
+    })
+  ).toEqual({
+    'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
+  })
+})
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index 7083809b2ce4..cd42606e06cb 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -1,4 +1,5 @@
 import createColor from 'color'
+import _ from 'lodash'
 
 function hasAlpha(color) {
   return (
@@ -18,6 +19,12 @@ function toRgba(color) {
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
+  if (_.isFunction(color)) {
+    return {
+      [property]: color(variable),
+    }
+  }
+
   try {
     const [r, g, b, a] = toRgba(color)
 

From dbcac5035afdf4f2e00a6fbd98e93708dcc286f1 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Sun, 28 Jun 2020 20:46:23 +0200
Subject: [PATCH 2/2] refactor!: use object instead of positional arg

---
 __tests__/withAlphaVariable.test.js | 2 +-
 src/util/withAlphaVariable.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js
index 12ec2df281d6..11fc3a12d9ce 100644
--- a/__tests__/withAlphaVariable.test.js
+++ b/__tests__/withAlphaVariable.test.js
@@ -99,7 +99,7 @@ test('it ignores colors that already have an alpha channel', () => {
 test('it allows a closure to be passed', () => {
   expect(
     withAlphaVariable({
-      color: variable => `rgba(0, 0, 0, var(${variable}))`,
+      color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
       property: 'background-color',
       variable: '--bg-opacity',
     })
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index cd42606e06cb..089301baaa31 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -21,7 +21,7 @@ function toRgba(color) {
 export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {
-      [property]: color(variable),
+      [property]: color({ opacityVariable: variable }),
     }
   }