From 9a52f90fe9b6814aa8c156ccc348ef5b129f6a4e Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 21 Aug 2023 11:01:19 -0400
Subject: [PATCH] Remove grouping prototype
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This code has been sitting around for a while disabled and untested. And it does not work with the Oxide parser. So we’re gonna remove it.
---
 src/featureFlags.js                 |   6 +-
 src/lib/defaultExtractor.js         |  11 +-
 src/lib/generateRules.js            |  17 +-
 tests/variant-grouping.test.skip.js | 264 ----------------------------
 4 files changed, 6 insertions(+), 292 deletions(-)
 delete mode 100644 tests/variant-grouping.test.skip.js

diff --git a/src/featureFlags.js b/src/featureFlags.js
index 59cc48509..b77914739 100644
--- a/src/featureFlags.js
+++ b/src/featureFlags.js
@@ -17,11 +17,7 @@ export let featureFlags = {
     'relativeContentPathsByDefault',
     'logicalSiblingUtilities',
   ],
-  experimental: [
-    'optimizeUniversalDefaults',
-    'oxideParser',
-    // 'variantGrouping',
-  ],
+  experimental: ['optimizeUniversalDefaults', 'oxideParser'],
 }
 
 export function flagEnabled(config, flag) {
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 6382ca7cf..c56597e92 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -21,7 +21,6 @@ export function defaultExtractor(context) {
 
 function* buildRegExps(context) {
   let separator = context.tailwindConfig.separator
-  let variantGroupingEnabled = flagEnabled(context.tailwindConfig, 'variantGrouping')
   let prefix =
     context.tailwindConfig.prefix !== ''
       ? regex.optional(regex.pattern([/-?/, regex.escape(context.tailwindConfig.prefix)]))
@@ -103,15 +102,7 @@ function* buildRegExps(context) {
 
       prefix,
 
-      variantGroupingEnabled
-        ? regex.any([
-            // Or any of those things but grouped separated by commas
-            regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
-
-            // Arbitrary properties, constrained utilities, arbitrary values, etc…
-            utility,
-          ])
-        : utility,
+      utility,
     ])
   }
 
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index f19e7db8b..d6d1417b9 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -569,7 +569,7 @@ function* recordCandidates(matches, classCandidate) {
   }
 }
 
