From 7db4c3a403ef1feedd9cd0cfcd388aaa08591194 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 25 Jun 2021 12:02:31 -0400
Subject: [PATCH] Invalidate candidates with bad variants up front

---
 src/jit/lib/generateRules.js                | 5 +++++
 tests/jit/backdrop-filter-utilities.test.js | 2 +-
 tests/jit/box-shadow-utilities.test.js      | 2 +-
 tests/jit/filter-utilities.test.js          | 2 +-
 tests/jit/ring-utilities.test.js            | 2 +-
 tests/jit/transform-utilities.test.js       | 2 +-
 6 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/jit/lib/generateRules.js b/src/jit/lib/generateRules.js
index 4b8b5d377..6585b05b3 100644
--- a/src/jit/lib/generateRules.js
+++ b/src/jit/lib/generateRules.js
@@ -201,6 +201,11 @@ function splitWithSeparator(input, separator) {
 function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
+
+  if (!variants.every((variant) => context.variantMap.has(variant))) {
+    return []
+  }
+
   let important = false
 
   if (classCandidate.startsWith('!')) {
diff --git a/tests/jit/backdrop-filter-utilities.test.js b/tests/jit/backdrop-filter-utilities.test.js
index 25f395f00..4e734a072 100644
--- a/tests/jit/backdrop-filter-utilities.test.js
+++ b/tests/jit/backdrop-filter-utilities.test.js
@@ -156,7 +156,7 @@ test('with variants', async () => {
     mode: 'jit',
     purge: [
       {
-        raw: '<div class="backdrop-brightness-100 hover:backdrop-brightness-150 backdrop-contrast-50 lg:backdrop-contrast-100"></div>',
+        raw: '<div class="bad-variant:backdrop-brightness-100 backdrop-brightness-100 hover:backdrop-brightness-150 backdrop-contrast-50 lg:backdrop-contrast-100"></div>',
       },
     ],
     corePlugins: ['backdropFilter', 'backdropBrightness', 'backdropContrast'],
diff --git a/tests/jit/box-shadow-utilities.test.js b/tests/jit/box-shadow-utilities.test.js
index 0bbcac405..0a125568a 100644
--- a/tests/jit/box-shadow-utilities.test.js
+++ b/tests/jit/box-shadow-utilities.test.js
@@ -15,7 +15,7 @@ test('basic ring width', async () => {
     mode: 'jit',
     purge: [
       {
-        raw: '<div class="shadow shadow-md shadow-lg"></div>',
+        raw: '<div class="bad-variant:shadow shadow shadow-md shadow-lg"></div>',
       },
     ],
     corePlugins: ['boxShadow'],
diff --git a/tests/jit/filter-utilities.test.js b/tests/jit/filter-utilities.test.js
index 5f8484a0d..7cd30f633 100644
--- a/tests/jit/filter-utilities.test.js
+++ b/tests/jit/filter-utilities.test.js
@@ -156,7 +156,7 @@ test('with variants', async () => {
     mode: 'jit',
     purge: [
       {
-        raw: '<div class="brightness-100 hover:brightness-150 contrast-50 lg:contrast-100"></div>',
+        raw: '<div class="bad-variant:brightness-100 brightness-100 hover:brightness-150 contrast-50 lg:contrast-100"></div>',
       },
     ],
     corePlugins: ['filter', 'brightness', 'contrast'],
diff --git a/tests/jit/ring-utilities.test.js b/tests/jit/ring-utilities.test.js
index d803a369e..0a46ae30f 100644
--- a/tests/jit/ring-utilities.test.js
+++ b/tests/jit/ring-utilities.test.js
@@ -15,7 +15,7 @@ test('basic ring width', async () => {
     mode: 'jit',
     purge: [
       {
-        raw: '<div class="ring ring-2 ring-4 ring-blue-500 ring-offset-2 ring-offset-blue-100"></div>',
+        raw: '<div class="bad-variant:ring ring ring-2 ring-4 ring-blue-500 ring-offset-2 ring-offset-blue-100"></div>',
       },
     ],
     corePlugins: ['ringColor', 'ringOffsetColor', 'ringOffsetWidth', 'ringOpacity', 'ringWidth'],
diff --git a/tests/jit/transform-utilities.test.js b/tests/jit/transform-utilities.test.js
index 66463847b..11562f024 100644
--- a/tests/jit/transform-utilities.test.js
+++ b/tests/jit/transform-utilities.test.js
@@ -156,7 +156,7 @@ test('with variants', async () => {
     mode: 'jit',
     purge: [
       {
-        raw: '<div class="scale-50 hover:scale-100 translate-x-4 lg:translate-x-6"></div>',
+        raw: '<div class="bad-variant:scale-50 scale-50 hover:scale-100 translate-x-4 lg:translate-x-6"></div>',
       },
     ],
     corePlugins: ['transform', 'scale', 'translate'],