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

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,332 @@ 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,
+ container: false,
+ accessibility: false,
+ alignContent: false,
+ alignItems: false,
+ alignSelf: false,
+ animation: false,
+ appearance: false,
+ backdropBlur: false,
+ backdropBrightness: false,
+ backdropContrast: false,
+ backdropFilter: false,
+ backdropGrayscale: false,
+ backdropHueRotate: false,
+ backdropInvert: false,
+ backdropOpacity: false,
+ backdropSaturate: false,
+ backdropSepia: false,
+ backgroundAttachment: false,
+ backgroundBlendMode: false,
+ backgroundClip: false,
+ backgroundColor: false,
+ backgroundImage: false,
+ backgroundOpacity: false,
+ backgroundPosition: false,
+ backgroundRepeat: false,
+ backgroundSize: false,
+ blur: false,
+ borderCollapse: false,
+ borderColor: false,
+ borderOpacity: false,
+ borderRadius: false,
+ borderStyle: false,
+ borderWidth: false,
+ boxDecorationBreak: false,
+ boxShadow: false,
+ boxSizing: false,
+ brightness: false,
+ clear: false,
+ contrast: false,
+ cursor: false,
+ display: false,
+ divideColor: false,
+ divideOpacity: false,
+ divideStyle: false,
+ divideWidth: false,
+ dropShadow: false,
+ fill: false,
+ filter: false,
+ flex: false,
+ flexDirection: false,
+ flexGrow: false,
+ flexShrink: false,
+ flexWrap: false,
+ float: false,
+ fontFamily: false,
+ fontSize: false,
+ fontSmoothing: false,
+ fontStyle: false,
+ fontVariantNumeric: false,
+ fontWeight: false,
+ gap: false,
+ gradientColorStops: false,
+ grayscale: false,
+ gridAutoColumns: false,
+ gridAutoFlow: false,
+ gridAutoRows: false,
+ gridColumn: false,
+ gridColumnEnd: false,
+ gridColumnStart: false,
+ gridRow: false,
+ gridRowEnd: false,
+ gridRowStart: false,
+ gridTemplateColumns: false,
+ gridTemplateRows: false,
+ height: false,
+ hueRotate: false,
+ inset: false,
+ invert: false,
+ isolation: false,
+ justifyContent: false,
+ justifyItems: false,
+ justifySelf: false,
+ letterSpacing: false,
+ lineHeight: false,
+ listStylePosition: false,
+ listStyleType: false,
+ margin: false,
+ maxHeight: false,
+ maxWidth: false,
+ minHeight: false,
+ minWidth: false,
+ mixBlendMode: false,
+ objectFit: false,
+ objectPosition: false,
+ opacity: false,
+ order: false,
+ outline: false,
+ overflow: false,
+ overscrollBehavior: false,
+ padding: false,
+ placeContent: false,
+ placeholderColor: false,
+ placeholderOpacity: false,
+ placeItems: false,
+ placeSelf: false,
+ pointerEvents: false,
+ position: false,
+ resize: false,
+ ringColor: false,
+ ringOffsetColor: false,
+ ringOffsetWidth: false,
+ ringOpacity: false,
+ ringWidth: false,
+ rotate: false,
+ saturate: false,
+ scale: false,
+ sepia: false,
+ skew: false,
+ space: false,
+ stroke: false,
+ strokeWidth: false,
+ tableLayout: false,
+ textAlign: false,
+ textColor: false,
+ textDecoration: false,
+ textOpacity: false,
+ textOverflow: false,
+ textTransform: false,
+ transform: false,
+ transformOrigin: false,
+ transitionDelay: false,
+ transitionDuration: false,
+ transitionProperty: false,
+ transitionTimingFunction: false,
+ translate: false,
+ userSelect: false,
+ verticalAlign: false,
+ visibility: false,
+ whitespace: false,
+ width: false,
+ wordBreak: false,
+ zIndex: 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,
+ container: false,
+ accessibility: false,
+ alignContent: false,
+ alignItems: false,
+ alignSelf: false,
+ animation: false,
+ appearance: false,
+ backdropBlur: false,
+ backdropBrightness: false,
+ backdropContrast: false,
+ backdropFilter: false,
+ backdropGrayscale: false,
+ backdropHueRotate: false,
+ backdropInvert: false,
+ backdropOpacity: false,
+ backdropSaturate: false,
+ backdropSepia: false,
+ backgroundAttachment: false,
+ backgroundBlendMode: false,
+ backgroundClip: false,
+ backgroundColor: false,
+ backgroundImage: false,
+ backgroundOpacity: false,
+ backgroundPosition: false,
+ backgroundRepeat: false,
+ backgroundSize: false,
+ blur: false,
+ borderCollapse: false,
+ borderColor: false,
+ borderOpacity: false,
+ borderRadius: false,
+ borderStyle: false,
+ borderWidth: false,
+ boxDecorationBreak: false,
+ boxShadow: false,
+ boxSizing: false,
+ brightness: false,
+ clear: false,
+ contrast: false,
+ cursor: false,
+ display: false,
+ divideColor: false,
+ divideOpacity: false,
+ divideStyle: false,
+ divideWidth: false,
+ dropShadow: false,
+ fill: false,
+ filter: false,
+ flex: false,
+ flexDirection: false,
+ flexGrow: false,
+ flexShrink: false,
+ flexWrap: false,
+ float: false,
+ fontFamily: false,
+ fontSize: false,
+ fontSmoothing: false,
+ fontStyle: false,
+ fontVariantNumeric: false,
+ fontWeight: false,
+ gap: false,
+ gradientColorStops: false,
+ grayscale: false,
+ gridAutoColumns: false,
+ gridAutoFlow: false,
+ gridAutoRows: false,
+ gridColumn: false,
+ gridColumnEnd: false,
+ gridColumnStart: false,
+ gridRow: false,
+ gridRowEnd: false,
+ gridRowStart: false,
+ gridTemplateColumns: false,
+ gridTemplateRows: false,
+ height: false,
+ hueRotate: false,
+ inset: false,
+ invert: false,
+ isolation: false,
+ justifyContent: false,
+ justifyItems: false,
+ justifySelf: false,
+ letterSpacing: false,
+ lineHeight: false,
+ listStylePosition: false,
+ listStyleType: false,
+ margin: false,
+ maxHeight: false,
+ maxWidth: false,
+ minHeight: false,
+ minWidth: false,
+ mixBlendMode: false,
+ objectFit: false,
+ objectPosition: false,
+ opacity: false,
+ order: false,
+ outline: false,
+ overflow: false,
+ overscrollBehavior: false,
+ padding: false,
+ placeContent: false,
+ placeholderColor: false,
+ placeholderOpacity: false,
+ placeItems: false,
+ placeSelf: false,
+ pointerEvents: false,
+ position: false,
+ resize: false,
+ ringColor: false,
+ ringOffsetColor: false,
+ ringOffsetWidth: false,
+ ringOpacity: false,
+ ringWidth: false,
+ rotate: false,
+ saturate: false,
+ scale: false,
+ sepia: false,
+ skew: false,
+ space: false,
+ stroke: false,
+ strokeWidth: false,
+ tableLayout: false,
+ textAlign: false,
+ textColor: false,
+ textDecoration: false,
+ textOpacity: false,
+ textOverflow: false,
+ textTransform: false,
+ transform: false,
+ transformOrigin: false,
+ transitionDelay: false,
+ transitionDuration: false,
+ transitionProperty: false,
+ transitionTimingFunction: false,
+ translate: false,
+ userSelect: false,
+ verticalAlign: false,
+ visibility: false,
+ whitespace: false,
+ width: false,
+ wordBreak: false,
+ zIndex: 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`
+ )
+})