/
behaviors.ts
37 lines (30 loc) · 1.42 KB
/
behaviors.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
import type { Rule } from '@unocss/core'
import type { Theme } from '../theme'
import { colorResolver, globalKeywords, handler as h } from '../utils'
export const outline: Rule<Theme>[] = [
// size
[/^outline-(?:width-|size-)?(.+)$/, ([, d], { theme }) => ({ 'outline-width': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'outline-(width|size)-<num>' }],
// color
[/^outline-(?:color-)?(.+)$/, colorResolver('outline-color', 'outline-color'), { autocomplete: 'outline-$colors' }],
// offset
[/^outline-offset-(.+)$/, ([, d], { theme }) => ({ 'outline-offset': theme.lineWidth?.[d] ?? h.bracket.cssvar.px(d) }), { autocomplete: 'outline-(offset)-<num>' }],
// style
['outline', { 'outline-style': 'solid' }],
...['auto', 'dashed', 'dotted', 'double', 'hidden', 'solid', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords].map(v => [`outline-${v}`, { 'outline-style': v }] as Rule<Theme>),
['outline-none', { 'outline': '2px solid transparent', 'outline-offset': '2px' }],
]
export const appearance: Rule[] = [
['appearance-none', {
'appearance': 'none',
'-webkit-appearance': 'none',
}],
]
const willChangeProperty = (prop: string): string | undefined => {
return h.properties.auto.global(prop) ?? {
contents: 'contents',
scroll: 'scroll-position',
}[prop]
}
export const willChange: Rule[] = [
[/^will-change-(.+)/, ([, p]) => ({ 'will-change': willChangeProperty(p) })],
]