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.
tailwindlabs · Aug 4, 2023 · 7f274b8 · 7f274b8
1 parent 778bea7
commit 7f274b8
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 17 deletions.
diff --git a/src/css/preflight.css b/src/css/preflight.css
@@ -31,7 +31,7 @@ html {
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
-  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 */
+  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 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
   font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
 }

diff --git a/stubs/config.full.js b/stubs/config.full.js
@@ -303,8 +303,6 @@ module.exports = {
       sans: [
         'ui-sans-serif',
         'system-ui',
-        '-apple-system',
-        'BlinkMacSystemFont',
         '"Segoe UI"',
         'Roboto',
         '"Helvetica Neue"',

diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -239,9 +239,8 @@ test('it works', () => {
     expect(result.css).toMatchFormattedCss(css`
       .theme-test {
         color: #3b82f6;
-        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;
+        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;
       }
       @media (min-width: 1024px) {
         .screen-test {

diff --git a/tests/plugins/__snapshots__/preflight.test.js.snap b/tests/plugins/__snapshots__/preflight.test.js.snap
@@ -16,7 +16,7 @@ html {
   tab-size: 4;
   font-feature-settings: normal;
   font-variation-settings: normal;
-  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;
+  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;
   line-height: 1.5;
 }
 
@@ -209,7 +209,7 @@ html {
   tab-size: 4;
   font-feature-settings: normal;
   font-variation-settings: normal;
-  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;
+  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;
   line-height: 1.5;
 }
 

diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js
@@ -6,9 +6,8 @@ quickPluginTest('fontFamily').toMatchFormattedCss(css`
       monospace;
   }
   .font-sans {
-    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;
+    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;
   }
   .font-serif {
     font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;

diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
@@ -526,9 +526,8 @@
   vertical-align: middle;
 }
 .font-sans {
-  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;
+  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;
 }
 .text-2xl {
   font-size: 1.5rem;

diff --git a/tests/resolveConfig.test.js b/tests/resolveConfig.test.js
@@ -148,7 +148,7 @@ test('theme key is merged instead of replaced', () => {
         'grey-lighter': '#f1f5f8',
       },
       fonts: {
-        sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
+        sans: ['system-ui', 'Roboto', 'sans-serif'],
         serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
       },
       screens: {
@@ -174,7 +174,7 @@ test('theme key is merged instead of replaced', () => {
         'grey-lighter': '#f1f5f8',
       },
       fonts: {
-        sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
+        sans: ['system-ui', 'Roboto', 'sans-serif'],
         serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
       },
       screens: {

diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
@@ -98,7 +98,7 @@ test('preflight + base have source maps', async () => {
       "13:2-13 -> 13:2-13",
       "14:2-31 -> 14:2-31",
       "15:2-33 -> 15:2-33",
-      "16:2-208 -> 16:2-208",
+      "16:2-173 -> 16:2-173",
       "17:2-18 -> 17:2-18",
       "18:0 -> 18:0",
       "20:0 -> 20:0",