Add error for nested at rule + nested apply

src/lib/expandApplyAtRules.js

@@ -153,6 +153,12 @@ function processApply(root, context) {
 
       let [applyCandidates, important] = extractApplyCandidates(apply.params)
 
+      if (apply.parent.type === 'atrule') {
+        throw apply.error(
+          `@apply only works for elements and classes. Nesting inside an @${apply.parent.name} is not supported. Please move the @${apply.parent.name} around the element/class selector`
+        )
+      }
+
       for (let applyCandidate of applyCandidates) {
         if (!applyClassCache.has(applyCandidate)) {
           throw apply.error(

tests/10-apply.test.js

@@ -163,3 +163,29 @@ test('@apply error with unknown utility', async () => {
 
   await expect(run(css, config)).rejects.toThrowError("class does not exist")
 })
+test('@apply error with nested @anyatrulehere', async () => {
+  let config = {
+    // TODO: Remove this. Some kind of caching causes multiple tests in the same file to break.
+    __name: "at-anything",
+
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './10-apply.test.html')],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer components {
+    .foo {
+      @genie {
+        @apply text-black;
+      }
+    }
+  }
+`
+
+  await expect(run(css, config)).rejects.toThrowError("Nesting inside an @genie is not supported")
+})