Don’t generate duplicate rule implementations

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.

Author: thecrypticace

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]) => {

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>