@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:
parent
4395aac729
commit
0e262a13e6
2 changed files with 30 additions and 1 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue