From 2964d8631859fc5747201e90c4961b5950831999 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 26 Mar 2021 09:48:42 -0400
Subject: [PATCH] Customize error message for nested @screen and nested @apply

---
 src/lib/expandApplyAtRules.js |  8 ++++++++
 tests/10-apply.test.js        | 28 ++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
index e736a8c..4d3e395 100644
--- a/src/lib/expandApplyAtRules.js
+++ b/src/lib/expandApplyAtRules.js
@@ -154,6 +154,14 @@ function processApply(root, context) {
       let [applyCandidates, important] = extractApplyCandidates(apply.params)
 
       if (apply.parent.type === 'atrule') {
+        if (apply.parent.name === 'screen') {
+          const screenType = apply.parent.params
+
+          throw apply.error(
+            `@apply nested inside @screen is not supported. We suggest you write this as @apply ${applyCandidates.map(c => `${screenType}:${c}`).join(' ')} instead.`
+          )
+        }
+
         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`
         )
diff --git a/tests/10-apply.test.js b/tests/10-apply.test.js
index 9a00f77..af403e0 100644
--- a/tests/10-apply.test.js
+++ b/tests/10-apply.test.js
@@ -163,6 +163,34 @@ test('@apply error with unknown utility', async () => {
 
   await expect(run(css, config)).rejects.toThrowError("class does not exist")
 })
+
+test('@apply error with nested @screen', async () => {
+  let config = {
+    // TODO: Remove this. Some kind of caching causes multiple tests in the same file to break.
+    __name: "at-screen",
+
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './10-apply.test.html')],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer components {
+    .foo {
+      @screen md {
+        @apply text-black;
+      }
+    }
+  }
+`
+
+  await expect(run(css, config)).rejects.toThrowError("@apply nested inside @screen is not supported")
+})
+
 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.