Improve nesting detection (#6011)

src/lib/detectNesting.js

@@ -2,17 +2,36 @@ export default function (_context) {
   return (root, result) => {
     let found = false
 
+    root.walkAtRules('tailwind', (node) => {
+      if (found) return false
+
+      if (node.parent && node.parent.type !== 'root') {
+        found = true
+        node.warn(
+          result,
+          [
+            'Nested @tailwind rules were detected, but are not supported.',
+            "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+            'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
+          ].join('\n')
+        )
+        return false
+      }
+    })
+
     root.walkRules((rule) => {
       if (found) return false
 
       rule.walkRules((nestedRule) => {
         found = true
         nestedRule.warn(
           result,
-          // TODO: Improve this warning message
-          'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting'
+          [
+            'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+            'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+            'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+          ].join('\n')
         )
-
         return false
       })
     })

tests/detect-nesting.test.js

@@ -19,7 +19,37 @@ it('should warn when we detect nested css', () => {
     expect(result.messages).toMatchObject([
       {
         type: 'warning',
-        text: 'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+        text: [
+          'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+          'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+          'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+        ].join('\n'),
+      },
+    ])
+  })
+})
+
+it('should warn when we detect namespaced @tailwind at rules', () => {
+  let config = {
+    content: [{ raw: html`<div class="text-center"></div>` }],
+  }
+
+  let input = css`
+    .namespace {
+      @tailwind utilities;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.messages).toHaveLength(1)
+    expect(result.messages).toMatchObject([
+      {
+        type: 'warning',
+        text: [
+          'Nested @tailwind rules were detected, but are not supported.',
+          "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+          'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
+        ].join('\n'),
       },
     ])
   })