/
preset-tagify.test.ts
108 lines (96 loc) · 3.19 KB
/
preset-tagify.test.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
import presetIcons from '@unocss/preset-icons'
import { type ExtractorContext, createGenerator } from '@unocss/core'
import { describe, expect, test } from 'vitest'
import presetTagify, { extractorTagify } from '@unocss/preset-tagify'
import presetMini from '@unocss/preset-mini'
describe('tagify', () => {
test('extractor', async () => {
const extractor = extractorTagify({})
const code = `
<foo>
<bar>spam</bar>
<baz eggs />
</foo>
`
expect(extractor.extract({ code } as ExtractorContext)).toMatchInlineSnapshot(`
Set {
"__TAGIFY__foo",
"__TAGIFY__bar",
"__TAGIFY__baz",
}
`)
})
test('preset', async () => {
const uno = createGenerator({
shortcuts: [
['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
],
rules: [
['custom-rule', { 'background-color': 'pink' }],
],
presets: [
presetMini(),
presetTagify(),
],
})
const code = `
<flex>
<h1 class="h2"> excluded heading </h1>
<text-red> red text </text-red>
<text-green5:10 />
<m-1> margin </m-1>
<custom-rule class="p2"> custom </custom-rule>
<btn> shortcut </btn>
<hover:color-red> variant </hover:color-red>
</flex>
`
expect((await uno.generate(code, { preflights: false })).css).toMatchInlineSnapshot(`
"/* layer: shortcuts */
btn{padding-left:1rem;padding-right:1rem;padding-top:0.25rem;padding-bottom:0.25rem;display:inline-block;--un-bg-opacity:1;background-color:rgba(13,148,136,var(--un-bg-opacity));border-radius:0.25rem;--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));cursor:pointer;}
btn:disabled{opacity:0.5;--un-bg-opacity:1;background-color:rgba(75,85,99,var(--un-bg-opacity));cursor:default;}
btn:hover{--un-bg-opacity:1;background-color:rgba(15,118,110,var(--un-bg-opacity));}
/* layer: default */
.p2{padding:0.5rem;}
m-1{margin:0.25rem;}
hover\\\\:color-red:hover,
text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
text-green5\\\\:10{color:rgba(34,197,94,0.1);}
flex{display:flex;}
.h2{height:0.5rem;}
custom-rule{background-color:pink;}"
`)
})
test('extraProperties', async () => {
const uno = createGenerator({
presets: [
presetIcons(),
presetTagify({
extraProperties:
matched => matched.startsWith('i-') ? { display: 'inline-block' } : {},
}),
],
})
const code = `
<i-mdi-robot-happy />
`
expect((await uno.generate(code, { preflights: false })).css).toContain('display:inline-block')
})
test('prefix', async () => {
const uno = createGenerator({
presets: [
presetMini(),
presetTagify({
prefix: 'un-',
}),
],
})
const code = `
<flex> </flex>
<un-flex> </un-flex>
`
expect((await uno.generate(code, { preflights: false })).css).toMatchInlineSnapshot(`
"/* layer: default */
un-flex{display:flex;}"
`)
})
})