Merge pull request #473 from sronveaux/add-vite-plugin-mdi-woff2

Added Vite plugin to keep only woff2 format of MDI icon font

Author: sronveaux

plugins/vite-plugin-mdi-woff2.js

@@ -0,0 +1,48 @@
+export default function mdiWoff2OnlyPlugin (options) {
+  return {
+    name: 'mdi-woff2-only',
+    enforce: 'pre',
+    transform (code, id) {
+      if (!id.includes('node_modules/@mdi/font/css/materialdesignicons.css')) {
+        return null;
+      }
+
+      // Extract the WOFF2 url(...) format("woff2")
+      const woff2Match = code.match(
+        /url\((["'])\.\.\/fonts\/materialdesignicons-webfont\.woff2[^"']*\1\)\s+format\((["'])woff2\2\)/
+      )
+      if (woff2Match) {
+        // Replace the src: ...; lines to reference WOFF2 only
+        // But keep their number consistent to impact source map as less as possible
+        const woff2 = woff2Match[0];
+
+        const newCode = code.replace(
+          /@font-face\s*{([\s\S]*?)}/,
+          (match, inner) => {
+            const cleanedInner = inner
+              .split('\n')
+              .map((line) => {
+                if (!line.trim().startsWith('src:')) {
+                  return line;
+                }
+                if (!line.includes('woff2')) {
+                  return '';
+                } else {
+                  const indent = line.match(/^\s*/)[0];
+                  return `${indent}src: ${woff2};`;
+                }
+              }).join('\n');
+
+            return `@font-face {${cleanedInner}}`;
+          }
+        );
+
+        return {
+          code: newCode,
+          map: null
+        };
+      }
+      return null;
+    }
+  };
+};

vite.config.js

@@ -9,6 +9,8 @@ import Vuetify from 'vite-plugin-vuetify';
 
 import eslintPlugin from '@nabla/vite-plugin-eslint';
 
+import mdiWoff2OnlyPlugin from './plugins/vite-plugin-mdi-woff2';
+
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
   const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -40,7 +42,8 @@ export default defineConfig(({ mode }) => {
       eslintPlugin({
         // Lint src and app directories.
         shouldLint: (path) => path.match(/\/(src|app)\/[^?]*\.(vue|svelte|m?[jt]sx?)$/)
-      })
+      }),
+      mdiWoff2OnlyPlugin()
     ],
     // Needed so vite-plugin-vuetify can process source code correctly.
     optimizeDeps: {