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

Author: RobinMalfait

src/lib/substituteClassApplyAtRules.js

@@ -234,6 +234,14 @@ function makeExtractUtilityRules(css, lookupTree, config) {
         const prefixedUtilityName = prefixSelector(config.prefix, `.${utilityName}`).slice(1)
 
         const prefixedUtility = getUtility(prefixedUtilityName)
+        if (
+          utilityName === 'group' ||
+          utilityName === prefixSelector(config.prefix, '.group').slice(1)
+        ) {
+          // TODO: Link to specific documentation page with error code.
+          throw rule.error(`@apply should not be used with the '${utilityName}' utility`)
+        }
+
         if (prefixedUtility !== undefined) {
           throw rule.error(
             `The \`${utilityName}\` class does not exist, but \`${prefixedUtilityName}\` does. Did you forget the prefix?`

tests/applyAtRule.test.js

@@ -1403,3 +1403,44 @@ test('lookup tree is correctly cached based on used tailwind atrules', async ()
     .foo { margin-top: 1rem; }
   `)
 })
+
+test('@apply error when using .group utility', async () => {
+  let config = {
+    purge: [],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+    @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 prefixed .group utility', async () => {
+  let config = {
+    prefix: 'tw-',
+    purge: [],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let css = `
+    @layer components {
+      .foo {
+        @apply tw-group;
+      }
+    }
+  `
+
+  await expect(run(css, config)).rejects.toThrowError(
+    `@apply should not be used with the 'tw-group' utility`
+  )
+})