fix: remove BlinkMacSystemFont from default local()s (#501)

Author: stoyan

README.md

@@ -88,8 +88,7 @@ Nuxt will scan your `@font-face` rules and generate fallback rules with the corr
 /* This will be generated. */
 @font-face {
   font-family: 'Roboto fallback';
-  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
-    local('Arial'), local('Noto Sans');
+  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'), local('Noto Sans');
   ascent-override: 92.7734375%;
   descent-override: 24.4140625%;
   line-gap-override: 0%;

src/module.ts

@@ -57,7 +57,7 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: nuxt => ({
     inject: true,
     inline: nuxt.options.ssr,
-    fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans'],
+    fallbacks: ['Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans'],
     fonts: [],
   }),
   async setup(options, nuxt) {

test/e2e.test.ts

@@ -11,7 +11,7 @@ describe('font override inlining', async () => {
     const html = await $fetch('/')
     expect(html.match(/<style>.*?<\/style>/)).toMatchInlineSnapshot(`
       [
-        "<style>@font-face { font-family: "fallback-a"; src: local("Zapfino"); size-adjust: 100%; ascent-override: 92.7734%; descent-override: 24.4141%; line-gap-override: 0%; } @font-face { font-family: "fallback-b"; src: local("Impact"); size-adjust: 100%; ascent-override: 92.7734%; descent-override: 24.4141%; line-gap-override: 0%; } @font-face { font-family: "fallback-c"; src: local("Georgia"); size-adjust: 99.7809%; ascent-override: 92.9771%; descent-override: 24.4677%; line-gap-override: 0%; } @font-face { font-family: "fallback-poppins"; src: local("Georgia"); size-adjust: 112.1577%; ascent-override: 93.6182%; descent-override: 31.2061%; line-gap-override: 8.916%; }  @font-face { font-family: "Poppins variant fallback"; src: local("Noto Sans"); size-adjust: 105.4852%; ascent-override: 99.54%; descent-override: 33.18%; line-gap-override: 9.48%; } @font-face { font-family: "Poppins variant fallback"; src: local("Arial"); size-adjust: 112.1577%; ascent-override: 93.6182%; descent-override: 31.2061%; line-gap-override: 8.916%; } @font-face { font-family: "Poppins variant fallback"; src: local("Helvetica Neue"); size-adjust: 111.1111%; ascent-override: 94.5%; descent-override: 31.5%; line-gap-override: 9%; } @font-face { font-family: "Poppins variant fallback"; src: local("Roboto"); size-adjust: 112.404%; ascent-override: 93.4131%; descent-override: 31.1377%; line-gap-override: 8.8965%; } @font-face { font-family: "Poppins variant fallback"; src: local("Segoe UI"); size-adjust: 112.7753%; ascent-override: 93.1055%; descent-override: 31.0352%; line-gap-override: 8.8672%; } @font-face { font-family: "Poppins variant fallback"; src: local("BlinkMacSystemFont"); size-adjust: 120.0469%; ascent-override: 87.4658%; descent-override: 29.1553%; line-gap-override: 8.3301%; } @font-face { font-family: "Roboto fallback"; src: local("Noto Sans"); size-adjust: 93.8448%; ascent-override: 98.8584%; descent-override: 26.0154%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Arial"); size-adjust: 99.7809%; ascent-override: 92.9771%; descent-override: 24.4677%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Helvetica Neue"); size-adjust: 98.8498%; ascent-override: 93.8529%; descent-override: 24.6981%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Roboto"); size-adjust: 100%; ascent-override: 92.7734%; descent-override: 24.4141%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Segoe UI"); size-adjust: 100.3304%; ascent-override: 92.4679%; descent-override: 24.3337%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("BlinkMacSystemFont"); size-adjust: 106.7995%; ascent-override: 86.8669%; descent-override: 22.8597%; line-gap-override: 0%; } </style>",
+        "<style>@font-face { font-family: "fallback-a"; src: local("Zapfino"); size-adjust: 100%; ascent-override: 92.7734%; descent-override: 24.4141%; line-gap-override: 0%; } @font-face { font-family: "fallback-b"; src: local("Impact"); size-adjust: 100%; ascent-override: 92.7734%; descent-override: 24.4141%; line-gap-override: 0%; } @font-face { font-family: "fallback-c"; src: local("Georgia"); size-adjust: 99.7809%; ascent-override: 92.9771%; descent-override: 24.4677%; line-gap-override: 0%; } @font-face { font-family: "fallback-poppins"; src: local("Georgia"); size-adjust: 112.1577%; ascent-override: 93.6182%; descent-override: 31.2061%; line-gap-override: 8.916%; }  @font-face { font-family: "Poppins variant fallback"; src: local("Noto Sans"); size-adjust: 105.4852%; ascent-override: 99.54%; descent-override: 33.18%; line-gap-override: 9.48%; } @font-face { font-family: "Poppins variant fallback"; src: local("Arial"); size-adjust: 112.1577%; ascent-override: 93.6182%; descent-override: 31.2061%; line-gap-override: 8.916%; } @font-face { font-family: "Poppins variant fallback"; src: local("Helvetica Neue"); size-adjust: 111.1111%; ascent-override: 94.5%; descent-override: 31.5%; line-gap-override: 9%; } @font-face { font-family: "Poppins variant fallback"; src: local("Roboto"); size-adjust: 112.404%; ascent-override: 93.4131%; descent-override: 31.1377%; line-gap-override: 8.8965%; } @font-face { font-family: "Poppins variant fallback"; src: local("Segoe UI"); size-adjust: 112.7753%; ascent-override: 93.1055%; descent-override: 31.0352%; line-gap-override: 8.8672%; } @font-face { font-family: "Roboto fallback"; src: local("Noto Sans"); size-adjust: 93.8448%; ascent-override: 98.8584%; descent-override: 26.0154%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Arial"); size-adjust: 99.7809%; ascent-override: 92.9771%; descent-override: 24.4677%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Helvetica Neue"); size-adjust: 98.8498%; ascent-override: 93.8529%; descent-override: 24.6981%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Roboto"); size-adjust: 100%; ascent-override: 92.7734%; descent-override: 24.4141%; line-gap-override: 0%; } @font-face { font-family: "Roboto fallback"; src: local("Segoe UI"); size-adjust: 100.3304%; ascent-override: 92.4679%; descent-override: 24.3337%; line-gap-override: 0%; } </style>",
       ]
     `)
   })