-function* resolveMatches(candidate, context, original = candidate) {
+function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
   let important = false
@@ -579,15 +579,6 @@ function* resolveMatches(candidate, context, original = candidate) {
     classCandidate = classCandidate.slice(1)
   }
 
-  if (flagEnabled(context.tailwindConfig, 'variantGrouping')) {
-    if (classCandidate.startsWith('(') && classCandidate.endsWith(')')) {
-      let base = variants.slice().reverse().join(separator)
-      for (let part of splitAtTopLevelOnly(classCandidate.slice(1, -1), ',')) {
-        yield* resolveMatches(base + separator + part, context, original)
-      }
-    }
-  }
-
   // TODO: Reintroduce this in ways that doesn't break on false positives
   // function sortAgainst(toSort, against) {
   //   return toSort.slice().sort((a, z) => {
@@ -776,7 +767,7 @@ function* resolveMatches(candidate, context, original = candidate) {
       match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
 
       // Apply final format selector
-      match = applyFinalFormat(match, { context, candidate, original })
+      match = applyFinalFormat(match, { context, candidate })
 
       // Skip rules with invalid selectors
       // This will cause the candidate to be added to the "not class"
@@ -790,7 +781,7 @@ function* resolveMatches(candidate, context, original = candidate) {
   }
 }
 
-function applyFinalFormat(match, { context, candidate, original }) {
+function applyFinalFormat(match, { context, candidate }) {
   if (!match[0].collectedFormats) {
     return match
   }
@@ -801,7 +792,7 @@ function applyFinalFormat(match, { context, candidate, original }) {
   try {
     finalFormat = formatVariantSelector(match[0].collectedFormats, {
       context,
-      candidate: original,
+      candidate,
     })
   } catch {
     // The format selector we produced is invalid
diff --git a/tests/variant-grouping.test.skip.js b/tests/variant-grouping.test.skip.js
deleted file mode 100644
index 0cb6b72e8..000000000
--- a/tests/variant-grouping.test.skip.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import { run, html, css } from './util/run'
-
-// TODO: Remove this once we enable this by default
-it('should not generate nested selectors if the feature flag is not enabled', () => {
-  let config = {
-    content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .italic {
-        font-style: italic;
-      }
-      .underline {
-        text-decoration-line: underline;
-      }
-    `)
-  })
-})
-
-it('should be possible to group variants', () => {
-  let config = {
-    experimental: { variantGrouping: true, oxideParser: false },
-    content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      @media (min-width: 768px) {
-        .md\:\(underline\,italic\) {
-          font-style: italic;
-          text-decoration-line: underline;
-        }
-      }
-    `)
-  })
-})
-
-it('should be possible to group using constrained and arbitrary variants together', () => {
-  let config = {
-    experimental: { variantGrouping: true, oxideParser: false },
-    content: [
-      {
-        raw: html`<div
-          class="dark:[@supports(hover:hover)]:hover:[&>*]:([--potato:baked],bg-[#0088cc])"
-        ></div>`,
-      },
-    ],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      @media (prefers-color-scheme: dark) {
-        @supports (hover: 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;
-          }
-        }
-      }
-    `)
-  })
-})
-
-it('should be possible to group multiple variants', () => {
-  let config = {
-    experimental: { variantGrouping: true, oxideParser: false },
-    content: [{ raw: html`<div class="md:dark:(underline,italic)"></div>` }],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      @media (min-width: 768px) {
-        @media (prefers-color-scheme: dark) {
-          .md\:dark\:\(underline\,italic\) {
-            font-style: italic;
-            text-decoration-line: underline;
-          }
-        }
-      }
-    `)
-  })
-})
-
-it('should be possible to group nested grouped variants', () => {
-  let config = {
-    experimental: { variantGrouping: true, oxideParser: false },
-    content: [{ raw: html`<div class="md:(underline,italic,hover:(uppercase,font-bold))"></div>` }],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      @media (min-width: 768px) {
-        .md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\) {
-          font-style: italic;
-          text-decoration-line: underline;
-        }
-        .md\:\(underline\,italic\,hover\:\(uppercase\,font-bold\)\):hover {
-          text-transform: uppercase;
-          font-weight: 700;
-        }
-      }
-    `)
-  })
-})
-
-it('should be possible to use nested multiple grouped variants', () => {
-  let config = {
-    experimental: { variantGrouping: true, oxideParser: false },
-    content: [
-      {
-        raw: html`<div class="md:(text-black,dark:(text-white,hover:focus:text-gray-100))"></div>`,
-      },
-    ],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      @media (min-width: 768px) {
-        .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\,dark\:\(text-white\,hover\:focus\:text-gray-100\)\) {
-            --tw-text-opacity: 1;
-            color: rgb(255 255 255 / var(--tw-text-opacity));
-          }
-          .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));
-          }
-        }
-      }
-    `)
-  })
-})
-
-it('should be possible to mix and match nesting and different variant combinations', () => {
-  let config = {
-    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))"
-        ></div>`,
-      },
-    ],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      @media (min-width: 768px) {
-        .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\,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\,dark\:\(text-white\,hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\+1\)\]\:text-gray-100\)\):nth-child(
-                odd
-              ):hover
-              > * {
-              --tw-text-opacity: 1;
-              color: rgb(243 244 246 / var(--tw-text-opacity));
-            }
-          }
-        }
-      }
-    `)
-  })
-})
-
-it('should group with variants defined in external plugins', () => {
-  let config = {
-    experimental: { variantGrouping: true, oxideParser: false },
-    content: [
-      {
-        raw: html`
-          <div class="ui-active:(bg-black,text-white) ui-selected:(bg-indigo-500,underline)"></div>
-        `,
-      },
-    ],
-    corePlugins: { preflight: false },
-    plugins: [
-      ({ addVariant }) => {
-        addVariant('ui-active', ['&[data-ui-state~="active"]', '[data-ui-state~="active"] &'])
-        addVariant('ui-selected', ['&[data-ui-state~="selected"]', '[data-ui-state~="selected"] &'])
-      },
-    ],
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .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));
-      }
-      .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;
-      }
-    `)
-  })
-})