detect nesting only when using @apply with a class that uses nesting

Author: RobinMalfait

src/lib/expandApplyAtRules.js

@@ -432,6 +432,23 @@ function processApply(root, context, localCache) {
 
       let rules = applyClassCache.get(applyCandidate)
 
+      // Verify that we can apply the class
+      for (let [, rule] of rules) {
+        if (rule.type === 'atrule') {
+          continue
+        }
+
+        rule.walkRules(() => {
+          throw apply.error(
+            [
+              `The \`${applyCandidate}\` class cannot be applied because it uses nested CSS.`,
+              'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+              'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+            ].join('\n')
+          )
+        })
+      }
+
       candidates.push([applyCandidate, important, rules])
     }
   }

tests/apply.test.js

@@ -2143,3 +2143,33 @@ test('should not break replacing important selector when the same as the parent
     }
   `)
 })
+
+test('applying classes with nested CSS should result in an error', async () => {
+  let config = {
+    important: '.foo',
+    content: [
+      {
+        raw: html`<div class="foo"></div>`,
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind components;
+    @layer components {
+      .bar .baz {
+        color: red;
+
+        &:hover {
+          color: red;
+        }
+      }
+
+      .foo {
+        @apply flex baz;
+      }
+    }
+  `
+
+  return expect(() => run(input, config)).rejects.toThrowError()
+})