Skip to content

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

@bartveneman

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions