From f9d54f038293596765fec51ce48e4b02d0878a06 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 30 Apr 2021 09:27:56 -0400
Subject: [PATCH] Refactor preserving rgb/hsl when adding alpha channel

---
 jit/pluginUtils.js                |  4 ++--
 src/plugins/gradientColorStops.js | 16 ++--------------
 src/plugins/ringWidth.js          | 20 +++++++-------------
 src/util/withAlphaVariable.js     | 14 ++++++++++++++
 4 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/jit/pluginUtils.js b/jit/pluginUtils.js
index 5cf4c5d36c19..290a74b21c93 100644
--- a/jit/pluginUtils.js
+++ b/jit/pluginUtils.js
@@ -1,6 +1,6 @@
 const selectorParser = require('postcss-selector-parser')
 const postcss = require('postcss')
-const { toRgba } = require('../lib/util/withAlphaVariable')
+const createColor = require('color')
 const { nameClass, escapeCommas } = require('./lib/utils')
 
 function updateAllClasses(selectors, updateClass) {
@@ -166,7 +166,7 @@ module.exports = {
     return asValue(modifier, lookup, {
       validate: (value) => {
         try {
-          toRgba(value)
+          createColor(value)
           return true
         } catch (e) {
           return false
diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js
index 23a5f1709b4b..9cc1d177972f 100644
--- a/src/plugins/gradientColorStops.js
+++ b/src/plugins/gradientColorStops.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import nameClass from '../util/nameClass'
 import toColorValue from '../util/toColorValue'
-import { toRgba, toHsla } from '../util/withAlphaVariable'
+import { withAlphaValue } from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
@@ -10,19 +10,7 @@ export default function () {
 
     const utilities = _(colors)
       .map((value, modifier) => {
-        const transparentTo = (() => {
-          if (_.isFunction(value)) {
-            return value({ opacityValue: 0 })
-          }
-
-          try {
-            const isHSL = value.startsWith('hsl')
-            const [i, j, k] = isHSL ? toHsla(value) : toRgba(value)
-            return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, 0)`
-          } catch (_error) {
-            return `rgba(255, 255, 255, 0)`
-          }
-        })()
+        const transparentTo = withAlphaValue(value, 0, 'rgba(255, 255, 255, 0)')
 
         return [
           [
diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
index bac8ed988be8..177bddb6e515 100644
--- a/src/plugins/ringWidth.js
+++ b/src/plugins/ringWidth.js
@@ -1,21 +1,15 @@
 import _ from 'lodash'
 import nameClass from '../util/nameClass'
-import { toHsla, toRgba } from '../util/withAlphaVariable'
+import { withAlphaValue } from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
-    const ringColorDefault = (() => {
-      const isHSL = (theme('ringColor.DEFAULT') || '').startsWith('hsl')
-      const opacity = theme('ringOpacity.DEFAULT', '0.5')
-      try {
-        const [i, j, k] = isHSL
-          ? toHsla(theme('ringColor.DEFAULT'))
-          : toRgba(theme('ringColor.DEFAULT'))
-        return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${opacity})`
-      } catch (_error) {
-        return `rgba(147, 197, 253, ${opacity})`
-      }
-    })()
+    const ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+    const ringColorDefault = withAlphaValue(
+      theme('ringColor.DEFAULT'),
+      ringOpacityDefault,
+      `rgba(147, 197, 253, ${ringOpacityDefault})`
+    )
 
     addUtilities(
       {
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index 73784bd41871..5080cf908e55 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -22,6 +22,20 @@ export function toHsla(color) {
   return [h, `${s}%`, `${l}%`, a === undefined && hasAlpha(color) ? 1 : a]
 }
 
+export function withAlphaValue(color, alphaValue, defaultValue) {
+  if (_.isFunction(color)) {
+    return color({ opacityValue: alphaValue })
+  }
+
+  try {
+    const isHSL = color.startsWith('hsl')
+    const [i, j, k] = isHSL ? toHsla(color) : toRgba(color)
+    return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${alphaValue})`
+  } catch {
+    return defaultValue
+  }
+}
+
 export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {