import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import { bunny } from 'laravel-vite-plugin/fonts'; import tailwindcss from '@tailwindcss/vite'; /** * Bunny serves every EB Garamond weight as both woff2 and woff, and the fonts * plugin emits an `@font-face` rule for each — woff2 first, woff second. Two * rules with the same family, weight, style and unicode-range mean the *later* * one wins, so the browser rendered from the woff files and never touched the * preloaded woff2. * * Measured on the home page (MAN-109): 88 KiB of woff fetched at VeryHigh * priority, ahead of the LCP image, on top of 74 KiB of preloaded woff2 that * was downloaded and discarded. 162 KiB of font traffic for 74 KiB of fonts. * * woff2 has been supported by every browser this site targets since 2016, so * the woff rules are dead weight rather than a fallback. Strip them from the * emitted stylesheet and manifest, and drop the files from the bundle. * `tests/Feature/PublicSite/FontDeliveryTest.php` fails if they come back. */ function fontsWoff2Only() { const withoutWoffRules = (css) => css.replace( /@font-face\s*\{[^}]*\}\s*/g, (block) => (/format\(\s*["']woff["']\s*\)/.test(block) ? '' : block), ); return { name: 'amare:fonts-woff2-only', enforce: 'post', generateBundle(_options, bundle) { for (const [fileName, asset] of Object.entries(bundle)) { if (asset.type !== 'asset') { continue; } if (fileName.endsWith('.woff')) { delete bundle[fileName]; continue; } if (/fonts-[^/]*\.css$/.test(fileName)) { asset.source = withoutWoffRules(String(asset.source)); continue; } if (fileName.endsWith('fonts-manifest.json')) { const manifest = JSON.parse(String(asset.source)); for (const family of Object.values(manifest.families ?? {})) { for (const variant of Object.values(family.variants ?? {})) { variant.files = (variant.files ?? []).filter((file) => file.format === 'woff2'); } } for (const [alias, css] of Object.entries(manifest.style?.familyStyles ?? {})) { manifest.style.familyStyles[alias] = withoutWoffRules(css); } asset.source = JSON.stringify(manifest, null, 2); } } }, }; } export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css', ], refresh: true, fonts: [ bunny('EB Garamond', { weights: [400, 500, 600], }), ], }), tailwindcss(), fontsWoff2Only(), ], server: { watch: { ignored: ['**/storage/framework/views/**'], }, }, });