enhancement(web): improve font loading performance and avoid page reflow (#1087)

* enhancement: improve font loading performance and avoid page reflow

chore: get rid of postcss-import (we're not using it and it's not needed for tailwind)

* fix indent

web/index.html

@@ -11,6 +11,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#141415" />
     <meta name="description" content="autobrr" />
+    <link rel="preload" href="/Inter.var.woff2" as="font" type="font/woff2" crossorigin="use-credentials">
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-iphone-60x60.png" />
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-ipad-76x76.png" />
@@ -18,6 +19,27 @@
     <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad-retina-152x152.png" />
     <title>autobrr</title>
     <base href="{{.BaseUrl}}">
+    <style>
+@font-face {
+  font-family: "Inter Var";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: block;
+  src:
+    local("Inter Var"), local("Inter Variable"),
+    local("Inter var"), local("Inter variable"),
+    local("InterVar"), local("InterVariable"),
+    local("Inter"),
+    url("/Inter.var.woff2") format("woff2");
+}
+:root {
+  font-family: "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+    </style>
     <script>
       window.APP = {};
       window.APP.baseUrl = "{{.BaseUrl}}";

web/package.json

@@ -29,7 +29,6 @@
     }
   },
   "dependencies": {
-    "@fontsource-variable/inter": "^5.0.8",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@hookform/error-message": "^2.0.1",
@@ -56,7 +55,6 @@
     "formik": "^2.4.3",
     "http-proxy-middleware": "^2.0.6",
     "postcss": "^8.4.29",
-    "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-debounce-input": "^3.3.0",
     "react-dom": "^18.2.0",

web/pnpm-lock.yaml

@@ -8,9 +8,6 @@ overrides:
   react: ^18.2.0
 
 dependencies:
-  '@fontsource-variable/inter':
-    specifier: ^5.0.8
-    version: 5.0.8
   '@headlessui/react':
     specifier: ^1.7.17
     version: 1.7.17(react-dom@18.2.0)(react@18.2.0)
@@ -89,9 +86,6 @@ dependencies:
   postcss:
     specifier: ^8.4.29
     version: 8.4.29
-  postcss-import:
-    specifier: ^15.1.0
-    version: 15.1.0(postcss@8.4.29)
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -1799,10 +1793,6 @@ packages:
     resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==}
     dev: false
 
-  /@fontsource-variable/inter@5.0.8:
-    resolution: {integrity: sha512-WkYfFNccmEIeL2fNg0mYeLWqOoB7xD8MFxFRc4IwbSP2o8ZaBt36v5aW4by4MyrgGRMNk7uNi5LbvYKq6clPjw==}
-    dev: false
-
   /@headlessui/react@1.7.17(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==}
     engines: {node: '>=10'}

web/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    "postcss-import": {},
     "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},

web/src/index.css

@@ -9,11 +9,6 @@
 
 body {
   margin: 0;
-  font-family: "InterVariable", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 code {

web/src/index.tsx

@@ -7,7 +7,6 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Buffer } from "buffer";
 
-import "@fontsource-variable/inter";
 import "./index.css";
 import "react-tooltip/dist/react-tooltip.css";
 

web/vite.config.ts

@@ -4,6 +4,12 @@ import { VitePWA } from "vite-plugin-pwa";
 import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
 
+interface PreRenderedAsset {
+  name: string | undefined;
+  source: string | Uint8Array;
+  type: 'asset';
+}
+
 // https://vitejs.dev/config/
 export default ({ mode }: ConfigEnv) => {
   // early load .env file
@@ -97,6 +103,16 @@ export default ({ mode }: ConfigEnv) => {
     build: {
       manifest: true,
       sourcemap: true,
+      rollupOptions: {
+        output: {
+          assetFileNames: (chunkInfo: PreRenderedAsset) => {
+            if (chunkInfo.name === "Inter.var.woff2") {
+              return "assets/[name][extname]";
+            }
+            return "assets/[name]-[hash][extname]";
+          }
+        }
+      }
     }
   });
 };