From 81bf797d0fd12aad6ad74126ab963ae740d3d8db Mon Sep 17 00:00:00 2001
From: Hunter Tunnicliff <htunnicliff@interos.ai>
Date: Wed, 4 Aug 2021 20:56:04 -0700
Subject: [PATCH] Fix formatting

---
 src/util/withAlphaVariable.js   | 13 +++++--------
 tests/withAlphaVariable.test.js | 10 ++++++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index f9dc753b14b0..3969398383a0 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -46,14 +46,11 @@ export default function withAlphaVariable({ color, property, variable }) {
       }
     }
 
-    let value
-    if (mode === 'hsl') {
-      const { h, s, l } = culori.hsl(color)
-      value = `hsla(${h}, ${s}, ${l}, var(${variable}))`
-    } else {
-      const { r, g, b } = culori.rgb(color)
-      value = `rgba(${r}, ${g}, ${b}, var(${variable}))`
-    }
+    const formatFn = mode === 'hsl' ? 'formatHsl' : 'formatRgb'
+    const value = culori[formatFn]({
+      ...color,
+      alpha: 0.3,
+    }).replace('0.3)', `var(${variable})`)
 
     return {
       [variable]: '1',
diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js
index ebd86a5b8d28..34ae4487ae05 100644
--- a/tests/withAlphaVariable.test.js
+++ b/tests/withAlphaVariable.test.js
@@ -7,6 +7,16 @@ test('it adds the right custom property', () => {
     '--tw-text-opacity': '1',
     color: 'rgba(255, 0, 0, var(--tw-text-opacity))',
   })
+  expect(
+    withAlphaVariable({
+      color: 'hsl(240 100% 50%)',
+      property: 'color',
+      variable: '--tw-text-opacity',
+    })
+  ).toEqual({
+    '--tw-text-opacity': '1',
+    color: 'hsla(240, 100%, 50%, var(--tw-text-opacity))',
+  })
 })
 
 test('it ignores colors that cannot be parsed', () => {