Fix bug where apply would populate classCache and cause utilities not to generate

Author: adamwathan

src/lib/expandApplyAtRules.js

@@ -1,8 +1,32 @@
 const postcss = require('postcss')
-const generateRules = require('./generateRules')
+const { generateRules, resolveMatches } = require('./generateRules')
 const { bigSign } = require('./utils')
 const escape = require('tailwindcss/lib/util/escapeClassName').default
 
+function buildApplyCache(applyCandidates, context) {
+  for (let candidate of applyCandidates) {
+    if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
+      continue
+    }
+
+    if (context.classCache.has(candidate)) {
+      context.applyClassCache.set(candidate, context.classCache.get(candidate))
+      continue
+    }
+
+    let matches = resolveMatches(candidate, context)
+
+    if (matches.length === 0) {
+      context.notClassCache.add(candidate)
+      continue
+    }
+
+    context.applyClassCache.set(candidate, matches)
+  }
+
+  return context.applyClassCache
+}
+
 function expandApplyAtRules(context) {
   return (root) => {
     let applyCandidates = new Set()
@@ -18,14 +42,8 @@ function expandApplyAtRules(context) {
 
     // Start the @apply process if we have rules with @apply in them
     if (applies.length > 0) {
-      let classCacheCount = context.classCache.size
-
       // Fill up some caches!
-      generateRules(context.tailwindConfig, applyCandidates, context)
-
-      if (context.classCache.size > classCacheCount) {
-        context.stylesheetCache = null
-      }
+      let applyClassCache = buildApplyCache(applyCandidates, context)
 
       /**
        * When we have an apply like this:
@@ -59,13 +77,13 @@ function expandApplyAtRules(context) {
         let siblings = []
         let applyCandidates = apply.params.split(/[\s\t\n]+/g)
         for (let applyCandidate of applyCandidates) {
-          if (!context.classCache.has(applyCandidate)) {
+          if (!applyClassCache.has(applyCandidate)) {
             throw new Error(
               `The ${applyCandidate} class does not exist. If it's a custom class, make sure it is defined within a \`@layer\` directive.`
             )
           }
 
-          let rules = context.classCache.get(applyCandidate)
+          let rules = applyClassCache.get(applyCandidate)
 
           for (let [meta, node] of rules) {
             let root = postcss.root({ nodes: [node] })

src/lib/expandTailwindAtRules.js

@@ -1,7 +1,7 @@
 const fs = require('fs')
 const fastGlob = require('fast-glob')
 const sharedState = require('./sharedState')
-const generateRules = require('./generateRules')
+const { generateRules } = require('./generateRules')
 const { bigSign } = require('./utils')
 
 let env = sharedState.env
@@ -150,11 +150,10 @@ function expandTailwindAtRules(context, registerDependency) {
     // ---
 
     // Generate the actual CSS
-
     let classCacheCount = context.classCache.size
 
     env.DEBUG && console.time('Generate rules')
-    let rules = generateRules(context.tailwindConfig, candidates, context)
+    let rules = generateRules(candidates, context)
     env.DEBUG && console.timeEnd('Generate rules')
 
     // We only ever add to the classCache, so if it didn't grow, there is nothing new.

src/lib/generateRules.js

@@ -82,81 +82,96 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
-function generateRules(tailwindConfig, candidates, context) {
-  let { candidateRuleMap, classCache, notClassCache, postCssNodeCache } = context
-  let allRules = []
+function resolveMatchedPlugins(classCandidate, context) {
+  if (context.candidateRuleMap.has(classCandidate)) {
+    return [context.candidateRuleMap.get(classCandidate), 'DEFAULT']
+  }
 
-  for (let candidate of candidates) {
-    if (notClassCache.has(candidate)) {
-      continue
-    }
+  let candidatePrefix = classCandidate
+  let negative = false
 
-    if (classCache.has(candidate)) {
-      allRules.push(classCache.get(candidate))
-      continue
+  if (candidatePrefix[0] === '-') {
+    negative = true
+    candidatePrefix = candidatePrefix.slice(1)
+  }
+
+  for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
+    if (context.candidateRuleMap.has(prefix)) {
+      return [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
     }
+  }
 
-    let [classCandidate, ...variants] = candidate.split(':').reverse()
-    let matchedPlugins = null
+  return null
+}
 
-    if (candidateRuleMap.has(classCandidate)) {
-      matchedPlugins = [candidateRuleMap.get(classCandidate), 'DEFAULT']
-    } else {
-      let candidatePrefix = classCandidate
-      let negative = false
+function resolveMatches(candidate, context) {
+  let [classCandidate, ...variants] = candidate.split(':').reverse()
+  let matchedPlugins = resolveMatchedPlugins(classCandidate, context)
 
-      if (candidatePrefix[0] === '-') {
-        negative = true
-        candidatePrefix = candidatePrefix.slice(1)
-      }
+  if (matchedPlugins === null) {
+    return []
+  }
+
+  let pluginHelpers = {
+    candidate: classCandidate,
+    theme: context.tailwindConfig.theme,
+  }
 
-      for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
-        if (candidateRuleMap.has(prefix)) {
-          matchedPlugins = [candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
-          break
+  let matches = []
+  let [plugins, modifier] = matchedPlugins
+
+  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])
+      }
     }
+  }
+
+  for (let variant of variants) {
+    matches = applyVariant(variant, matches, context)
+  }
+
+  return matches
+}
+
+function generateRules(candidates, context) {
+  let allRules = []
 
-    if (matchedPlugins === null) {
-      notClassCache.add(candidate)
+  for (let candidate of candidates) {
+    if (context.notClassCache.has(candidate)) {
       continue
     }
 
-    let pluginHelpers = {
-      candidate: classCandidate,
-      theme: tailwindConfig.theme,
+    if (context.classCache.has(candidate)) {
+      allRules.push(context.classCache.get(candidate))
+      continue
     }
 
-    let matches = []
-    let [plugins, modifier] = matchedPlugins
+    let matches = resolveMatches(candidate, context)
 
-    for (let [sort, plugin] of plugins) {
-      if (typeof plugin === 'function') {
-        for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) {
-          let [rules, options] = parseRules(ruleSet, context.newPostCssNodeCache)
-          for (let rule of rules) {
-            matches.push([{ ...sort, options }, rule])
-          }
-        }
-      } else {
-        let ruleSet = plugin
-        let [rules, options] = parseRules(ruleSet, context.newPostCssNodeCache)
-        for (let rule of rules) {
-          matches.push([{ ...sort, options }, rule])
-        }
-      }
-    }
-
-    for (let variant of variants) {
-      matches = applyVariant(variant, matches, context)
+    if (matches.length === 0) {
+      context.notClassCache.add(candidate)
+      continue
     }
 
-    classCache.set(candidate, matches)
+    context.classCache.set(candidate, matches)
     allRules.push(matches)
   }
 
   return allRules.flat(1).map(([{ sort, layer }, rule]) => [sort | context.layerOrder[layer], rule])
 }
 
-module.exports = generateRules
+module.exports = {
+  resolveMatches,
+  generateRules,
+}

src/lib/setupContext.js

@@ -617,9 +617,9 @@ function setupContext(configOrPath) {
       scannedContent: false,
       touchFile: null,
       classCache: new Map(),
+      applyClassCache: new Map(),
       notClassCache: new Set(),
       postCssNodeCache: new Map(),
-      newPostCssNodeCache: new Map(),
       candidateRuleMap: new Map(),
       configPath: userConfigPath,
       tailwindConfig: tailwindConfig,