/
ringWidth.test.js
104 lines (100 loc) · 2.32 KB
/
ringWidth.test.js
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
import invokePlugin from '../util/invokePlugin'
import plugin from '../../src/plugins/ringWidth'
test('ring widths', () => {
const config = {
theme: {
ringWidth: {
4: '4px',
},
ringOffsetWidth: {
4: '4px',
},
ringColor: {
black: '#000',
},
ringOffsetColor: {
white: '#fff',
},
ringOpacity: {
50: '.5',
},
},
variants: {
ringColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'*': {
'--tw-ring-color': 'rgba(147, 197, 253, 0.5)',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-color': '#fff',
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-offset-width': '0px',
'--tw-ring-shadow': '0 0 #0000',
},
},
{
respectImportant: false,
},
],
[
{
'.ring-4': {
'--tw-ring-offset-shadow':
'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
'--tw-ring-shadow':
'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
'box-shadow':
'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
},
'.ring-inset': {
'--tw-ring-inset': 'inset',
},
},
undefined,
],
])
})
test('ring widths with defaults', () => {
const config = {
theme: {
ringWidth: {},
ringOffsetWidth: {
DEFAULT: '2px',
},
ringOffsetColor: {
DEFAULT: 'pink',
},
},
variants: {
ringColor: [],
},
}
const { utilities } = invokePlugin(plugin(), config)
expect(utilities).toEqual([
[
{
'*': {
'--tw-ring-color': 'rgba(147, 197, 253, 0.5)',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-color': 'pink',
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-offset-width': '2px',
'--tw-ring-shadow': '0 0 #0000',
},
},
{ respectImportant: false },
],
[
{
'.ring-inset': {
'--tw-ring-inset': 'inset',
},
},
undefined,
],
])
})