From cfbf1cd155f50a15a1f83a8990a9d07d7c72c7c3 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 14 Jun 2022 09:57:03 -0400
Subject: [PATCH] Remove text color variable from marker pseudo class

wip
---
 src/corePlugins.js      | 15 ++++++++++++++-
 tests/variants.test.css |  6 ++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 60e47ec056f8..5781905db4b5 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -14,6 +14,7 @@ import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
 import { normalizeScreens } from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
+import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
 
 export let variantPlugins = {
@@ -21,7 +22,19 @@ export let variantPlugins = {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
 
-    addVariant('marker', ['& *::marker', '&::marker'])
+    addVariant('marker', [
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '& *::marker'
+      },
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '&::marker'
+      },
+    ])
+
     addVariant('selection', ['& *::selection', '&::selection'])
 
     addVariant('file', '&::file-selector-button')
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 535ffa23177e..56131baba1d8 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -112,16 +112,14 @@
   line-height: 1.75rem;
 }
 .marker\:text-red-500 *::marker {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(239 68 68);
 }
 .marker\:text-lg::marker {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
 .marker\:text-red-500::marker {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(239 68 68);
 }
 .selection\:bg-blue-500 *::selection {
   --tw-bg-opacity: 1;