Remove text opacity CSS variables from ::marker (#8622)

* Refactor

* Allow parallel variant fns to mutate the container

* Remove text color variable from marker pseudo class

wip

* Update changelog

tests/parallel-variants.test.js

@@ -85,3 +85,52 @@ test('parallel variants can be generated using a function that returns parallel
     `)
   })
 })
+
+test('a function that returns parallel variants can modify the container', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div
+          class="hover:test:font-black test:font-bold test:font-medium font-normal"
+        ></div>`,
+      },
+    ],
+    plugins: [
+      function test({ addVariant }) {
+        addVariant('test', ({ container }) => {
+          container.walkDecls((decl) => {
+            decl.value = `calc(0 + ${decl.value})`
+          })
+
+          return ['& *::test', '&::test']
+        })
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .font-normal {
+        font-weight: 400;
+      }
+      .test\:font-bold *::test {
+        font-weight: calc(0 + 700);
+      }
+      .test\:font-medium *::test {
+        font-weight: calc(0 + 500);
+      }
+      .test\:font-bold::test {
+        font-weight: calc(0 + 700);
+      }
+      .test\:font-medium::test {
+        font-weight: calc(0 + 500);
+      }
+      .hover\:test\:font-black *:hover::test {
+        font-weight: calc(0 + 900);
+      }
+      .hover\:test\:font-black:hover::test {
+        font-weight: calc(0 + 900);
+      }
+    `)
+  })
+})

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;

tests/variants.test.js

@@ -485,8 +485,7 @@ test('returning non-strings and non-selectors in addVariant', () => {
 
         addVariant('peer-aria-expanded-2', ({ modifySelectors, separator }) => {
           let nodes = modifySelectors(
-            ({ className }) =>
-              `.peer[aria-expanded="false"] ~ .${e(`peer-aria-expanded${separator}${className}`)}`
+            ({ className }) => `.${e(`peer-aria-expanded-2${separator}${className}`)}`
           )
 
           return [