projectwallace / projectwallace/css-analyzer
Add value-level helper to extract keyframe names referenced in `animation` / `animation-name` values
Nobody has claimed this yet.
- 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:
- The names of declared keyframes (from
@keyframes <name> { }) - The names of used keyframes (from
animation-name: <name>andanimation: ... <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
noneshould 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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