wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
* 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>
This commit is contained in:
Emilia 2023-08-08 06:26:30 -04:00 • committed by GitHub
parent 05e307bb6c
commit 4f0bb0b73a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 11 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Reset padding for `<dialog>` 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

2
src/css/preflight.css
View file

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

7
stubs/config.full.js
View file

@ -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"',

3
tests/kitchen-sink.test.js
View file

@ -239,8 +239,7 @@ 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,
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) {

4
tests/plugins/__snapshots__/preflight.test.js.snap
View file

@ -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, 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, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
line-height: 1.5;
}

3
tests/plugins/fontFamily.test.js
View file

@ -6,8 +6,7 @@ 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,
font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji;
}
.font-serif {

5
tests/raw-content.test.css
View file

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

4
tests/resolveConfig.test.js
View file

@ -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: {

2
tests/source-maps.test.js
View file

@ -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-121 -> 16:2-121",
"17:2-18 -> 17:2-18",
"18:0 -> 18:0",
"20:0 -> 20:0",