eslint / eslint/css

New Rule: no-unknown-animations

Open
#529 3 comments 0 reactions 1 assignee Claimed by @Gaic4o View on GitHub
accepted feature
Dominant language
JavaScript
Stars
308
Forks
44
Avg merge
2d 6h
Merged PRs (30d)
18

Description

### Rule details

I would like to propose a rule that warns when an animation name used in `animation` or `animation-name` does not have a matching `@keyframes` rule in the same source.

The rule would only check statically determinable animation names and ignore dynamic values such as `var()`.

### What type of rule is this?

Warns about a potential problem

### Example code

```css
.card {
animation: fade-in 300ms ease;
}

.button {
animation-name: slide-up;
}

@keyframes fade-out {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

// In the example above, `fade-in` and `slide-up` are used as animation names,
// but there are no matching `@keyframes` rules with those names defined in the same source,
// so I would expect the rule to report them.
```

### Prior Art

Stylelint has a `no-unknown-animations` rule with the same purpose.

The rule checks animation names used in `animation` and `animation-name`, and treats `@keyframes` names defined in the same source or in files provided through `referenceFiles` as known animations.

Documentation: https://stylelint.io/user-guide/rules/no-unknown-animations/

### Participation

- [x] I am willing to submit a pull request to implement this rule.

### AI acknowledgment

- [x] I did not use AI to generate this issue report.
- [ ] (If the above is not checked) I have reviewed the AI-generated content before submitting.

### Additional comments

CSS can reference `@keyframes` rules defined in another stylesheet, so a missing `@keyframes` rule in the current source does not always mean the animation is undefined.

For this reason, I propose checking only animation names that can be determined statically and `@keyframes` rules defined in the same source for now.

I would appreciate feedback on whether this scope would be appropriate for `@eslint/css`, or whether cross-file cases should be handled differently.

Disclosure: I'm a participant of [open source contribution program OSSCA](https://github.com/eslint-ossca)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.