Skip to content

Commit 39f9db4

Browse files
RobinMalfaitRobinMalfait
committed
throw an error when applying the .group utility (aot mode)
1 parent 49cb426 commit 39f9db4

File tree

2 files changed

+337
-0
lines changed

2 files changed

+337
-0
lines changed

‎src/lib/substituteClassApplyAtRules.js

+8
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,14 @@ function makeExtractUtilityRules(css, lookupTree, config) {
234234
const prefixedUtilityName = prefixSelector(config.prefix, `.${utilityName}`).slice(1)
235235

236236
const prefixedUtility = getUtility(prefixedUtilityName)
237+
if (
238+
utilityName === 'group' ||
239+
utilityName === prefixSelector(config.prefix, '.group').slice(1)
240+
) {
241+
// TODO: Link to specific documentation page with error code.
242+
throw rule.error(`@apply should not be used with the '${utilityName}' utility`)
243+
}
244+
237245
if (prefixedUtility !== undefined) {
238246
throw rule.error(
239247
`The \`${utilityName}\` class does not exist, but \`${prefixedUtilityName}\` does. Did you forget the prefix?`

‎tests/applyAtRule.test.js

+329
Original file line numberDiff line numberDiff line change
@@ -1403,3 +1403,332 @@ test('lookup tree is correctly cached based on used tailwind atrules', async ()
14031403
.foo { margin-top: 1rem; }
14041404
`)
14051405
})
1406+
1407+
test('@apply error when using .group utility', async () => {
1408+
let config = {
1409+
purge: [],
1410+
corePlugins: {
1411+
preflight: false,
1412+
container: false,
1413+
accessibility: false,
1414+
alignContent: false,
1415+
alignItems: false,
1416+
alignSelf: false,
1417+
animation: false,
1418+
appearance: false,
1419+
backdropBlur: false,
1420+
backdropBrightness: false,
1421+
backdropContrast: false,
1422+
backdropFilter: false,
1423+
backdropGrayscale: false,
1424+
backdropHueRotate: false,
1425+
backdropInvert: false,
1426+
backdropOpacity: false,
1427+
backdropSaturate: false,
1428+
backdropSepia: false,
1429+
backgroundAttachment: false,
1430+
backgroundBlendMode: false,
1431+
backgroundClip: false,
1432+
backgroundColor: false,
1433+
backgroundImage: false,
1434+
backgroundOpacity: false,
1435+
backgroundPosition: false,
1436+
backgroundRepeat: false,
1437+
backgroundSize: false,
1438+
blur: false,
1439+
borderCollapse: false,
1440+
borderColor: false,
1441+
borderOpacity: false,
1442+
borderRadius: false,
1443+
borderStyle: false,
1444+
borderWidth: false,
1445+
boxDecorationBreak: false,
1446+
boxShadow: false,
1447+
boxSizing: false,
1448+
brightness: false,
1449+
clear: false,
1450+
contrast: false,
1451+
cursor: false,
1452+
display: false,
1453+
divideColor: false,
1454+
divideOpacity: false,
1455+
divideStyle: false,
1456+
divideWidth: false,
1457+
dropShadow: false,
1458+
fill: false,
1459+
filter: false,
1460+
flex: false,
1461+
flexDirection: false,
1462+
flexGrow: false,
1463+
flexShrink: false,
1464+
flexWrap: false,
1465+
float: false,
1466+
fontFamily: false,
1467+
fontSize: false,
1468+
fontSmoothing: false,
1469+
fontStyle: false,
1470+
fontVariantNumeric: false,
1471+
fontWeight: false,
1472+
gap: false,
1473+
gradientColorStops: false,
1474+
grayscale: false,
1475+
gridAutoColumns: false,
1476+
gridAutoFlow: false,
1477+
gridAutoRows: false,
1478+
gridColumn: false,
1479+
gridColumnEnd: false,
1480+
gridColumnStart: false,
1481+
gridRow: false,
1482+
gridRowEnd: false,
1483+
gridRowStart: false,
1484+
gridTemplateColumns: false,
1485+
gridTemplateRows: false,
1486+
height: false,
1487+
hueRotate: false,
1488+
inset: false,
1489+
invert: false,
1490+
isolation: false,
1491+
justifyContent: false,
1492+
justifyItems: false,
1493+
justifySelf: false,
1494+
letterSpacing: false,
1495+
lineHeight: false,
1496+
listStylePosition: false,
1497+
listStyleType: false,
1498+
margin: false,
1499+
maxHeight: false,
1500+
maxWidth: false,
1501+
minHeight: false,
1502+
minWidth: false,
1503+
mixBlendMode: false,
1504+
objectFit: false,
1505+
objectPosition: false,
1506+
opacity: false,
1507+
order: false,
1508+
outline: false,
1509+
overflow: false,
1510+
overscrollBehavior: false,
1511+
padding: false,
1512+
placeContent: false,
1513+
placeholderColor: false,
1514+
placeholderOpacity: false,
1515+
placeItems: false,
1516+
placeSelf: false,
1517+
pointerEvents: false,
1518+
position: false,
1519+
resize: false,
1520+
ringColor: false,
1521+
ringOffsetColor: false,
1522+
ringOffsetWidth: false,
1523+
ringOpacity: false,
1524+
ringWidth: false,
1525+
rotate: false,
1526+
saturate: false,
1527+
scale: false,
1528+
sepia: false,
1529+
skew: false,
1530+
space: false,
1531+
stroke: false,
1532+
strokeWidth: false,
1533+
tableLayout: false,
1534+
textAlign: false,
1535+
textColor: false,
1536+
textDecoration: false,
1537+
textOpacity: false,
1538+
textOverflow: false,
1539+
textTransform: false,
1540+
transform: false,
1541+
transformOrigin: false,
1542+
transitionDelay: false,
1543+
transitionDuration: false,
1544+
transitionProperty: false,
1545+
transitionTimingFunction: false,
1546+
translate: false,
1547+
userSelect: false,
1548+
verticalAlign: false,
1549+
visibility: false,
1550+
whitespace: false,
1551+
width: false,
1552+
wordBreak: false,
1553+
zIndex: false,
1554+
},
1555+
plugins: [],
1556+
}
1557+
1558+
let css = `
1559+
@layer components {
1560+
.foo {
1561+
@apply group;
1562+
}
1563+
}
1564+
`
1565+
1566+
await expect(run(css, config)).rejects.toThrowError(
1567+
`@apply should not be used with the 'group' utility`
1568+
)
1569+
})
1570+
1571+
test('@apply error when using prefixed .group utility', async () => {
1572+
let config = {
1573+
prefix: 'tw-',
1574+
purge: [],
1575+
corePlugins: {
1576+
preflight: false,
1577+
container: false,
1578+
accessibility: false,
1579+
alignContent: false,
1580+
alignItems: false,
1581+
alignSelf: false,
1582+
animation: false,
1583+
appearance: false,
1584+
backdropBlur: false,
1585+
backdropBrightness: false,
1586+
backdropContrast: false,
1587+
backdropFilter: false,
1588+
backdropGrayscale: false,
1589+
backdropHueRotate: false,
1590+
backdropInvert: false,
1591+
backdropOpacity: false,
1592+
backdropSaturate: false,
1593+
backdropSepia: false,
1594+
backgroundAttachment: false,
1595+
backgroundBlendMode: false,
1596+
backgroundClip: false,
1597+
backgroundColor: false,
1598+
backgroundImage: false,
1599+
backgroundOpacity: false,
1600+
backgroundPosition: false,
1601+
backgroundRepeat: false,
1602+
backgroundSize: false,
1603+
blur: false,
1604+
borderCollapse: false,
1605+
borderColor: false,
1606+
borderOpacity: false,
1607+
borderRadius: false,
1608+
borderStyle: false,
1609+
borderWidth: false,
1610+
boxDecorationBreak: false,
1611+
boxShadow: false,
1612+
boxSizing: false,
1613+
brightness: false,
1614+
clear: false,
1615+
contrast: false,
1616+
cursor: false,
1617+
display: false,
1618+
divideColor: false,
1619+
divideOpacity: false,
1620+
divideStyle: false,
1621+
divideWidth: false,
1622+
dropShadow: false,
1623+
fill: false,
1624+
filter: false,
1625+
flex: false,
1626+
flexDirection: false,
1627+
flexGrow: false,
1628+
flexShrink: false,
1629+
flexWrap: false,
1630+
float: false,
1631+
fontFamily: false,
1632+
fontSize: false,
1633+
fontSmoothing: false,
1634+
fontStyle: false,
1635+
fontVariantNumeric: false,
1636+
fontWeight: false,
1637+
gap: false,
1638+
gradientColorStops: false,
1639+
grayscale: false,
1640+
gridAutoColumns: false,
1641+
gridAutoFlow: false,
1642+
gridAutoRows: false,
1643+
gridColumn: false,
1644+
gridColumnEnd: false,
1645+
gridColumnStart: false,
1646+
gridRow: false,
1647+
gridRowEnd: false,
1648+
gridRowStart: false,
1649+
gridTemplateColumns: false,
1650+
gridTemplateRows: false,
1651+
height: false,
1652+
hueRotate: false,
1653+
inset: false,
1654+
invert: false,
1655+
isolation: false,
1656+
justifyContent: false,
1657+
justifyItems: false,
1658+
justifySelf: false,
1659+
letterSpacing: false,
1660+
lineHeight: false,
1661+
listStylePosition: false,
1662+
listStyleType: false,
1663+
margin: false,
1664+
maxHeight: false,
1665+
maxWidth: false,
1666+
minHeight: false,
1667+
minWidth: false,
1668+
mixBlendMode: false,
1669+
objectFit: false,
1670+
objectPosition: false,
1671+
opacity: false,
1672+
order: false,
1673+
outline: false,
1674+
overflow: false,
1675+
overscrollBehavior: false,
1676+
padding: false,
1677+
placeContent: false,
1678+
placeholderColor: false,
1679+
placeholderOpacity: false,
1680+
placeItems: false,
1681+
placeSelf: false,
1682+
pointerEvents: false,
1683+
position: false,
1684+
resize: false,
1685+
ringColor: false,
1686+
ringOffsetColor: false,
1687+
ringOffsetWidth: false,
1688+
ringOpacity: false,
1689+
ringWidth: false,
1690+
rotate: false,
1691+
saturate: false,
1692+
scale: false,
1693+
sepia: false,
1694+
skew: false,
1695+
space: false,
1696+
stroke: false,
1697+
strokeWidth: false,
1698+
tableLayout: false,
1699+
textAlign: false,
1700+
textColor: false,
1701+
textDecoration: false,
1702+
textOpacity: false,
1703+
textOverflow: false,
1704+
textTransform: false,
1705+
transform: false,
1706+
transformOrigin: false,
1707+
transitionDelay: false,
1708+
transitionDuration: false,
1709+
transitionProperty: false,
1710+
transitionTimingFunction: false,
1711+
translate: false,
1712+
userSelect: false,
1713+
verticalAlign: false,
1714+
visibility: false,
1715+
whitespace: false,
1716+
width: false,
1717+
wordBreak: false,
1718+
zIndex: false,
1719+
},
1720+
plugins: [],
1721+
}
1722+
1723+
let css = `
1724+
@layer components {
1725+
.foo {
1726+
@apply tw-group;
1727+
}
1728+
}
1729+
`
1730+
1731+
await expect(run(css, config)).rejects.toThrowError(
1732+
`@apply should not be used with the 'tw-group' utility`
1733+
)
1734+
})

0 commit comments

Comments
 (0)