Only detect nesting when using @apply (#13325)

* drop nesting detection for `@tailwind`

* drop separate nesting detection entirely

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

* drop unnecessary `important` config

* add test to verify applying nested user CSS errors

* add error reason to tests

* update `@apply` error message

Author: RobinMalfait

src/lib/detectNesting.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 used with \`@apply\` because \`@apply\` does not currently support nested CSS.`,
+              'Rewrite the selector without nesting or configure the `tailwindcss/nesting` plugin:',
+              'https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+            ].join('\n')
+          )
+        })
+      }
+
       candidates.push([applyCandidate, important, rules])
     }
   }

src/lib/expandApplyAtRules.js

@@ -7,16 +7,13 @@ import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
 import partitionApplyAtRules from './lib/partitionApplyAtRules'
-import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
   return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
-    detectNesting()(root, result)
-
     // Partition apply rules that are found in the css
     // itself.
     partitionApplyAtRules()(root, result)

src/processTailwindFeatures.js

@@ -2143,3 +2143,72 @@ 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 = {
+    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;
+      }
+    }
+  `
+
+  expect.assertions(1)
+
+  return run(input, config).catch((err) => {
+    expect(err.reason).toMatchInlineSnapshot(`
+      "The \`baz\` class cannot be used with \`@apply\` because \`@apply\` does not currently support nested CSS.
+      Rewrite the selector without nesting or configure the \`tailwindcss/nesting\` plugin:
+      https://tailwindcss.com/docs/using-with-preprocessors#nesting"
+    `)
+  })
+})
+
+test('applying user defined classes with nested CSS should result in an error', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="example"></div>`,
+      },
+    ],
+  }
+
+  let input = css`
+    .foo {
+      .bar {
+        color: red;
+      }
+    }
+
+    .example {
+      @apply bar;
+    }
+  `
+
+  expect.assertions(1)
+
+  return run(input, config).catch((err) => {
+    expect(err.reason).toMatchInlineSnapshot(`
+      "The \`bar\` class cannot be used with \`@apply\` because \`@apply\` does not currently support nested CSS.
+      Rewrite the selector without nesting or configure the \`tailwindcss/nesting\` plugin:
+      https://tailwindcss.com/docs/using-with-preprocessors#nesting"
+    `)
+  })
+})