From e1f729e879a805ab9312ab52359df0974accd18a Mon Sep 17 00:00:00 2001 From: Emilia Zapata Date: Thu, 3 Aug 2023 20:31:54 -0400 Subject: [PATCH 1/4] 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. --- src/css/preflight.css | 2 +- stubs/config.full.js | 2 -- tests/kitchen-sink.test.js | 5 ++--- tests/plugins/__snapshots__/preflight.test.js.snap | 4 ++-- tests/plugins/fontFamily.test.js | 5 ++--- tests/raw-content.test.css | 5 ++--- tests/resolveConfig.test.js | 4 ++-- tests/source-maps.test.js | 2 +- 8 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/css/preflight.css b/src/css/preflight.css index 4935b607b540..4d54a336b15a 100644 --- 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 index bda7d03ba566..5a69ff0adfcf 100644 --- 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 index 73ca80fd209d..b061a8788dfb 100644 --- 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 index 1cc99bb496f0..5a962a70c0fe 100644 --- 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 index ad43dc2e5d50..924480e4446b 100644 --- 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 index cc43ad4c4084..1978f4570287 100644 --- 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 index 954c406597d8..e086986326e5 100644 --- 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 index bf7870db66fd..6059e60aa8dd 100644 --- 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", From e93a879b27214785525074041a6998f6465c7d43 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 4 Aug 2023 14:59:21 +0200 Subject: [PATCH 2/4] further simplify `font-family` --- src/css/preflight.css | 2 +- stubs/config.full.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/css/preflight.css b/src/css/preflight.css index 4d54a336b15a..451f0054750c 100644 --- 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, "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 */ } diff --git a/stubs/config.full.js b/stubs/config.full.js index 5a69ff0adfcf..bdc73f705056 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -303,11 +303,6 @@ module.exports = { sans: [ 'ui-sans-serif', 'system-ui', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', From 2db50c4b05084ecf4ce0a9fa1d0215341b7fcd86 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 8 Aug 2023 12:08:30 +0200 Subject: [PATCH 3/4] update tests --- tests/kitchen-sink.test.js | 4 ++-- tests/plugins/__snapshots__/preflight.test.js.snap | 4 ++-- tests/plugins/fontFamily.test.js | 4 ++-- tests/raw-content.test.css | 4 ++-- tests/source-maps.test.js | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index b061a8788dfb..c91365732577 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -239,8 +239,8 @@ test('it works', () => { expect(result.css).toMatchFormattedCss(css` .theme-test { color: #3b82f6; - 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-family: ui-sans-serif, system-ui, 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 index 5a962a70c0fe..453839a4656e 100644 --- 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, 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; 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, 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; line-height: 1.5; } diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js index 924480e4446b..51091815eaca 100644 --- a/tests/plugins/fontFamily.test.js +++ b/tests/plugins/fontFamily.test.js @@ -6,8 +6,8 @@ quickPluginTest('fontFamily').toMatchFormattedCss(css` monospace; } .font-sans { - 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-family: ui-sans-serif, system-ui, 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 index 1978f4570287..3038e8a34338 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -526,8 +526,8 @@ vertical-align: middle; } .font-sans { - 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-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; diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 6059e60aa8dd..1233f2a46666 100644 --- 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-173 -> 16:2-173", + "16:2-121 -> 16:2-121", "17:2-18 -> 17:2-18", "18:0 -> 18:0", "20:0 -> 20:0", From 6b99be37b26521444e5f943648bd88db0dbd1293 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 8 Aug 2023 12:09:56 +0200 Subject: [PATCH 4/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52be58929204..ad6bd0e82f44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Reset padding for `` elements in preflight ([#11069](https://github.com/tailwindlabs/tailwindcss/pull/11069)) - Deprecate `--no-autoprefixer` flag in the CLI ([#11280](https://github.com/tailwindlabs/tailwindcss/pull/11280)) - Make the Rust based parser the default ([#11394](https://github.com/tailwindlabs/tailwindcss/pull/11394)) +- Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748)) ## [3.3.2] - 2023-04-25