throw an error when applying the .group utility (jit mode)

Author: RobinMalfait

src/jit/lib/expandApplyAtRules.js

@@ -3,6 +3,11 @@ import { resolveMatches } from './generateRules'
 import bigSign from '../../util/bigSign'
 import escapeClassName from '../../util/escapeClassName'
 
+function prefix(context, selector) {
+  let prefix = context.tailwindConfig.prefix
+  return typeof prefix === 'function' ? prefix(selector) : prefix + selector
+}
+
 function buildApplyCache(applyCandidates, context) {
   for (let candidate of applyCandidates) {
     if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
@@ -170,6 +175,11 @@ function processApply(root, context) {
 
       for (let applyCandidate of applyCandidates) {
         if (!applyClassCache.has(applyCandidate)) {
+          if (applyCandidate === prefix(context, 'group')) {
+            // TODO: Link to specific documentation page with error code.
+            throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
+          }
+
           throw apply.error(
             `The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`
           )

tests/jit/apply.test.js

@@ -204,19 +204,68 @@ test('@apply error with nested @anyatrulehere', async () => {
   }
 
   let css = `
-  @tailwind components;
-  @tailwind utilities;
+    @tailwind components;
+    @tailwind utilities;
 
-  @layer components {
-    .foo {
-      @genie {
-        @apply text-black;
+    @layer components {
+      .foo {
+        @genie {
+          @apply text-black;
+        }
       }
     }
-  }
-`
+  `
 
   await expect(run(css, config)).rejects.toThrowError(
     '@apply is not supported within nested at-rules like @genie'
   )
 })
+
+test('@apply error when using .group utility', async () => {
+  let config = {
+    darkMode: 'class',
+    purge: [{ raw: '<div class="foo"></div>' }],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @apply group;
+      }
+    }
+  `
+
+  await expect(run(css, config)).rejects.toThrowError(
+    `@apply should not be used with the 'group' utility`
+  )
+})
+
+test('@apply error when using a prefixed .group utility', async () => {
+  let config = {
+    prefix: 'tw-',
+    darkMode: 'class',
+    purge: [{ raw: '<div class="foo"></div>' }],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @apply tw-group;
+      }
+    }
+  `
+
+  await expect(run(css, config)).rejects.toThrowError(
+    `@apply should not be used with the 'tw-group' utility`
+  )
+})