Properly support colors as closures with ring utilities

src/plugins/ringColor.js

@@ -1,32 +1,26 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import nameClass from '../util/nameClass'
-import { toRgba } from '../util/withAlphaVariable'
+import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
     const colors = flattenColorPalette(theme('ringColor'))
+
+    const getProperties = (value) => {
+      return withAlphaVariable({
+        color: value,
+        property: '--ring-color',
+        variable: '--ring-opacity',
+      })
+    }
+
     const utilities = _.fromPairs(
       _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
-        try {
-          const [r, g, b, a] = toRgba(value)
-          return [
-            nameClass('ring', modifier),
-            {
-              '--ring-opacity': a === undefined ? '1' : a,
-              '--ring-color': `rgba(${r}, ${g}, ${b}, var(--ring-opacity))`,
-            },
-          ]
-        } catch (_error) {
-          return [
-            nameClass('ring', modifier),
-            {
-              '--ring-color': value,
-            },
-          ]
-        }
+        return [nameClass('ring', modifier), getProperties(value)]
       })
     )
+
     addUtilities(utilities, variants('ringColor'))
   }
 }