Skip to content

Add value-level helper to extract keyframe names referenced in animation / animation-name values #606

Description

@bartveneman

Context

Cross-referencing @keyframes declarations against their usages requires two pieces of information:

  1. The names of declared keyframes (from @keyframes <name> { })
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions