New Rule: no-unknown-animations #529

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

.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

• I am willing to submit a pull request to implement this rule.

AI acknowledgment

• 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