Properly support colors as closures with ring utilities

__tests__/fixtures/tailwind-output-flagged.css

@@ -20972,8 +20972,7 @@ video {
 }
 
 .ring-transparent {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .ring-current {
@@ -21391,8 +21390,7 @@ video {
 }
 
 .focus-within\:ring-transparent:focus-within {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .focus-within\:ring-current:focus-within {
@@ -21810,8 +21808,7 @@ video {
 }
 
 .focus\:ring-transparent:focus {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .focus\:ring-current:focus {
@@ -49785,8 +49782,7 @@ video {
   }
 
   .sm\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:ring-current {
@@ -50204,8 +50200,7 @@ video {
   }
 
   .sm\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:focus-within\:ring-current:focus-within {
@@ -50623,8 +50618,7 @@ video {
   }
 
   .sm\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:focus\:ring-current:focus {
@@ -78568,8 +78562,7 @@ video {
   }
 
   .md\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:ring-current {
@@ -78987,8 +78980,7 @@ video {
   }
 
   .md\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:focus-within\:ring-current:focus-within {
@@ -79406,8 +79398,7 @@ video {
   }
 
   .md\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:focus\:ring-current:focus {
@@ -107351,8 +107342,7 @@ video {
   }
 
   .lg\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:ring-current {
@@ -107770,8 +107760,7 @@ video {
   }
 
   .lg\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:focus-within\:ring-current:focus-within {
@@ -108189,8 +108178,7 @@ video {
   }
 
   .lg\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:focus\:ring-current:focus {
@@ -136134,8 +136122,7 @@ video {
   }
 
   .xl\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:ring-current {
@@ -136553,8 +136540,7 @@ video {
   }
 
   .xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:focus-within\:ring-current:focus-within {
@@ -136972,8 +136958,7 @@ video {
   }
 
   .xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:focus\:ring-current:focus {
@@ -164917,8 +164902,7 @@ video {
   }
 
   .\32xl\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:ring-current {
@@ -165336,8 +165320,7 @@ video {
   }
 
   .\32xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:focus-within\:ring-current:focus-within {
@@ -165755,8 +165738,7 @@ video {
   }
 
   .\32xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:focus\:ring-current:focus {

__tests__/fixtures/tailwind-output-important.css

@@ -20972,8 +20972,7 @@ video {
 }
 
 .ring-transparent {
-  --ring-opacity: 0 !important;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  --ring-color: transparent !important;
 }
 
 .ring-current {
@@ -21391,8 +21390,7 @@ video {
 }
 
 .focus-within\:ring-transparent:focus-within {
-  --ring-opacity: 0 !important;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  --ring-color: transparent !important;
 }
 
 .focus-within\:ring-current:focus-within {
@@ -21810,8 +21808,7 @@ video {
 }
 
 .focus\:ring-transparent:focus {
-  --ring-opacity: 0 !important;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  --ring-color: transparent !important;
 }
 
 .focus\:ring-current:focus {
@@ -49785,8 +49782,7 @@ video {
   }
 
   .sm\:ring-transparent {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .sm\:ring-current {
@@ -50204,8 +50200,7 @@ video {
   }
 
   .sm\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .sm\:focus-within\:ring-current:focus-within {
@@ -50623,8 +50618,7 @@ video {
   }
 
   .sm\:focus\:ring-transparent:focus {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .sm\:focus\:ring-current:focus {
@@ -78568,8 +78562,7 @@ video {
   }
 
   .md\:ring-transparent {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .md\:ring-current {
@@ -78987,8 +78980,7 @@ video {
   }
 
   .md\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .md\:focus-within\:ring-current:focus-within {
@@ -79406,8 +79398,7 @@ video {
   }
 
   .md\:focus\:ring-transparent:focus {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .md\:focus\:ring-current:focus {
@@ -107351,8 +107342,7 @@ video {
   }
 
   .lg\:ring-transparent {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .lg\:ring-current {
@@ -107770,8 +107760,7 @@ video {
   }
 
   .lg\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .lg\:focus-within\:ring-current:focus-within {
@@ -108189,8 +108178,7 @@ video {
   }
 
   .lg\:focus\:ring-transparent:focus {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .lg\:focus\:ring-current:focus {
@@ -136134,8 +136122,7 @@ video {
   }
 
   .xl\:ring-transparent {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .xl\:ring-current {
@@ -136553,8 +136540,7 @@ video {
   }
 
   .xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .xl\:focus-within\:ring-current:focus-within {
@@ -136972,8 +136958,7 @@ video {
   }
 
   .xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .xl\:focus\:ring-current:focus {
@@ -164917,8 +164902,7 @@ video {
   }
 
   .\32xl\:ring-transparent {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .\32xl\:ring-current {
@@ -165336,8 +165320,7 @@ video {
   }
 
   .\32xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .\32xl\:focus-within\:ring-current:focus-within {
@@ -165755,8 +165738,7 @@ video {
   }
 
   .\32xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0 !important;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+    --ring-color: transparent !important;
   }
 
   .\32xl\:focus\:ring-current:focus {

__tests__/fixtures/tailwind-output-no-color-opacity.css

@@ -19126,8 +19126,7 @@ video {
 }
 
 .ring-transparent {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .ring-current {
@@ -19545,8 +19544,7 @@ video {
 }
 
 .focus-within\:ring-transparent:focus-within {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .focus-within\:ring-current:focus-within {
@@ -19964,8 +19962,7 @@ video {
 }
 
 .focus\:ring-transparent:focus {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .focus\:ring-current:focus {
@@ -45383,8 +45380,7 @@ video {
   }
 
   .sm\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:ring-current {
@@ -45802,8 +45798,7 @@ video {
   }
 
   .sm\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:focus-within\:ring-current:focus-within {
@@ -46221,8 +46216,7 @@ video {
   }
 
   .sm\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:focus\:ring-current:focus {
@@ -71610,8 +71604,7 @@ video {
   }
 
   .md\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:ring-current {
@@ -72029,8 +72022,7 @@ video {
   }
 
   .md\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:focus-within\:ring-current:focus-within {
@@ -72448,8 +72440,7 @@ video {
   }
 
   .md\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:focus\:ring-current:focus {
@@ -97837,8 +97828,7 @@ video {
   }
 
   .lg\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:ring-current {
@@ -98256,8 +98246,7 @@ video {
   }
 
   .lg\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:focus-within\:ring-current:focus-within {
@@ -98675,8 +98664,7 @@ video {
   }
 
   .lg\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:focus\:ring-current:focus {
@@ -124064,8 +124052,7 @@ video {
   }
 
   .xl\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:ring-current {
@@ -124483,8 +124470,7 @@ video {
   }
 
   .xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:focus-within\:ring-current:focus-within {
@@ -124902,8 +124888,7 @@ video {
   }
 
   .xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:focus\:ring-current:focus {
@@ -150291,8 +150276,7 @@ video {
   }
 
   .\32xl\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:ring-current {
@@ -150710,8 +150694,7 @@ video {
   }
 
   .\32xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:focus-within\:ring-current:focus-within {
@@ -151129,8 +151112,7 @@ video {
   }
 
   .\32xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:focus\:ring-current:focus {

__tests__/fixtures/tailwind-output.css

@@ -20972,8 +20972,7 @@ video {
 }
 
 .ring-transparent {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .ring-current {
@@ -21391,8 +21390,7 @@ video {
 }
 
 .focus-within\:ring-transparent:focus-within {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .focus-within\:ring-current:focus-within {
@@ -21810,8 +21808,7 @@ video {
 }
 
 .focus\:ring-transparent:focus {
-  --ring-opacity: 0;
-  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  --ring-color: transparent;
 }
 
 .focus\:ring-current:focus {
@@ -49785,8 +49782,7 @@ video {
   }
 
   .sm\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:ring-current {
@@ -50204,8 +50200,7 @@ video {
   }
 
   .sm\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:focus-within\:ring-current:focus-within {
@@ -50623,8 +50618,7 @@ video {
   }
 
   .sm\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .sm\:focus\:ring-current:focus {
@@ -78568,8 +78562,7 @@ video {
   }
 
   .md\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:ring-current {
@@ -78987,8 +78980,7 @@ video {
   }
 
   .md\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:focus-within\:ring-current:focus-within {
@@ -79406,8 +79398,7 @@ video {
   }
 
   .md\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .md\:focus\:ring-current:focus {
@@ -107351,8 +107342,7 @@ video {
   }
 
   .lg\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:ring-current {
@@ -107770,8 +107760,7 @@ video {
   }
 
   .lg\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:focus-within\:ring-current:focus-within {
@@ -108189,8 +108178,7 @@ video {
   }
 
   .lg\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .lg\:focus\:ring-current:focus {
@@ -136134,8 +136122,7 @@ video {
   }
 
   .xl\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:ring-current {
@@ -136553,8 +136540,7 @@ video {
   }
 
   .xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:focus-within\:ring-current:focus-within {
@@ -136972,8 +136958,7 @@ video {
   }
 
   .xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .xl\:focus\:ring-current:focus {
@@ -164917,8 +164902,7 @@ video {
   }
 
   .\32xl\:ring-transparent {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:ring-current {
@@ -165336,8 +165320,7 @@ video {
   }
 
   .\32xl\:focus-within\:ring-transparent:focus-within {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:focus-within\:ring-current:focus-within {
@@ -165755,8 +165738,7 @@ video {
   }
 
   .\32xl\:focus\:ring-transparent:focus {
-    --ring-opacity: 0;
-    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+    --ring-color: transparent;
   }
 
   .\32xl\:focus\:ring-current:focus {

__tests__/plugins/ringColor.test.js

@@ -0,0 +1,29 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/ringColor'
+
+test('defining color as a function', () => {
+  const config = {
+    theme: {
+      ringColor: {
+        black: ({ opacityVariable: _ }) => 'black',
+      },
+    },
+    variants: {
+      ringColor: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.ring-black': {
+          '--ring-opacity': '1',
+          '--ring-color': 'black',
+        },
+      },
+      [],
+    ],
+  ])
+})

__tests__/plugins/ringOffsetColor.test.js

@@ -0,0 +1,28 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/ringOffsetColor'
+
+test('defining color as a function', () => {
+  const config = {
+    theme: {
+      ringOffsetColor: {
+        black: ({ opacityVariable: _ }) => 'black',
+      },
+    },
+    variants: {
+      ringOffsetColor: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.ring-offset-black': {
+          '--ring-offset-color': 'black',
+        },
+      },
+      [],
+    ],
+  ])
+})

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'))
   }
 }

src/plugins/ringOffsetColor.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import flattenColorPalette from '../util/flattenColorPalette'
 import nameClass from '../util/nameClass'
+import toColorValue from '../util/toColorValue'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
@@ -10,7 +11,7 @@ export default function () {
         return [
           nameClass('ring-offset', modifier),
           {
-            '--ring-offset-color': value,
+            '--ring-offset-color': toColorValue(value),
           },
         ]
       })