Fix bug where exact match in user CSS prevented generated utility match

Author: adamwathan

src/index.test.css

@@ -225,6 +225,9 @@ div {
 * {
   padding: 5px;
 }
+.foo .bg-black {
+  appearance: none;
+}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -247,6 +250,10 @@ div {
 .grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(16, 185, 129, var(--tw-bg-opacity));

src/index.test.html

@@ -14,6 +14,7 @@
     ></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="mt-6"></div>
+    <div class="bg-black"></div>
     <div class="custom-util"></div>
     <div class="hover:custom-util"></div>
     <div class="group-hover:custom-util"></div>

src/index.test.js

@@ -80,6 +80,9 @@ test('it works', () => {
     * {
       padding: 5px;
     }
+    .foo .bg-black {
+      appearance: none;
+    }
   }
   @layer base {
     div {

src/lib/expandApplyAtRules.js

@@ -14,7 +14,7 @@ function buildApplyCache(applyCandidates, context) {
       continue
     }
 
-    let matches = resolveMatches(candidate, context)
+    let matches = Array.from(resolveMatches(candidate, context))
 
     if (matches.length === 0) {
       context.notClassCache.add(candidate)

src/lib/generateRules.js

@@ -17,17 +17,17 @@ function getClassNameFromSelector(selector) {
 // ['ring-offset', 'blue-100']
 // ['ring', 'offset-blue-100']
 function* candidatePermutations(prefix, modifier = '') {
-  yield [prefix, modifier]
-
   let dashIdx = prefix.lastIndexOf('-')
   if (dashIdx === -1) {
     return
   }
 
-  yield* candidatePermutations(
-    prefix.slice(0, dashIdx),
-    [prefix.slice(dashIdx + 1), modifier].filter(Boolean).join('-')
-  )
+  modifier = [prefix.slice(dashIdx + 1), modifier].filter(Boolean).join('-')
+  prefix = prefix.slice(0, dashIdx)
+
+  yield [prefix, modifier]
+
+  yield* candidatePermutations(prefix, modifier)
 }
 
 // Takes a list of rule tuples and applies a variant like `hover`, sm`,
@@ -109,9 +109,9 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
-function resolveMatchedPlugins(classCandidate, context) {
+function* resolveMatchedPlugins(classCandidate, context) {
   if (context.candidateRuleMap.has(classCandidate)) {
-    return [context.candidateRuleMap.get(classCandidate), 'DEFAULT']
+    yield [context.candidateRuleMap.get(classCandidate), 'DEFAULT']
   }
 
   let candidatePrefix = classCandidate
@@ -124,11 +124,10 @@ function resolveMatchedPlugins(classCandidate, context) {
 
   for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
     if (context.candidateRuleMap.has(prefix)) {
-      return [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
+      yield [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
+      return
     }
   }
-
-  return null
 }
 
 function sortAgainst(toSort, against) {
@@ -137,55 +136,53 @@ function sortAgainst(toSort, against) {
   })
 }
 
-function resolveMatches(candidate, context) {
+function* resolveMatches(candidate, context) {
   let [classCandidate, ...variants] = candidate.split(':').reverse()
 
   // Strip prefix
   // md:hover:tw-bg-black
 
-  let matchedPlugins = resolveMatchedPlugins(classCandidate, context)
-
   // TODO: Reintroduce this in ways that doesn't break on false positives
   // let sorted = sortAgainst(variants, context.variantMap)
   // if (sorted.toString() !== variants.toString()) {
   //   let corrected = sorted.reverse().concat(classCandidate).join(':')
   //   throw new Error(`Class ${candidate} should be written as ${corrected}`)
   // }
 
-  if (matchedPlugins === null) {
-    return []
-  }
-
-  let pluginHelpers = {
-    candidate: classCandidate,
-    theme: context.tailwindConfig.theme,
-  }
+  for (let matchedPlugins of resolveMatchedPlugins(classCandidate, context)) {
+    let pluginHelpers = {
+      candidate: classCandidate,
+      theme: context.tailwindConfig.theme,
+    }
 
-  let matches = []
-  let [plugins, modifier] = matchedPlugins
+    let matches = []
+    let [plugins, modifier] = matchedPlugins
 
-  for (let [sort, plugin] of plugins) {
-    if (typeof plugin === 'function') {
-      for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) {
+    for (let [sort, plugin] of plugins) {
+      if (typeof plugin === 'function') {
+        for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) {
+          let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
+          for (let rule of rules) {
+            matches.push([{ ...sort, options }, rule])
+          }
+        }
+      } else {
+        let ruleSet = plugin
         let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
         for (let rule of rules) {
           matches.push([{ ...sort, options }, rule])
         }
       }
-    } else {
-      let ruleSet = plugin
-      let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
-      for (let rule of rules) {
-        matches.push([{ ...sort, options }, rule])
-      }
     }
-  }
 
-  for (let variant of variants) {
-    matches = applyVariant(variant, matches, context)
-  }
+    for (let variant of variants) {
+      matches = applyVariant(variant, matches, context)
+    }
 
-  return matches
+    for (let match of matches) {
+      yield match
+    }
+  }
 }
 
 function generateRules(candidates, context) {
@@ -201,7 +198,7 @@ function generateRules(candidates, context) {
       continue
     }
 
-    let matches = resolveMatches(candidate, context)
+    let matches = Array.from(resolveMatches(candidate, context))
 
     // apply prefix and important here?