-
-
Notifications
You must be signed in to change notification settings - Fork 779
/
position.ts
152 lines (134 loc) · 5.95 KB
/
position.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
147
148
149
150
151
152
import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
import type { Theme } from '../theme'
import { globalKeywords, handler as h, insetMap, makeGlobalStaticRules } from '../utils'
export const positions: Rule[] = [
[/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
[/^(?:position-|pos-)([-\w]+)$/, ([, v]) => globalKeywords.includes(v) ? { position: v } : undefined],
[/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })],
]
export const justifies: Rule[] = [
// contents
['justify-start', { 'justify-content': 'flex-start' }],
['justify-end', { 'justify-content': 'flex-end' }],
['justify-center', { 'justify-content': 'center' }],
['justify-between', { 'justify-content': 'space-between' }],
['justify-around', { 'justify-content': 'space-around' }],
['justify-evenly', { 'justify-content': 'space-evenly' }],
...makeGlobalStaticRules('justify', 'justify-content'),
// items
['justify-items-start', { 'justify-items': 'start' }],
['justify-items-end', { 'justify-items': 'end' }],
['justify-items-center', { 'justify-items': 'center' }],
['justify-items-stretch', { 'justify-items': 'stretch' }],
...makeGlobalStaticRules('justify-items'),
// selfs
['justify-self-auto', { 'justify-self': 'auto' }],
['justify-self-start', { 'justify-self': 'start' }],
['justify-self-end', { 'justify-self': 'end' }],
['justify-self-center', { 'justify-self': 'center' }],
['justify-self-stretch', { 'justify-self': 'stretch' }],
...makeGlobalStaticRules('justify-self'),
]
export const orders: Rule[] = [
[/^order-(.+)$/, ([, v]) => ({ order: h.bracket.cssvar.number(v) })],
['order-first', { order: '-9999' }],
['order-last', { order: '9999' }],
['order-none', { order: '0' }],
]
export const alignments: Rule[] = [
// contents
['content-center', { 'align-content': 'center' }],
['content-start', { 'align-content': 'flex-start' }],
['content-end', { 'align-content': 'flex-end' }],
['content-between', { 'align-content': 'space-between' }],
['content-around', { 'align-content': 'space-around' }],
['content-evenly', { 'align-content': 'space-evenly' }],
...makeGlobalStaticRules('content', 'align-content'),
// items
['items-start', { 'align-items': 'flex-start' }],
['items-end', { 'align-items': 'flex-end' }],
['items-center', { 'align-items': 'center' }],
['items-baseline', { 'align-items': 'baseline' }],
['items-stretch', { 'align-items': 'stretch' }],
...makeGlobalStaticRules('items', 'align-items'),
// selfs
['self-auto', { 'align-self': 'auto' }],
['self-start', { 'align-self': 'flex-start' }],
['self-end', { 'align-self': 'flex-end' }],
['self-center', { 'align-self': 'center' }],
['self-stretch', { 'align-self': 'stretch' }],
['self-baseline', { 'align-self': 'baseline' }],
...makeGlobalStaticRules('self', 'align-self'),
]
export const placements: Rule[] = [
// contents
['place-content-center', { 'place-content': 'center' }],
['place-content-start', { 'place-content': 'start' }],
['place-content-end', { 'place-content': 'end' }],
['place-content-between', { 'place-content': 'space-between' }],
['place-content-around', { 'place-content': 'space-around' }],
['place-content-evenly', { 'place-content': 'space-evenly' }],
['place-content-stretch', { 'place-content': 'stretch' }],
...makeGlobalStaticRules('place-content'),
// items
['place-items-start', { 'place-items': 'start' }],
['place-items-end', { 'place-items': 'end' }],
['place-items-center', { 'place-items': 'center' }],
['place-items-stretch', { 'place-items': 'stretch' }],
...makeGlobalStaticRules('place-items'),
// selfs
['place-self-auto', { 'place-self': 'auto' }],
['place-self-start', { 'place-self': 'start' }],
['place-self-end', { 'place-self': 'end' }],
['place-self-center', { 'place-self': 'center' }],
['place-self-stretch', { 'place-self': 'stretch' }],
...makeGlobalStaticRules('place-self'),
]
function handleInsetValue(v: string, { theme }: RuleContext<Theme>): string | number | undefined {
return theme.spacing?.[v] ?? h.bracket.cssvar.global.auto.fraction.rem(v)
}
function handleInsetValues([, d, v]: string[], ctx: RuleContext): CSSEntries | undefined {
const r = handleInsetValue(v, ctx)
if (r != null && d in insetMap)
return insetMap[d].map(i => [i.slice(1), r])
}
export const insets: Rule[] = [
[/^(?:position-|pos-)?inset-(.+)$/, ([, v], ctx) => ({ inset: handleInsetValue(v, ctx) }),
{
autocomplete: [
'(position|pos)-inset-<directions>-$spacing',
'(position|pos)-inset-(block|inline)-$spacing',
'(position|pos)-inset-(bs|be|is|ie)-$spacing',
'(position|pos)-(top|left|right|bottom)-$spacing',
],
},
],
[/^(?:position-|pos-)?(start|end)-(.+)$/, handleInsetValues],
[/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues],
[/^(?:position-|pos-)?inset-([rltbse])-(.+)$/, handleInsetValues],
[/^(?:position-|pos-)?inset-(block|inline)-(.+)$/, handleInsetValues],
[/^(?:position-|pos-)?inset-([bi][se])-(.+)$/, handleInsetValues],
[/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v], ctx) => ({ [d]: handleInsetValue(v, ctx) })],
]
export const floats: Rule[] = [
// floats
['float-left', { float: 'left' }],
['float-right', { float: 'right' }],
['float-none', { float: 'none' }],
...makeGlobalStaticRules('float'),
// clears
['clear-left', { clear: 'left' }],
['clear-right', { clear: 'right' }],
['clear-both', { clear: 'both' }],
['clear-none', { clear: 'none' }],
...makeGlobalStaticRules('clear'),
]
export const zIndexes: Rule[] = [
[/^(?:position-|pos-)?z([\d.]+)$/, ([, v]) => ({ 'z-index': h.number(v) })],
[/^(?:position-|pos-)?z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.global.auto.number(v) }), { autocomplete: 'z-<num>' }],
]
export const boxSizing: Rule[] = [
['box-border', { 'box-sizing': 'border-box' }],
['box-content', { 'box-sizing': 'content-box' }],
...makeGlobalStaticRules('box', 'box-sizing'),
]