@apply is not allowed inside @keyframes (#14687)

This PR makes sure that you cannot use `@apply` inside `@keyframes`. 

While some utilities can be used in `@keyframes`, the moment you
introduce a variant, that's not going to work anymore because they need
to operate on selectors which `@keyframes` don't have.

This PR now removes all usages of `@apply` in `@keyframes`.
This commit is contained in:
Robin Malfait 2024-10-16 13:55:14 +02:00 • committed by GitHub
parent 4395aac729
commit 0e262a13e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 1 deletions

View file

@ -1,4 +1,4 @@
import { walk, type AstNode } from './ast'
import { walk, WalkAction, type AstNode } from './ast'
import { compileCandidates } from './compile'
import type { DesignSystem } from './design-system'
import { escape } from './utils/escape'
@ -6,6 +6,21 @@ import { escape } from './utils/escape'
export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
walk(ast, (node, { replaceWith }) => {
if (node.kind !== 'rule') return
// Do not allow `@apply` rules inside `@keyframes` rules.
if (node.selector[0] === '@' && node.selector.startsWith('@keyframes')) {
walk(node.nodes, (child) => {
if (
child.kind === 'rule' &&
child.selector[0] === '@' &&
child.selector.startsWith('@apply ')
) {
throw new Error(`You cannot use \`@apply\` inside \`@keyframes\`.`)
}
})
return WalkAction.Skip
}
if (!(node.selector[0] === '@' && node.selector.startsWith('@apply '))) return
let candidates = node.selector

View file

@ -148,6 +148,20 @@ describe('arbitrary properties', () => {
})
describe('@apply', () => {
it('@apply in @keyframes is not allowed', () => {
return expect(() =>
compileCss(css`
@keyframes foo {
0% {
@apply bg-red-500;
}
}
`),
).rejects.toThrowErrorMatchingInlineSnapshot(
`[Error: You cannot use \`@apply\` inside \`@keyframes\`.]`,
)
})
it('should replace @apply with the correct result', async () => {
expect(
await compileCss(css`