diff --git a/tests/variant-grouping.test.skip.js b/tests/variant-grouping.test.skip.js
index aba113783..0cb6b72e8 100644
--- a/tests/variant-grouping.test.skip.js
+++ b/tests/variant-grouping.test.skip.js
@@ -26,7 +26,7 @@ it('should not generate nested selectors if the feature flag is not enabled', ()
 
 it('should be possible to group variants', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
     corePlugins: { preflight: false },
     plugins: [],
@@ -39,7 +39,7 @@ it('should be possible to group variants', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 768px) {
-        .md\:\(underline\2c italic\) {
+        .md\:\(underline\,italic\) {
           font-style: italic;
           text-decoration-line: underline;
         }
@@ -50,7 +50,7 @@ it('should be possible to group variants', () => {
 
 it('should be possible to group using constrained and arbitrary variants together', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [
       {
         raw: html`<div
@@ -70,9 +70,8 @@ it('should be possible to group using constrained and arbitrary variants togethe
     expect(result.css).toMatchFormattedCss(css`
       @media (prefers-color-scheme: dark) {
         @supports (hover: hover) {
-          .dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\2c
-            bg-\[\#0088cc\]\)
-            > *:hover {
+          .dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\,bg-\[\#0088cc\]\)
+            > :hover {
             --tw-bg-opacity: 1;
             background-color: rgb(0 136 204 / var(--tw-bg-opacity));
             --potato: baked;
@@ -85,7 +84,7 @@ it('should be possible to group using constrained and arbitrary variants togethe
 
 it('should be possible to group multiple variants', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [{ raw: html`<div class="md:dark:(underline,italic)"></div>` }],
     corePlugins: { preflight: false },
     plugins: [],
@@ -99,7 +98,7 @@ it('should be possible to group multiple variants', () => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 768px) {
         @media (prefers-color-scheme: dark) {
-          .md\:dark\:\(underline\2c italic\) {
+          .md\:dark\:\(underline\,italic\) {
             font-style: italic;
             text-decoration-line: underline;
           }
@@ -111,7 +110,7 @@ it('should be possible to group multiple variants', () => {
 
 it('should be possible to group nested grouped variants', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [{ raw: html`<div class="md:(underline,italic,hover:(uppercase,font-bold))"></div>` }],
     corePlugins: { preflight: false },
     plugins: [],
@@ -124,13 +123,13 @@ it('should be possible to group nested grouped variants', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 768px) {
-        .md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) {
+        .md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\) {
           font-style: italic;
           text-decoration-line: underline;
         }
-        .md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\):hover {
-          font-weight: 700;
+        .md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\):hover {
           text-transform: uppercase;
+          font-weight: 700;
         }
       }
     `)
@@ -139,7 +138,7 @@ it('should be possible to group nested grouped variants', () => {
 
 it('should be possible to use nested multiple grouped variants', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [
       {
         raw: html`<div class="md:(text-black,dark:(text-white,hover:focus:text-gray-100))"></div>`,
@@ -156,16 +155,16 @@ it('should be possible to use nested multiple grouped variants', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 768px) {
-        .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
+        .md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
           --tw-text-opacity: 1;
           color: rgb(0 0 0 / var(--tw-text-opacity));
         }
         @media (prefers-color-scheme: dark) {
-          .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
+          .md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
             --tw-text-opacity: 1;
             color: rgb(255 255 255 / var(--tw-text-opacity));
           }
-          .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\):focus:hover {
+          .md\:\(text-black\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\):focus:hover {
             --tw-text-opacity: 1;
             color: rgb(243 244 246 / var(--tw-text-opacity));
           }
@@ -177,11 +176,11 @@ it('should be possible to use nested multiple grouped variants', () => {
 
 it('should be possible to mix and match nesting and different variant combinations', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [
       {
         raw: html`<div
-          class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n=1)]:text-gray-100))"
+          class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n+1)]:text-gray-100))"
         ></div>`,
       },
     ],
@@ -196,26 +195,20 @@ it('should be possible to mix and match nesting and different variant combinatio
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 768px) {
-        .md\:\[\&\>\*\]\:\(text-black\2c
-          dark\:\(text-white\2c
-          hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
+        .md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\)
           > * {
           --tw-text-opacity: 1;
           color: rgb(0 0 0 / var(--tw-text-opacity));
         }
         @media (prefers-color-scheme: dark) {
-          .md\:\[\&\>\*\]\:\(text-black\2c
-            dark\:\(text-white\2c
-            hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
+          .md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\)
             > * {
             --tw-text-opacity: 1;
             color: rgb(255 255 255 / var(--tw-text-opacity));
           }
           @supports (color: green) {
-            .md\:\[\&\>\*\]\:\(text-black\2c
-              dark\:\(text-white\2c
-              hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\):nth-child(
-                2n=1
+            .md\:\[\&\>\*\]\:\(text-black\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\):nth-child(
+                odd
               ):hover
               > * {
               --tw-text-opacity: 1;
@@ -230,7 +223,7 @@ it('should be possible to mix and match nesting and different variant combinatio
 
 it('should group with variants defined in external plugins', () => {
   let config = {
-    experimental: 'all',
+    experimental: { variantGrouping: true, oxideParser: false },
     content: [
       {
         raw: html`
@@ -253,24 +246,15 @@ it('should group with variants defined in external plugins', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .ui-active\:\(bg-black\2c text-white\)[data-ui-state~='active'] {
+      .ui-active\:\(bg-black\,text-white\)[data-ui-state~='active'],
+      [data-ui-state~='active'] .ui-active\:\(bg-black\,text-white\) {
         --tw-bg-opacity: 1;
         background-color: rgb(0 0 0 / var(--tw-bg-opacity));
         --tw-text-opacity: 1;
         color: rgb(255 255 255 / var(--tw-text-opacity));
       }
-      [data-ui-state~='active'] .ui-active\:\(bg-black\2c text-white\) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-        --tw-text-opacity: 1;
-        color: rgb(255 255 255 / var(--tw-text-opacity));
-      }
-      .ui-selected\:\(bg-indigo-500\2c underline\)[data-ui-state~='selected'] {
-        --tw-bg-opacity: 1;
-        background-color: rgb(99 102 241 / var(--tw-bg-opacity));
-        text-decoration-line: underline;
-      }
-      [data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\2c underline\) {
+      .ui-selected\:\(bg-indigo-500\,underline\)[data-ui-state~='selected'],
+      [data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\,underline\) {
         --tw-bg-opacity: 1;
         background-color: rgb(99 102 241 / var(--tw-bg-opacity));
         text-decoration-line: underline;