Add error messages for nested at-rules & apply (#161)

* Add test for @apply of unknown utility classes

* Add error for nested at rule + nested apply

* Customize error message for nested @screen and nested @apply

* Remove workaround by using current test name

* Tweak error messages

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

Author: thecrypticace

src/lib/expandApplyAtRules.js

@@ -153,6 +153,22 @@ 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 is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates
+              .map((c) => `${screenType}:${c}`)
+              .join(' ')} instead.`
+          )
+        }
+
+        throw apply.error(
+          `@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`
+        )
+      }
+
       for (let applyCandidate of applyCandidates) {
         if (!applyClassCache.has(applyCandidate)) {
           throw apply.error(

tests/10-apply.test.js

@@ -4,7 +4,11 @@ const fs = require('fs')
 const path = require('path')
 
 function run(input, config = {}) {
-  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+  const { currentTestName } = expect.getState()
+
+  return postcss([tailwind(config)]).process(input, {
+    from: `${path.resolve(__filename)}?test=${currentTestName}`,
+  })
 }
 
 test('@apply', () => {
@@ -139,4 +143,76 @@ test('@apply', () => {
   })
 })
 
-// TODO: Test stuff that should throw
+test('@apply error with unknown utility', async () => {
+  let config = {
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './10-apply.test.html')],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer components {
+    .foo {
+      @apply a-utility-that-does-not-exist;
+    }
+  }
+`
+
+  await expect(run(css, config)).rejects.toThrowError('class does not exist')
+})
+
+test('@apply error with nested @screen', async () => {
+  let config = {
+    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 is not supported within nested at-rules like @screen'
+  )
+})
+
+test('@apply error with nested @anyatrulehere', async () => {
+  let config = {
+    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(
+    '@apply is not supported within nested at-rules like @genie'
+  )
+})