Customize error message for nested @screen and nested @apply

Author: thecrypticace

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`
         )

tests/10-apply.test.js

@@ -163,6 +163,38 @@ 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 },
+    // TODO: Remove this. Some kind of caching causes multiple tests in the same file to break.
+    theme: {
+      extends: { colors: { name: "at-screen" } },
+    },
+    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.