ensure lookup tree is correctly cached based on used tailwind atrules

Author: RobinMalfait

__tests__/applyAtRule.test.js

@@ -340,6 +340,7 @@ test('you can apply utility classes that do not actually exist as long as they w
 test('shadow lookup will be constructed when we have missing @tailwind atrules', () => {
   const input = `
     @tailwind base;
+
     .foo { @apply mt-4; }
   `
 
@@ -1362,3 +1363,40 @@ test('declarations within a rule that uses @apply with !important remain not !im
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('lookup tree is correctly cached based on used tailwind atrules', async () => {
+  const input1 = `
+    @tailwind utilities;
+
+    .foo { @apply mt-4; }
+  `
+
+  const input2 = `
+    @tailwind components;
+
+    .foo { @apply mt-4; }
+  `
+
+  let config = {
+    corePlugins: [],
+    plugins: [
+      function ({ addUtilities, addComponents }) {
+        addUtilities({ '.mt-4': { marginTop: '1rem' } }, [])
+        addComponents({ '.container': { maxWidth: '500px' } }, [])
+      },
+    ],
+  }
+
+  let output1 = await run(input1, config)
+  let output2 = await run(input2, config)
+
+  expect(output1.css).toMatchCss(`
+    .mt-4 { margin-top: 1rem; }
+    .foo { margin-top: 1rem; }
+  `)
+
+  expect(output2.css).toMatchCss(`
+    .container { max-width: 500px; }
+    .foo { margin-top: 1rem; }
+  `)
+})

src/lib/substituteClassApplyAtRules.js

@@ -308,7 +308,7 @@ function processApplyAtRules(css, lookupTree, config) {
   return css
 }
 
-let defaultTailwindTree = null
+let defaultTailwindTree = new Map()
 
 export default function substituteClassApplyAtRules(config, getProcessedPlugins, configChanged) {
   return function (css) {
@@ -330,14 +330,16 @@ export default function substituteClassApplyAtRules(config, getProcessedPlugins,
       return processApplyAtRules(css, postcss.root(), config)
     }
 
+    let lookupKey = requiredTailwindAtRules.join(',')
+
     // We mutated the `requiredTailwindAtRules`, but when we hit this point in
     // time, it means that we don't have all the atrules. The missing atrules
     // are listed inside the requiredTailwindAtRules, which we can use to fill
     // in the missing pieces.
     //
     // Important for <style> blocks in Vue components.
     const generateLookupTree =
-      configChanged || defaultTailwindTree === null
+      configChanged || !defaultTailwindTree.has(lookupKey)
         ? () => {
             return postcss([
               substituteTailwindAtRules(config, getProcessedPlugins()),
@@ -351,11 +353,11 @@ export default function substituteClassApplyAtRules(config, getProcessedPlugins,
                 from: undefined,
               })
               .then((result) => {
-                defaultTailwindTree = result
-                return defaultTailwindTree
+                defaultTailwindTree.set(lookupKey, result)
+                return result
               })
           }
-        : () => Promise.resolve(defaultTailwindTree)
+        : () => Promise.resolve(defaultTailwindTree.get(lookupKey))
 
     return generateLookupTree().then((result) => {
       return processApplyAtRules(css, result.root, config)