-
-
Notifications
You must be signed in to change notification settings - Fork 779
/
pseudo.test.ts
82 lines (73 loc) · 1.99 KB
/
pseudo.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
import { expect, test } from 'vitest'
import { createGenerator } from '@unocss/core'
import { variantPseudoClassesAndElements } from './pseudo'
// https://github.com/unocss/unocss/issues/2713
test('pseudo variant order', async () => {
const uno = createGenerator({
variants: [
variantPseudoClassesAndElements(),
],
rules: [
[/^foo-(\d)$/, ([_, a]) => ({ text: `foo-${a}` })],
],
})
const css = await uno.generate([
'foo-1',
'hover:foo-2',
'focus:foo-3',
'disabled:foo-4',
]).then(r => r.css)
expect(css.indexOf('foo-1')).toBeLessThan(css.indexOf('foo-2'))
expect(css.indexOf('foo-2')).toBeLessThan(css.indexOf('foo-3'))
expect(css.indexOf('foo-3')).toBeLessThan(css.indexOf('foo-4'))
expect(css)
.toMatchInlineSnapshot(`
"/* layer: default */
.foo-1{text:foo-1;}
.hover\\\\:foo-2:hover{text:foo-2;}
.focus\\\\:foo-3:focus{text:foo-3;}
.disabled\\\\:foo-4:disabled{text:foo-4;}"
`)
const css2 = await uno.generate([
'foo-1',
'hover:foo-1',
'focus:foo-1',
'disabled:foo-1',
]).then(r => r.css)
expect(css2)
.toMatchInlineSnapshot(`
"/* layer: default */
.foo-1{text:foo-1;}
.hover\\\\:foo-1:hover{text:foo-1;}
.focus\\\\:foo-1:focus{text:foo-1;}
.disabled\\\\:foo-1:disabled{text:foo-1;}"
`)
})
// https://github.com/unocss/unocss/issues/2733
test('focus-visible:', async () => {
const uno = createGenerator({
variants: [
variantPseudoClassesAndElements(),
],
rules: [
[/^foo-(\d)$/, ([_, a]) => ({ text: `foo-${a}` })],
],
})
const result = await uno.generate([
'focus-visible:foo-1',
'focus:foo-2',
])
expect(result.matched)
.toMatchInlineSnapshot(`
Set {
"focus-visible:foo-1",
"focus:foo-2",
}
`)
expect(result.css)
.toMatchInlineSnapshot(`
"/* layer: default */
.focus\\\\:foo-2:focus{text:foo-2;}
.focus-visible\\\\:foo-1:focus-visible{text:foo-1;}"
`)
})