feat(core): support animation shorthand (#415)

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.

Author: mizdra

.changeset/animation-shorthand-references.md

@@ -0,0 +1,5 @@
+---
+'@css-modules-kit/core': minor
+---
+
+feat(core): support `animation` shorthand

docs/ts-plugin-internals.ja.md

@@ -302,9 +302,9 @@ CSS Modules Kit ではこの問題を、
 
 参考: [mizdra/volar-single-quote-span-problem](https://github.com/mizdra/volar-single-quote-span-problem)
 
-### Local Token References (`animation-name`, `composes`) のサポート
+### Local Token References (`animation-name`, `animation`, `composes`) のサポート
 
-CSS では `@keyframes foo {...}` で定義したアニメーション名を `animation-name: foo;` で参照できます。また CSS Modules では `composes: foo;` で同一ファイル内の別のクラス名を参照できます。CSS Modules Kit はこうした現在のファイルで利用可能なトークンへの参照 (local token reference) を Volar.js の mapping を介して定義側と結びつけ、Go to Definition / Find All References / Rename を一貫して動作させます。
+CSS では `@keyframes foo {...}` で定義したアニメーション名を `animation-name: foo;` や `animation` 一括指定 (例: `animation: foo 1s;`) で参照できます。また CSS Modules では `composes: foo;` で同一ファイル内の別のクラス名を参照できます。CSS Modules Kit はこうした現在のファイルで利用可能なトークンへの参照 (local token reference) を Volar.js の mapping を介して定義側と結びつけ、Go to Definition / Find All References / Rename を一貫して動作させます。
 
 仕組みとしては、生成する `.d.ts` の末尾に「参照の式」を埋め込みます。default export の場合は `styles['<name>'];` という bracket access の式文として、named export の場合は自モジュールへの self-import (`declare const __self: typeof import('./<self-basename>');`) を 1 度生成した上で `__self['<name>'];` という bracket access として吐きます。各参照式のクオート内側部分には CSS 側の参照位置の mapping を張ります。
 

docs/ts-plugin-internals.md

@@ -305,9 +305,9 @@ With this, `getDefinitionAtPosition`'s `{ start: 27, length: 5 }` also matches t
 
 Reference: [mizdra/volar-single-quote-span-problem](https://github.com/mizdra/volar-single-quote-span-problem)
 
-### Local Token References (`animation-name`, `composes`) Support
+### Local Token References (`animation-name`, `animation`, `composes`) Support
 
-In CSS, an animation name defined with `@keyframes foo {...}` can be referenced by `animation-name: foo;`. In CSS Modules, `composes: foo;` can also reference another class name in the same file. CSS Modules Kit links such references to tokens available in the current file (local token references) to their definitions via Volar.js mappings, making Go to Definition / Find All References / Rename work consistently.
+In CSS, an animation name defined with `@keyframes foo {...}` can be referenced by `animation-name: foo;` or by the `animation` shorthand (e.g. `animation: foo 1s;`). In CSS Modules, `composes: foo;` can also reference another class name in the same file. CSS Modules Kit links such references to tokens available in the current file (local token references) to their definitions via Volar.js mappings, making Go to Definition / Find All References / Rename work consistently.
 
 The mechanism is to embed "reference expressions" at the end of the generated `.d.ts`. For default export, it is emitted as a bracket access expression statement like `styles['<name>'];`. For named export, after emitting a self-import (`declare const __self: typeof import('./<self-basename>');`) once, it is emitted as a bracket access like `__self['<name>'];`. A mapping is attached to the inside-of-quotes part of each reference expression, pointing to the reference position in the CSS.
 

examples/1-basic/src/a.module.css

@@ -9,6 +9,7 @@
 .a_5 {
   composes: a_1, b_1 from './b.module.css';
   animation-name: a_4;
+  animation: a_4 1s linear;
 }
 
 @import './b.module.css';