From fc6c9c9462d70e26a2086e6a0de4a75f440cac27 Mon Sep 17 00:00:00 2001
From: Petr Novak <petr.nmn.novak@gmail.com>
Date: Tue, 22 Feb 2022 16:04:52 +0100
Subject: [PATCH] Add color opacity for safelist with regex

---
 src/lib/setupContextUtils.js | 14 +++++++++++++-
 tests/safelist.test.js       | 17 +++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index c4740c46e113..3d6cb20d4a78 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -703,7 +703,7 @@ function registerPlugins(plugins, context) {
           : [util]
 
         for (let util of utils) {
-          for (let { pattern, variants = [] } of checks) {
+          for (let { pattern, variants = [], opacities = [] } of checks) {
             // RegExp with the /g flag are stateful, so let's reset the last
             // index pointer to reset the state.
             pattern.lastIndex = 0
@@ -722,6 +722,18 @@ function registerPlugins(plugins, context) {
                 content: variant + context.tailwindConfig.separator + util,
                 extension: 'html',
               })
+              for (let opacity of opacities) {
+                context.changedContent.push({
+                  content: variant + context.tailwindConfig.separator + util + '/' + opacity,
+                  extension: 'html',
+                })
+              }
+            }
+            for (let opacity of opacities) {
+              context.changedContent.push({
+                content: util + '/' + opacity,
+                extension: 'html',
+              })
             }
           }
         }
diff --git a/tests/safelist.test.js b/tests/safelist.test.js
index d81a6b796ae4..4cd11c9b2896 100644
--- a/tests/safelist.test.js
+++ b/tests/safelist.test.js
@@ -53,6 +53,7 @@ it('should safelist based on a pattern regex', () => {
       {
         pattern: /bg-(red)-(100|200)/,
         variants: ['hover'],
+        opacities: ['50'],
       },
     ],
   }
@@ -64,11 +65,19 @@ it('should safelist based on a pattern regex', () => {
         background-color: rgb(254 226 226 / var(--tw-bg-opacity));
       }
 
+      .bg-red-100\/50 {
+        background-color: rgb(254 226 226 / 0.5);
+      }
+
       .bg-red-200 {
         --tw-bg-opacity: 1;
         background-color: rgb(254 202 202 / var(--tw-bg-opacity));
       }
 
+      .bg-red-200\/50 {
+        background-color: rgb(254 202 202 / 0.5);
+      }
+
       .uppercase {
         text-transform: uppercase;
       }
@@ -78,10 +87,18 @@ it('should safelist based on a pattern regex', () => {
         background-color: rgb(254 226 226 / var(--tw-bg-opacity));
       }
 
+      .hover\:bg-red-100\/50:hover {
+        background-color: rgb(254 226 226 / 0.5);
+      }
+
       .hover\:bg-red-200:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(254 202 202 / var(--tw-bg-opacity));
       }
+
+      .hover\:bg-red-200\/50:hover {
+        background-color: rgb(254 202 202 / 0.5);
+      }
     `)
   })
 })