Context
Cross-referencing @keyframes declarations against their usages requires two pieces of information:
- The names of declared keyframes (from
@keyframes <name> { })
- The names of used keyframes (from
animation-name: <name> and animation: ... <name> ... shorthands)
Extracting (2) from parsed values is non-trivial for the animation shorthand because the name must be distinguished from timing keywords, direction keywords, fill-mode keywords, etc. This disambiguation is already handled inside analyzeAnimation, but the name is not currently surfaced (see related issue: expose name item type in analyzeAnimation).
For animation-name, the value is a comma-separated list of identifiers or strings that are always names — there is no disambiguation needed, but quoted names ("slide-in") must be unwrapped.
Proposed API
/**
* Extract all keyframe names referenced in a parsed `animation-name` value.
* Handles comma-separated lists and quoted names.
*/
function extractAnimationNames(
parsed: ReturnType<typeof parse_value>
): string[]
For the animation shorthand, this is handled by using analyzeAnimation with item.type === 'name' once that item type is added.
Example
import { parse_value } from '@projectwallace/css-parser/parse-value'
import { extractAnimationNames } from '@projectwallace/css-analyzer/values'
extractAnimationNames(parse_value('slide-in, "fade-out", none'))
// → ['slide-in', 'fade-out']
// 'none' is excluded as a keyword
Notes
none should be excluded (it is a CSS keyword meaning "no animation", not a keyframe name)
- Quoted strings should be unwrapped:
"slide-in" → 'slide-in'
- Comma-separated lists represent multiple animations and should each produce an entry
Context
Cross-referencing
@keyframesdeclarations against their usages requires two pieces of information:@keyframes <name> { })animation-name: <name>andanimation: ... <name> ...shorthands)Extracting (2) from parsed values is non-trivial for the
animationshorthand because the name must be distinguished from timing keywords, direction keywords, fill-mode keywords, etc. This disambiguation is already handled insideanalyzeAnimation, but the name is not currently surfaced (see related issue: exposenameitem type inanalyzeAnimation).For
animation-name, the value is a comma-separated list of identifiers or strings that are always names — there is no disambiguation needed, but quoted names ("slide-in") must be unwrapped.Proposed API
For the animation shorthand, this is handled by using
analyzeAnimationwithitem.type === 'name'once that item type is added.Example
Notes
noneshould be excluded (it is a CSS keyword meaning "no animation", not a keyframe name)"slide-in"→'slide-in'