/
animation.ts
77 lines (71 loc) · 3.63 KB
/
animation.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import type { Rule } from '@unocss/core'
import { globalKeywords, handler as h, makeGlobalStaticRules } from '@unocss/preset-mini/utils'
import type { Theme } from '@unocss/preset-mini'
export const animations: Rule<Theme>[] = [
[/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme }) => {
const kf = theme.animation?.keyframes?.[name]
if (kf) {
return [
`@keyframes ${name}${kf}`,
{ animation: name },
]
}
}, { autocomplete: ['animate-keyframes-$animation.keyframes', 'keyframes-$animation.keyframes'] }],
[/^animate-(.+)$/, ([, name], { theme }) => {
const kf = theme.animation?.keyframes?.[name]
if (kf) {
const duration = theme.animation?.durations?.[name] ?? '1s'
const timing = theme.animation?.timingFns?.[name] ?? 'linear'
const count = theme.animation?.counts?.[name] ?? 1
const props = theme.animation?.properties?.[name]
return [
`@keyframes ${name}${kf}`,
{
animation: `${name} ${duration} ${timing} ${count}`,
...props,
},
]
}
return { animation: h.bracket.cssvar(name) }
}, { autocomplete: 'animate-$animation.keyframes' }],
[/^animate-name-(.+)/, ([, d]) => ({ 'animation-name': h.bracket.cssvar(d) ?? d })],
// timings
[/^animate-duration-(.+)$/, ([, d], { theme }) => ({ 'animation-duration': theme.duration?.[d || 'DEFAULT'] ?? h.bracket.cssvar.time(d) }), { autocomplete: ['animate-duration', 'animate-duration-$duration'] }],
[/^animate-delay-(.+)$/, ([, d], { theme }) => ({ 'animation-delay': theme.duration?.[d || 'DEFAULT'] ?? h.bracket.cssvar.time(d) }), { autocomplete: ['animate-delay', 'animate-delay-$duration'] }],
[/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ 'animation-timing-function': theme.easing?.[d || 'DEFAULT'] ?? h.bracket.cssvar(d) }), { autocomplete: 'animate-delay-$easing' }],
// fill mode
[/^animate-(fill-mode-|fill-|mode-)?(.+)$/,
([, t, d]) => ['none', 'forwards', 'backwards', 'both', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-fill-mode': d } : undefined,
{
autocomplete: [
'animate-(fill|mode|fill-mode)',
'animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)',
'animate-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)',
],
},
],
// direction
[/^animate-(direction-)?(.+)$/,
([, t, d]) => ['normal', 'reverse', 'alternate', 'alternate-reverse', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-direction': d } : undefined,
{
autocomplete: [
'animate-direction',
'animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)',
'animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)',
],
},
],
// others
[/^animate-(?:iteration-|count-|iteration-count-)(.+)$/, ([, d]) => ({ 'animation-iteration-count': h.bracket.cssvar(d) ?? d.replace(/\-/g, ',') }), { autocomplete: ['animate-(iteration|count|iteration-count)', 'animate-(iteration|count|iteration-count)-<num>'] }],
[/^animate-(play-state-|play-|state-)?(.+)$/,
([, t, d]) => ['paused', 'running', ...[t ? globalKeywords : []]].includes(d) ? { 'animation-play-state': d } : undefined,
{
autocomplete: [
'animate-(play|state|play-state)',
'animate-(play|state|play-state)-(paused|running|inherit|initial|revert|revert-layer|unset)',
'animate-(paused|running|inherit|initial|revert|revert-layer|unset)',
],
}],
['animate-none', { animation: 'none' }],
...makeGlobalStaticRules('animate', 'animation'),
]