Fallback to non variant matches when no matching variant exists

src/lib/generateRules.js

@@ -146,7 +146,7 @@ function applyVariant(variant, matches, context) {
     return result
   }
 
-  return []
+  return matches
 }
 
 function parseRules(rule, cache, options = {}) {
@@ -267,14 +267,15 @@ function inKeyframes(rule) {
 
 function generateRules(candidates, context) {
   let allRules = []
+  let allSelectors = new Set()
 
   for (let candidate of candidates) {
     if (context.notClassCache.has(candidate)) {
       continue
     }
 
     if (context.classCache.has(candidate)) {
-      allRules.push(context.classCache.get(candidate))
+      allRules.push(...context.classCache.get(candidate))
       continue
     }
 
@@ -285,11 +286,22 @@ function generateRules(candidates, context) {
       continue
     }
 
+    matches = matches.filter(([_, rule]) => {
+      return !rule.selector
+          || !allSelectors.has(rule.selector)
+    })
+
     context.classCache.set(candidate, matches)
-    allRules.push(matches)
+    allRules.push(...matches)
+
+    matches.forEach(([_, rule]) => {
+      if (rule.selector) {
+        allSelectors.add(rule.selector)
+      }
+    })
   }
 
-  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) => {

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),

tests/variants.test.html

@@ -64,5 +64,10 @@
     <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>
+    <h1 class1:text-blue-500={shouldBeBlue}></h1>
+    <h1 class2:text-blue-500={shouldBeBlue}></h1>
   </body>
 </html>