feat(core): support animation shorthand#415
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: aa56abd The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
Adds support for extracting local token references from the CSS animation shorthand so keyframe usages participate in TS plugin features (Go to Definition / Find All References / Rename) and checker diagnostics, matching existing animation-name behavior.
Changes:
- Extend the core CSS module parser to recognize
animationdeclarations and extract keyframe-name references. - Implement a conservative heuristic in
animation-parserto detect<keyframes-name>withinanimationshorthand values (includinglocal(...)handling). - Add/extend unit tests, docs, and an example, plus a changeset for releasing the feature.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/parser/css-module-parser.ts | Collect token references from animation shorthand declarations when keyframes is enabled. |
| packages/core/src/parser/css-module-parser.test.ts | Adds coverage ensuring animation: ... references are collected. |
| packages/core/src/parser/animation-parser.ts | Adds animation property detection and parsing logic for shorthand keyframe references. |
| packages/core/src/parser/animation-parser.test.ts | Adds tests for isAnimationProp and parseAnimationProp heuristic behavior. |
| examples/1-basic/src/a.module.css | Updates example to include animation shorthand referencing a keyframe. |
| docs/ts-plugin-internals.md | Documents animation shorthand as a source of local token references. |
| docs/ts-plugin-internals.ja.md | Japanese documentation update mirroring the above. |
| .changeset/animation-shorthand-references.md | Changeset/release note describing the new shorthand support. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
78f3641 to
01bdfcd
Compare
Keyframe names referenced via the `animation` shorthand property (e.g. `animation: foo 1s linear;`) are now extracted as local token references, the same way `animation-name: foo;` already is.
01bdfcd to
aa56abd
Compare
animation shorthandanimation shorthand
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
close: #392
Summary
Keyframe names referenced via the
animationshorthand (e.g.animation: foo 1s linear;) are now extracted as local token references, the same wayanimation-name: foo;already is. Go to Definition, Find All References, and Rename work across the reference and the@keyframes foo {...}declaration, and the check phase reportsCannot find token '<name>'.for unresolved names.Design decisions
The
animationshorthand is ambiguous because<keyframes-name>shares thesame token shape as many
animation-*keywords. CSS Modules Kit intentionallyuses a conservative, stateless heuristic:
<custom-ident>words as local keyframe referencesanimation-*longhands, CSS-wide keywords, times,numbers, strings, and functions except
local(...)local(name), skipglobal(name)and other functionsThis differs from the CSS grammar and css-loader in a few edge cases:
animation: infinite infiniteinfiniteas the keyframes name after the iteration-count slot is filled. CSS Modules Kit does not count keyword occurrences; reserved keywords are always skipped.animation: foo autofooonlyautois reserved by the current CSS Animations Level 2 shorthand grammar (animation-duration/animation-timeline). css-loader's CSS Modules animation-name heuristic predates that grammar change and does not includeautoin its reserved keyword list, so it localizesauto.animation: "foo"animation: a_1 a_2a_1anda_2animation: --foo--fooanimation: local(foo)fooanimation: global(foo)How to verify
vp test packages/core/src/parser/animation-parser.test.tsexamples/1-basic,.a_5 { animation: a_4 1s linear; }references@keyframes a_4. Go to Definition / Find All References / Rename ona_4work across the reference and the declaration.