From f3893d19d67805191f2f9b5e0a821f855f477796 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 7 Oct 2020 14:07:18 -0400
Subject: [PATCH] Set color opacity variable when colors are defined as
 functions (#2515)

* Always set color opacity variable, even if color cannot be parsed

* Only set color opacity when it might be used
---
 __tests__/plugins/gradientColorStops.test.js | 1 +
 __tests__/withAlphaVariable.test.js          | 1 +
 src/util/withAlphaVariable.js                | 1 +
 3 files changed, 3 insertions(+)

diff --git a/__tests__/plugins/gradientColorStops.test.js b/__tests__/plugins/gradientColorStops.test.js
index 826d5e30695e..f75a3a9da1a3 100644
--- a/__tests__/plugins/gradientColorStops.test.js
+++ b/__tests__/plugins/gradientColorStops.test.js
@@ -34,6 +34,7 @@ test('opacity variables are given to colors defined as closures', () => {
     .then(result => {
       const expected = `
         .text-primary {
+          --text-opacity: 1;
           color: rgba(31,31,31,var(--text-opacity,1))
         }
         .text-opacity-50 {
diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js
index 11fc3a12d9ce..4351bd00d9de 100644
--- a/__tests__/withAlphaVariable.test.js
+++ b/__tests__/withAlphaVariable.test.js
@@ -104,6 +104,7 @@ test('it allows a closure to be passed', () => {
       variable: '--bg-opacity',
     })
   ).toEqual({
+    '--bg-opacity': '1',
     'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
   })
 })
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index 32a943420990..af0494855697 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -21,6 +21,7 @@ export function toRgba(color) {
 export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {
+      [variable]: '1',
       [property]: color({ opacityVariable: variable }),
     }
   }