Remove text color variable from marker pseudo class

tailwindlabs · Jun 13, 2022 · 579b30d · 579b30d
1 parent a79fbe4
commit 579b30d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -21,7 +21,26 @@ export let variantPlugins = {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
 
-    addVariant('marker', ['& *::marker', '&::marker'])
+    addVariant('marker', ({ container }) => {
+      let toRemove = ['--tw-text-opacity']
+
+      container.walkDecls((decl) => {
+        if (toRemove.includes(decl.prop)) {
+          decl.remove()
+
+          return
+        }
+
+        for (const varName of toRemove) {
+          if (decl.value.includes(`/ var(${varName})`)) {
+            decl.value = decl.value.replace(`/ var(${varName})`, '')
+          }
+        }
+      })
+
+      return ['& *::marker', '&::marker']
+    })
+
     addVariant('selection', ['& *::selection', '&::selection'])
 
     addVariant('file', '&::file-selector-button')

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
@@ -163,8 +163,8 @@ function applyVariant(variant, matches, context) {
 
       let container = postcss.root({ nodes: [rule.clone()] })
 
-      for (let [variantSort, variantFunction] of variantFunctionTuples) {
-        let clone = container.clone()
+      for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) {
+        let clone = containerFromArray ?? container.clone()
         let collectedFormats = []
 
         function prepareBackup() {
@@ -233,6 +233,10 @@ function applyVariant(variant, matches, context) {
               // reserving additional X places for these 'unknown' variants in between.
               variantSort | BigInt(idx << ruleWithVariant.length),
               variantFunction,
+
+              // If the clone has been modified we have to pass that back
+              // though so each rule can use the modified container
+              clone.clone(),
             ])
           }
           continue

diff --git a/tests/variants.test.css b/tests/variants.test.css
@@ -111,17 +111,15 @@
   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));
-}
 .marker\:text-lg::marker {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
+.marker\:text-red-500 *::marker {
+  color: rgb(239 68 68);
+}
 .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;