feat(preflight): simplify sans-serif font stack (#11748)

* 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.

* further simplify `font-family`

* update tests

* update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

Author: 2 people

CHANGELOG.md

@@ -23,6 +23,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404))
 - Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480))
 
+### Changed
+
+- Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748))
+
 ## [3.3.7] - 2023-12-18
 
 ### Fixed

src/css/preflight.css

@@ -32,7 +32,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, 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 */
 }

stubs/config.full.js

@@ -303,13 +303,6 @@ module.exports = {
       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"',

tests/basic-usage.oxide.test.css

@@ -767,9 +767,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, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+     Segoe UI Symbol, Noto Color Emoji;
 }
 .text-2xl {
   font-size: 1.5rem;

tests/basic-usage.test.css

@@ -785,9 +785,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, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+     Segoe UI Symbol, Noto Color Emoji;
 }
 .text-2xl {
   font-size: 1.5rem;

tests/kitchen-sink.test.js

@@ -240,8 +240,7 @@ crosscheck(({ stable, oxide }) => {
       stable.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,
+          font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
             Segoe UI Symbol, Noto Color Emoji;
         }
         @media (min-width: 1024px) {
@@ -813,8 +812,7 @@ crosscheck(({ stable, oxide }) => {
       oxide.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,
+          font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
             Segoe UI Symbol, Noto Color Emoji;
         }
         @media (min-width: 1024px) {

tests/raw-content.oxide.test.css

@@ -512,9 +512,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, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+     Segoe UI Symbol, Noto Color Emoji;
 }
 .text-2xl {
   font-size: 1.5rem;

tests/raw-content.test.css

@@ -524,9 +524,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, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+     Segoe UI Symbol, Noto Color Emoji;
 }
 .text-2xl {
   font-size: 1.5rem;

tests/resolveConfig.test.js

@@ -150,7 +150,7 @@ crosscheck(() => {
           '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: {
@@ -176,7 +176,7 @@ crosscheck(() => {
           '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: {