Allow all classes for @apply

Author: garymathews

src/lib/expandApplyAtRules.js

@@ -122,6 +122,27 @@ function processApply(root, context) {
     // Fill up some caches!
     let applyClassCache = buildApplyCache(applyCandidates, context)
 
+    // Collect all classes for @apply rules.
+    root.walk((node) => {
+      if (node.selector && node.selector[0] === '.') {
+        const name = node.selector.substring(1)
+
+        // Ignore unused candidates.
+        if (applyCandidates.has(name) && !applyClassCache.has(name)) {
+          applyClassCache.set(name, [
+            [
+              {
+                sort: BigInt(context.layerOrder.user),
+                layer: 'user',
+                options: {},
+              },
+              node,
+            ],
+          ])
+        }
+      }
+    })
+
     /**
      * When we have an apply like this:
      *

tests/apply.test.js

@@ -616,3 +616,42 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules
     `)
   })
 })
+
+it('should pickup all classes', () => {
+  let config = {
+    content: [{ raw: html`<div class="foo"></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    .bop {
+      color: red;
+    }
+
+    @layer components {
+      .bar {
+        background-color: blue;
+      }
+
+      .foo {
+        @apply absolute bar bop;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .foo {
+        background-color: blue;
+        position: absolute;
+        color: red;
+      }
+      .bop {
+        color: red;
+      }
+    `)
+  })
+})