From 79e5227b3607a880ce21efe23b280dd17b84919c Mon Sep 17 00:00:00 2001
From: Hunter Tunnicliff <htunnicliff@hey.com>
Date: Wed, 4 Aug 2021 21:25:57 -0700
Subject: [PATCH] Fix handling of CSS variable declarations

---
 src/util/withAlphaVariable.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index eede4b894bc5..1c9e8d48ae91 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -17,11 +17,22 @@ export function withAlphaValue(color, alphaValue, defaultValue) {
     // Apply alpha value
     parsed.alpha = alphaValue
 
-    // Return formatted string
+    // Format string
+    let value
     if (parsed.mode === 'hsl') {
-      return culori.formatHsl(parsed)
+      value = culori.formatHsl(parsed)
     } else {
-      return culori.formatRgb(parsed)
+      value = culori.formatRgb(parsed)
+    }
+
+    // Correctly apply CSS variable alpha value
+    if (typeof alphaValue === 'string' && alphaValue.startsWith('var(') && value.endsWith('NaN)')) {
+      value = value.replace('NaN)', `${alphaValue})`)
+    }
+
+    // Color could not be formatted correctly
+    if (!value.includes('NaN')) {
+      return value
     }
   }
 
@@ -49,8 +60,8 @@ export default function withAlphaVariable({ color, property, variable }) {
     const formatFn = parsed.mode === 'hsl' ? 'formatHsl' : 'formatRgb'
     const value = culori[formatFn]({
       ...parsed,
-      alpha: 0.3,
-    }).replace('0.3)', `var(${variable}))`)
+      alpha: NaN, // intentionally set to `NaN` for replacing
+    }).replace('NaN)', `var(${variable}))`)
 
     return {
       [variable]: '1',