Don’t allow utility-based @apply to be used with a body

Author: thecrypticace

packages/tailwindcss/src/apply.ts

@@ -201,6 +201,19 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
         )
       }
 
+      // If we find a dashed ident *here* it means that someone is trying
+      // to use mixins and our `@apply` behavior together.
+      //
+      // This is considered invalid usage and we want to inform the user
+      // as such.
+      let hasBody = child.nodes.length > 0
+
+      if (hasBody && normalIdents.length) {
+        let list = normalIdents.join(' ')
+
+        throw new Error(`The rule \`@apply ${list}\` must not have a body.`)
+      }
+
       // Replace the `@apply` rule with the actual utility classes
       {
         // Parse the candidates to an AST that we can replace the `@apply` rule

packages/tailwindcss/src/index.test.ts

@@ -910,6 +910,20 @@ describe('@apply', () => {
       `[Error: You cannot use \`@apply\` with both mixins and utilities. Please move \`@apply --my-mixin-1\` into a separate rule.]`,
     )
   })
+
+  it('should error when used with a body', async () => {
+    await expect(
+      compile(css`
+        .foo {
+          @apply underline {
+            color: red;
+          }
+        }
+      `),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `[Error: The rule \`@apply underline\` must not have a body.]`,
+    )
+  })
 })
 
 describe('arbitrary variants', () => {