refactor fontawesome subset

.gitignore

@@ -124,8 +124,9 @@ updateContributors.mjs
 copyAnticheatToDev.sh
 
 
-# ignore generated fonts
+# ignore generated fonts (not needed anymore, can be removed later)
 frontend/src/webfonts-generated
+frontend/static/webfonts-preview
 
 .turbo
 frontend/.env.sentry-build-plugin

frontend/package.json

@@ -84,7 +84,7 @@
     "eslint": "9.39.1",
     "eslint-plugin-compat": "6.0.2",
     "firebase-tools": "13.15.1",
-    "fontawesome-subset": "4.4.0",
+    "fontawesome-subset": "4.6.0",
     "happy-dom": "20.0.10",
     "madge": "8.0.0",
     "magic-string": "0.30.17",

frontend/src/styles/fontawesome-5.scss

@@ -16,7 +16,7 @@
   @if variable-exists(fontAwesomeOverride) {
     src: url("#{$fontAwesomeOverride}/fa-solid-900.woff2") format("woff2");
   } @else {
-    src: url("/webfonts-generated/fa-solid-900.woff2") format("woff2");
+    src: url("/webfonts/fa-solid-900.woff2") format("woff2");
   }
 }
 
@@ -27,7 +27,7 @@
   @if variable-exists(fontAwesomeOverride) {
     src: url("#{$fontAwesomeOverride}/fa-regular-400.woff2") format("woff2");
   } @else {
-    src: url("/webfonts-generated/fa-regular-400.woff2") format("woff2");
+    src: url("/webfonts/fa-regular-400.woff2") format("woff2");
   }
 }
 
@@ -54,7 +54,7 @@
   @if variable-exists(fontAwesomeOverride) {
     src: url("#{$fontAwesomeOverride}/fa-brands-400.woff2") format("woff2");
   } @else {
-    src: url("/webfonts-generated/fa-brands-400.woff2") format("woff2");
+    src: url("/webfonts/fa-brands-400.woff2") format("woff2");
   }
 }
 

frontend/src/styles/fontawesome-6.scss

@@ -20,7 +20,7 @@
   @if variable-exists(fontAwesomeOverride) {
     src: url("#{$fontAwesomeOverride}/fa-solid-900.woff2") format("woff2");
   } @else {
-    src: url("/webfonts-generated/fa-solid-900.woff2") format("woff2");
+    src: url("/webfonts/fa-solid-900.woff2") format("woff2");
   }
 }
 
@@ -31,7 +31,7 @@
   @if variable-exists(fontAwesomeOverride) {
     src: url("#{$fontAwesomeOverride}/fa-regular-400.woff2") format("woff2");
   } @else {
-    src: url("/webfonts-generated/fa-regular-400.woff2") format("woff2");
+    src: url("/webfonts/fa-regular-400.woff2") format("woff2");
   }
 }
 
@@ -58,7 +58,7 @@
   @if variable-exists(fontAwesomeOverride) {
     src: url("#{$fontAwesomeOverride}/fa-brands-400.woff2") format("woff2");
   } @else {
-    src: url("/webfonts-generated/fa-brands-400.woff2") format("woff2");
+    src: url("/webfonts/fa-brands-400.woff2") format("woff2");
   }
 }
 

frontend/vite-plugins/fontawesome-subset.ts

@@ -13,18 +13,31 @@ export function fontawesomeSubset(): Plugin {
   return {
     name: "vite-plugin-fontawesome-subset",
     apply: "build",
-    async buildStart() {
+    async generateBundle() {
       const start = performance.now();
       console.log("\nCreating fontawesome subset...");
 
-      const fontawesomeClasses = getFontawesomeConfig();
-      await createFontawesomeSubset(
-        fontawesomeClasses,
-        "src/webfonts-generated",
-        {
+      const tempDir = fs.mkdtempSync("fontawesome-preview-");
+      try {
+        const fontawesomeClasses = getFontawesomeConfig();
+        await createFontawesomeSubset(fontawesomeClasses, tempDir, {
           targetFormats: ["woff2"],
-        },
-      );
+        });
+
+        const entries = fs.readdirSync(tempDir, { withFileTypes: true });
+
+        for (const entry of entries) {
+          if (!entry.isFile()) continue;
+
+          this.emitFile({
+            type: "asset",
+            fileName: "webfonts/" + entry.name,
+            source: fs.readFileSync(path.join(tempDir, entry.name), "utf8"),
+          });
+        }
+      } finally {
+        fs.rmSync(tempDir, { recursive: true, force: true });
+      }
 
       const end = performance.now();
       console.log(

frontend/vite.config.ts

@@ -82,6 +82,7 @@ function getPlugins({
     envConfig({ isDevelopment, clientVersion, env }),
     languageHashes({ skip: isDevelopment }),
     fontPreview(),
+    fontawesomeSubset(),
     versionFile({ clientVersion }),
     checker({
       oxlint: {
@@ -98,7 +99,6 @@ function getPlugins({
   const devPlugins: PluginOption[] = [Inspect()];
 
   const prodPlugins: PluginOption[] = [
-    fontawesomeSubset(),
     ViteMinifyPlugin(),
     VitePWA({
       // injectRegister: "networkfirst",

pnpm-lock.yaml

@@ -416,8 +416,8 @@ importers:
         specifier: 13.15.1
         version: 13.15.1(encoding@0.1.13)
       fontawesome-subset:
-        specifier: 4.4.0
-        version: 4.4.0(@fortawesome/fontawesome-free@5.15.4)
+        specifier: 4.6.0
+        version: 4.6.0(@fortawesome/fontawesome-free@5.15.4)
       happy-dom:
         specifier: 20.0.10
         version: 20.0.10
@@ -5226,8 +5226,8 @@ packages:
       debug:
         optional: true
 
-  fontawesome-subset@4.4.0:
-    resolution: {integrity: sha512-kcK1ELa/Gq4R2+gKxzeFbLl0uzSJBeWsjtZPLLf5mCJEfTY9gt/lAOgW7opGaG1ZaFMa88Qu1ghuRsLUkmobYg==}
+  fontawesome-subset@4.6.0:
+    resolution: {integrity: sha512-StfmCPwQUUt9wsIJDK404QDz/FkidvpNB5mZy2X36DRPorgXj9VslUwdlijxrHqPIXoA0baC0ucvdOCEQeIHEQ==}
     peerDependencies:
       '@fortawesome/fontawesome-free': '>=5.12.0'
       '@fortawesome/fontawesome-pro': '>=5.12.0'
@@ -14874,12 +14874,12 @@ snapshots:
     optionalDependencies:
       debug: 4.3.6(supports-color@5.5.0)
 
-  fontawesome-subset@4.4.0(@fortawesome/fontawesome-free@5.15.4):
+  fontawesome-subset@4.6.0(@fortawesome/fontawesome-free@5.15.4):
     dependencies:
       lodash: 4.17.21
       mkdirp: 2.1.6
       subset-font: 2.3.0
-      yaml: 2.5.0
+      yaml: 2.8.1
     optionalDependencies:
       '@fortawesome/fontawesome-free': 5.15.4