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
AI acknowledgment
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
Rule details
I would like to propose a rule that warns when an animation name used in
animationoranimation-namedoes not have a matching@keyframesrule 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
Prior Art
Stylelint has a
no-unknown-animationsrule with the same purpose.The rule checks animation names used in
animationandanimation-name, and treats@keyframesnames defined in the same source or in files provided throughreferenceFilesas known animations.Documentation: https://stylelint.io/user-guide/rules/no-unknown-animations/
Participation
AI acknowledgment
Additional comments
CSS can reference
@keyframesrules defined in another stylesheet, so a missing@keyframesrule 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
@keyframesrules 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