[Fixed] Provide a safer and future-proofed system font stack

nternetinspired · nternetinspired · commit 2c08993f891c · 2018-01-11T16:45:50.000Z
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
@@ -2378,7 +2378,7 @@ button,
 }
 
 .font-sans {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 .font-serif {
@@ -6261,7 +6261,7 @@ button,
   }
 
   .sm\:font-sans {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .sm\:font-serif {
@@ -10137,7 +10137,7 @@ button,
   }
 
   .md\:font-sans {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .md\:font-serif {
@@ -14013,7 +14013,7 @@ button,
   }
 
   .lg\:font-sans {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .lg\:font-serif {
@@ -17889,7 +17889,7 @@ button,
   }
 
   .xl\:font-sans {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   }
 
   .xl\:font-serif {
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
@@ -194,8 +194,9 @@ module.exports = {
 
   fonts: {
     'sans': [
-      '-apple-system',
+      'system-ui',
       'BlinkMacSystemFont',
+      '-apple-system',
       'Segoe UI',
       'Roboto',
       'Oxygen',
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
@@ -15,7 +15,7 @@ features:
   'rows' => [
     [
       '.font-sans',
-      "font-family:\n  -apple-system,\n  BlinkMacSystemFont,\n  Segoe UI,\n  Roboto,\n  Oxygen,\n  Ubuntu,\n  Cantarell,\n  Fira Sans,\n  Droid Sans,\n  Helvetica Neue,\n  sans-serif;",
+      "font-family:\n  system-ui,\n  BlinkMacSystemFont,\n  -apple-system,\n  Segoe UI,\n  Roboto,\n  Oxygen,\n  Ubuntu,\n  Cantarell,\n  Fira Sans,\n  Droid Sans,\n  Helvetica Neue,\n  sans-serif;",
       'Set the font family to the sans font stack.',
     ],
     [

Original file line number	Diff line number	Diff line change
`@@ -2378,7 +2378,7 @@ button,`
`2378`	`2378`	`}`
`2379`	`2379`
`2380`	`2380`	`.font-sans {`
`2381`		`- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
	`2381`	`+ font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
`2382`	`2382`	`}`
`2383`	`2383`
`2384`	`2384`	`.font-serif {`
`@@ -6261,7 +6261,7 @@ button,`
`6261`	`6261`	`}`
`6262`	`6262`
`6263`	`6263`	`.sm\:font-sans {`
`6264`		`- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
	`6264`	`+ font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
`6265`	`6265`	`}`
`6266`	`6266`
`6267`	`6267`	`.sm\:font-serif {`
`@@ -10137,7 +10137,7 @@ button,`
`10137`	`10137`	`}`
`10138`	`10138`
`10139`	`10139`	`.md\:font-sans {`
`10140`		`- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
	`10140`	`+ font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
`10141`	`10141`	`}`
`10142`	`10142`
`10143`	`10143`	`.md\:font-serif {`
`@@ -14013,7 +14013,7 @@ button,`
`14013`	`14013`	`}`
`14014`	`14014`
`14015`	`14015`	`.lg\:font-sans {`
`14016`		`- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
	`14016`	`+ font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
`14017`	`14017`	`}`
`14018`	`14018`
`14019`	`14019`	`.lg\:font-serif {`
`@@ -17889,7 +17889,7 @@ button,`
`17889`	`17889`	`}`
`17890`	`17890`
`17891`	`17891`	`.xl\:font-sans {`
`17892`		`- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
	`17892`	`+ font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`
`17893`	`17893`	`}`
`17894`	`17894`
`17895`	`17895`	`.xl\:font-serif {`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ features:`
`15`	`15`	`'rows' => [`
`16`	`16`	`[`
`17`	`17`	`'.font-sans',`
`18`		`- "font-family:\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n Fira Sans,\n Droid Sans,\n Helvetica Neue,\n sans-serif;",`
	`18`	`+ "font-family:\n system-ui,\n BlinkMacSystemFont,\n -apple-system,\n Segoe UI,\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n Fira Sans,\n Droid Sans,\n Helvetica Neue,\n sans-serif;",`
`19`	`19`	`'Set the font family to the sans font stack.',`
`20`	`20`	`],`
`21`	`21`	`[`