Skip to content

Commit 7f274b8

Browse files
synecdokeysynecdokey
committed
feat(preflight): simplify sans-serif font stack
`-apple-system` and `BlinkMacSystemFont` were historically needed for IE11 and chakra-based Edge (The one that wasn't chromium-based). https://caniuse.com/font-family-system-ui has more details around it.
1 parent 778bea7 commit 7f274b8

8 files changed

+12
-17
lines changed

‎src/css/preflight.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ html {
3131
-webkit-text-size-adjust: 100%; /* 2 */
3232
-moz-tab-size: 4; /* 3 */
3333
tab-size: 4; /* 3 */
34-
font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
34+
font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
3535
font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
3636
font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
3737
}

‎stubs/config.full.js

-2
Original file line numberDiff line numberDiff line change
@@ -303,8 +303,6 @@ module.exports = {
303303
sans: [
304304
'ui-sans-serif',
305305
'system-ui',
306-
'-apple-system',
307-
'BlinkMacSystemFont',
308306
'"Segoe UI"',
309307
'Roboto',
310308
'"Helvetica Neue"',

‎tests/kitchen-sink.test.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -239,9 +239,8 @@ test('it works', () => {
239239
expect(result.css).toMatchFormattedCss(css`
240240
.theme-test {
241241
color: #3b82f6;
242-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
243-
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
244-
Segoe UI Symbol, Noto Color Emoji;
242+
font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
243+
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
245244
}
246245
@media (min-width: 1024px) {
247246
.screen-test {

‎tests/plugins/__snapshots__/preflight.test.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ html {
1616
tab-size: 4;
1717
font-feature-settings: normal;
1818
font-variation-settings: normal;
19-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
19+
font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
2020
line-height: 1.5;
2121
}
2222
@@ -209,7 +209,7 @@ html {
209209
tab-size: 4;
210210
font-feature-settings: normal;
211211
font-variation-settings: normal;
212-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
212+
font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
213213
line-height: 1.5;
214214
}
215215

‎tests/plugins/fontFamily.test.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ quickPluginTest('fontFamily').toMatchFormattedCss(css`
66
monospace;
77
}
88
.font-sans {
9-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
10-
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
11-
Segoe UI Symbol, Noto Color Emoji;
9+
font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
10+
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
1211
}
1312
.font-serif {
1413
font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;

‎tests/raw-content.test.css

+2-3
Original file line numberDiff line numberDiff line change
@@ -526,9 +526,8 @@
526526
vertical-align: middle;
527527
}
528528
.font-sans {
529-
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
530-
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
531-
Noto Color Emoji;
529+
font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
530+
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
532531
}
533532
.text-2xl {
534533
font-size: 1.5rem;

‎tests/resolveConfig.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ test('theme key is merged instead of replaced', () => {
148148
'grey-lighter': '#f1f5f8',
149149
},
150150
fonts: {
151-
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
151+
sans: ['system-ui', 'Roboto', 'sans-serif'],
152152
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
153153
},
154154
screens: {
@@ -174,7 +174,7 @@ test('theme key is merged instead of replaced', () => {
174174
'grey-lighter': '#f1f5f8',
175175
},
176176
fonts: {
177-
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
177+
sans: ['system-ui', 'Roboto', 'sans-serif'],
178178
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
179179
},
180180
screens: {

‎tests/source-maps.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ test('preflight + base have source maps', async () => {
9898
"13:2-13 -> 13:2-13",
9999
"14:2-31 -> 14:2-31",
100100
"15:2-33 -> 15:2-33",
101-
"16:2-208 -> 16:2-208",
101+
"16:2-173 -> 16:2-173",
102102
"17:2-18 -> 17:2-18",
103103
"18:0 -> 18:0",
104104
"20:0 -> 20:0",

0 commit comments

Comments
 (0)