projectwallace / projectwallace/css-analyzer

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

Open
#606 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

✨ enhancement
Dominant language
TypeScript
Stars
366
Forks
15
Avg merge
3h 23m
Merged PRs (30d)
3

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the values entry point imported as @projectwallace/css-analyzer/values and the parse_value output from @projectwallace/css-parser/parse-value. Read analyzeAnimation for the related name-disambiguation behavior. Done means animation-name values yield comma-separated names, unwrap quoted strings, and exclude none.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.