From 34fd0fb82aa574cddc5c7aa3ad7d1af5e3735e5d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 31 May 2022 13:15:14 -0400
Subject: [PATCH] Feature flag `matchVariant` API

---
 src/featureFlags.js          | 2 +-
 src/lib/setupContextUtils.js | 8 ++++++--
 tests/match-variants.test.js | 6 ++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/featureFlags.js b/src/featureFlags.js
index bcca9bb0bc94..b1293d1fbc52 100644
--- a/src/featureFlags.js
+++ b/src/featureFlags.js
@@ -7,7 +7,7 @@ let defaults = {
 
 let featureFlags = {
   future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
-  experimental: ['optimizeUniversalDefaults', 'variantGrouping'],
+  experimental: ['optimizeUniversalDefaults', 'variantGrouping', 'matchVariant'],
 }
 
 export function flagEnabled(config, flag) {
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 004b8f9756cb..dc7643da0182 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -4,6 +4,7 @@ import postcss from 'postcss'
 import dlv from 'dlv'
 import selectorParser from 'postcss-selector-parser'
 
+import { flagEnabled } from '../featureFlags.js'
 import transformThemeValue from '../util/transformThemeValue'
 import parseObjectStyles from '../util/parseObjectStyles'
 import prefixSelector from '../util/prefixSelector'
@@ -484,7 +485,10 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       insertInto(variantList, variantName, options)
       variantMap.set(variantName, variantFunctions)
     },
-    matchVariant: function (variants, options) {
+  }
+
+  if (flagEnabled(tailwindConfig, 'matchVariant')) {
+    api.matchVariant = function (variants, options) {
       for (let variant in variants) {
         for (let [k, v] of Object.entries(options?.values ?? {})) {
           api.addVariant(`${variant}-${k}`, variants[variant](v))
@@ -496,7 +500,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           options
         )
       }
-    },
+    }
   }
 
   return api
diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js
index 528a63e9ff94..8be808379267 100644
--- a/tests/match-variants.test.js
+++ b/tests/match-variants.test.js
@@ -2,6 +2,7 @@ import { run, html, css } from './util/run'
 
 test('partial arbitrary variants', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@@ -37,6 +38,7 @@ test('partial arbitrary variants', () => {
 
 test('partial arbitrary variants with at-rules', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@@ -75,6 +77,7 @@ test('partial arbitrary variants with at-rules', () => {
 
 test('partial arbitrary variants with at-rules and placeholder', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="potato-[yellow]:bg-yellow-200 potato-[baked]:w-3"></div> `,
@@ -113,6 +116,7 @@ test('partial arbitrary variants with at-rules and placeholder', () => {
 
 test('partial arbitrary variants with default values', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="tooltip-bottom:mt-2 tooltip-top:mb-2"></div>`,
@@ -155,6 +159,7 @@ test('partial arbitrary variants with default values', () => {
 
 test('matched variant values maintain the sort order they are registered in', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div
@@ -209,6 +214,7 @@ test('matched variant values maintain the sort order they are registered in', ()
 
 test('matchVariant can return an array of format strings from the function', () => {
   let config = {
+    experimental: { matchVariant: true },
     content: [
       {
         raw: html`<div class="test-[a,b,c]:underline"></div>`,