Warn when nesting is detected (#5489)

* warn when nesting is detected

* add todo for improving warning messages

src/lib/detectNesting.js

@@ -0,0 +1,20 @@
+export default function (_context) {
+  return (root, result) => {
+    let found = 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'
+        )
+
+        return false
+      })
+    })
+  }
+}

src/processTailwindFeatures.js

@@ -5,6 +5,7 @@ import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
+import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 
 export default function processTailwindFeatures(setupContext) {
@@ -31,6 +32,7 @@ export default function processTailwindFeatures(setupContext) {
       )
     }
 
+    detectNesting(context)(root, result)
     expandTailwindAtRules(context)(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)