amare/vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { fontsource } 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: [
                fontsource('EB Garamond', {
                    weights: [400, 500, 600],
                }),
            ],
        }),
        tailwindcss(),
        fontsWoff2Only(),
    ],
    server: {
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});