/
fontFamily.test.js
98 lines (88 loc) · 2.41 KB
/
fontFamily.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
import { run, html, css } from '../util/run'
test('font-family utilities can be defined as a string', () => {
let config = {
content: [{ raw: html`<div class="font-sans"></div>` }],
theme: {
fontFamily: {
sans: 'Helvetica, Arial, sans-serif',
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.font-sans {
font-family: Helvetica, Arial, sans-serif;
}
`)
})
})
test('font-family utilities can be defined as an array', () => {
let config = {
content: [{ raw: html`<div class="font-sans"></div>` }],
theme: {
fontFamily: {
sans: ['Helvetica', 'Arial', 'sans-serif'],
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.font-sans {
font-family: Helvetica, Arial, sans-serif;
}
`)
})
})
test('font-family values are not automatically escaped', () => {
let config = {
content: [{ raw: html`<div class="font-sans"></div>` }],
theme: {
fontFamily: {
sans: ["'Exo 2'", 'sans-serif'],
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
.font-sans {
font-family: 'Exo 2', sans-serif;
}
`)
})
})
test('font-feature-settings can be provided when families are defined as a string', () => {
let config = {
content: [{ raw: html`<div class="font-sans"></div>` }],
theme: {
fontFamily: {
sans: ['Helvetica, Arial, sans-serif', { fontFeatureSettings: '"cv11", "ss01"' }],
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(`
.font-sans {
font-family: Helvetica, Arial, sans-serif;
font-feature-settings: "cv11", "ss01";
}
`)
})
})
test('font-feature-settings can be provided when families are defined as an array', () => {
let config = {
content: [{ raw: html`<div class="font-sans"></div>` }],
theme: {
fontFamily: {
sans: [['Helvetica', 'Arial', 'sans-serif'], { fontFeatureSettings: '"cv11", "ss01"' }],
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(`
.font-sans {
font-family: Helvetica, Arial, sans-serif;
font-feature-settings: "cv11", "ss01";
}
`)
})
})