/
transform.ts
146 lines (133 loc) · 4.16 KB
/
transform.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import type { CSSValues, Rule, RuleContext } from '@unocss/core'
import type { Theme } from '../theme'
import { handler as h, makeGlobalStaticRules, positionMap, xyzMap } from '../utils'
const transformCpu = [
'translateX(var(--un-translate-x))',
'translateY(var(--un-translate-y))',
'translateZ(var(--un-translate-z))',
'rotate(var(--un-rotate))',
'rotateX(var(--un-rotate-x))',
'rotateY(var(--un-rotate-y))',
'rotateZ(var(--un-rotate-z))',
'skewX(var(--un-skew-x))',
'skewY(var(--un-skew-y))',
'scaleX(var(--un-scale-x))',
'scaleY(var(--un-scale-y))',
'scaleZ(var(--un-scale-z))',
].join(' ')
const transformGpu = [
'translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))',
'rotate(var(--un-rotate))',
'rotateX(var(--un-rotate-x))',
'rotateY(var(--un-rotate-y))',
'rotateZ(var(--un-rotate-z))',
'skewX(var(--un-skew-x))',
'skewY(var(--un-skew-y))',
'scaleX(var(--un-scale-x))',
'scaleY(var(--un-scale-y))',
'scaleZ(var(--un-scale-z))',
].join(' ')
export const transformBase = {
// transform
'--un-rotate': 0,
'--un-rotate-x': 0,
'--un-rotate-y': 0,
'--un-rotate-z': 0,
'--un-scale-x': 1,
'--un-scale-y': 1,
'--un-scale-z': 1,
'--un-skew-x': 0,
'--un-skew-y': 0,
'--un-translate-x': 0,
'--un-translate-y': 0,
'--un-translate-z': 0,
}
export const transforms: Rule[] = [
// origins
[/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ 'transform-origin': positionMap[s] ?? h.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(positionMap).join('|')})`, `origin-(${Object.keys(positionMap).join('|')})`] }],
// perspectives
[/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
const v = h.bracket.cssvar.px.numberWithUnit(s)
if (v != null) {
return {
'-webkit-perspective': v,
'perspective': v,
}
}
}],
// skip 1 & 2 letters shortcut
[/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
const v = h.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : undefined)
if (v != null) {
return {
'-webkit-perspective-origin': v,
'perspective-origin': v,
}
}
}],
// modifiers
[/^(?:transform-)?translate-()(.+)$/, handleTranslate],
[/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
[/^(?:transform-)?rotate-()(.+)$/, handleRotate],
[/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
[/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
[/^(?:transform-)?scale-()(.+)$/, handleScale],
[/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
// style
[/^(?:transform-)?preserve-3d$/, () => ({ 'transform-style': 'preserve-3d' })],
[/^(?:transform-)?preserve-flat$/, () => ({ 'transform-style': 'flat' })],
// base
['transform', { transform: transformCpu }],
['transform-cpu', { transform: transformCpu }],
['transform-gpu', { transform: transformGpu }],
['transform-none', { transform: 'none' }],
...makeGlobalStaticRules('transform'),
]
function handleTranslate([, d, b]: string[], { theme }: RuleContext<Theme>): CSSValues | undefined {
const v = theme.spacing?.[b] ?? h.bracket.cssvar.fraction.rem(b)
if (v != null) {
return [
...xyzMap[d].map((i): [string, string] => [`--un-translate${i}`, v]),
['transform', transformCpu],
]
}
}
function handleScale([, d, b]: string[]): CSSValues | undefined {
const v = h.bracket.cssvar.fraction.percent(b)
if (v != null) {
return [
...xyzMap[d].map((i): [string, string] => [`--un-scale${i}`, v]),
['transform', transformCpu],
]
}
}
function handleRotate([, d = '', b]: string[]): CSSValues | undefined {
const v = h.bracket.cssvar.degree(b)
if (v != null) {
if (d) {
return {
'--un-rotate': 0,
[`--un-rotate-${d}`]: v,
'transform': transformCpu,
}
}
else {
return {
'--un-rotate-x': 0,
'--un-rotate-y': 0,
'--un-rotate-z': 0,
'--un-rotate': v,
'transform': transformCpu,
}
}
}
}
function handleSkew([, d, b]: string[]): CSSValues | undefined {
const v = h.bracket.cssvar.degree(b)
if (v != null) {
return {
[`--un-skew-${d}`]: v,
transform: transformCpu,
}
}
}