From 3e3c101afb04329f972e9ce80adb6f4f534c15ca Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sun, 28 Mar 2021 12:08:40 -0400
Subject: [PATCH 1/3] Fallback to non variant matches when no matching variant
 exists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Svelte’s dynamic class syntax looks like this:
<h1 class:text-blue-500={shouldBeBlue}></h1>

We were picking up `class:text-blue-500` as a variant. However `class` is not a registered variant. In this case we were discarding the already matched rules for text-blue-500. In this case we want to match them anyway.
---
 src/lib/generateRules.js | 2 +-
 tests/variants.test.css  | 4 ++++
 tests/variants.test.html | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index fe48a0d..7f2089a 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -146,7 +146,7 @@ function applyVariant(variant, matches, context) {
     return result
   }
 
-  return []
+  return matches
 }
 
 function parseRules(rule, cache, options = {}) {
diff --git a/tests/variants.test.css b/tests/variants.test.css
index e4de157..29e9ebb 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -7,6 +7,10 @@
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
 }
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgba(59, 130, 246, var(--tw-text-opacity));
+}
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
diff --git a/tests/variants.test.html b/tests/variants.test.html
index 29c0eab..26ff570 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -64,5 +64,8 @@
     <div class="lg:dark:shadow-md"></div>
     <div class="xl:dark:disabledshadow-md"></div>
     <div class="2xl:dark:motion-safe:focus-within:shadow-md"></div>
+
+    <!-- Things that look like variants but are not -->
+    <h1 class:text-blue-500={shouldBeBlue}></h1>
   </body>
 </html>

From b2e084062b6750afc69bfc6545639cba3171b685 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sun, 28 Mar 2021 12:06:44 -0400
Subject: [PATCH 2/3] Refactor

---
 src/lib/generateRules.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index 7f2089a..da2f4e1 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -274,7 +274,7 @@ function generateRules(candidates, context) {
     }
 
     if (context.classCache.has(candidate)) {
-      allRules.push(context.classCache.get(candidate))
+      allRules.push(...context.classCache.get(candidate))
       continue
     }
 
@@ -286,10 +286,10 @@ function generateRules(candidates, context) {
     }
 
     context.classCache.set(candidate, matches)
-    allRules.push(matches)
+    allRules.push(...matches)
   }
 
-  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
+  return allRules.map(([{ sort, layer, options }, rule]) => {
     if (options.respectImportant) {
       if (context.tailwindConfig.important === true) {
         rule.walkDecls((d) => {

From 84404ceb25a9efb7afca2b046ba2a6dee2f68fe3 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sun, 28 Mar 2021 12:08:03 -0400
Subject: [PATCH 3/3] =?UTF-8?q?Don=E2=80=99t=20generate=20duplicate=20rule?=
 =?UTF-8?q?=20implementations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If multiple candidates resolved to the same rule the properties would get added more than once to the same rule.

For instance: class:text-blue-500 class1:text-blue-500 class2:text-blue-500 results in .text-blue-500 having the properties set 3 times.
---
 src/lib/generateRules.js | 12 ++++++++++++
 tests/variants.test.html |  2 ++
 2 files changed, 14 insertions(+)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index da2f4e1..134734e 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -267,6 +267,7 @@ function inKeyframes(rule) {
 
 function generateRules(candidates, context) {
   let allRules = []
+  let allSelectors = new Set()
 
   for (let candidate of candidates) {
     if (context.notClassCache.has(candidate)) {
@@ -285,8 +286,19 @@ function generateRules(candidates, context) {
       continue
     }
 
+    matches = matches.filter(([_, rule]) => {
+      return !rule.selector
+          || !allSelectors.has(rule.selector)
+    })
+
     context.classCache.set(candidate, matches)
     allRules.push(...matches)
+
+    matches.forEach(([_, rule]) => {
+      if (rule.selector) {
+        allSelectors.add(rule.selector)
+      }
+    })
   }
 
   return allRules.map(([{ sort, layer, options }, rule]) => {
diff --git a/tests/variants.test.html b/tests/variants.test.html
index 26ff570..3ba6a8b 100644
--- a/tests/variants.test.html
+++ b/tests/variants.test.html
@@ -67,5 +67,7 @@
 
     <!-- Things that look like variants but are not -->
     <h1 class:text-blue-500={shouldBeBlue}></h1>
+    <h1 class1:text-blue-500={shouldBeBlue}></h1>
+    <h1 class2:text-blue-500={shouldBeBlue}></h1>
   </body>
 </html>