configure output file name?

beckend commented 1 year ago

This hash is a problem, can we have a function to customize this file name, it changes if we have more or less fonts.

<link rel="preload" as="style" href="/assets/webfonts.b904bd45.css">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="/assets/webfonts.b904bd45.css">

0xb4lint commented 1 year ago

Sure thing, you can do this with the vite.config.ts, just set the rollupOptions:

build: {
  rollupOptions: {
    output: {
      assetFileNames: (chunkInfo: PreRenderedAsset) => chunkInfo.name === 'webfonts.css' ? 'assets/webfonts.css' : 'assets/[name]-[hash].[ext]',
    },
  },
},

beckend commented 1 year ago

It's unfortunate that this doesn't work in dev mode and you get a 404

0xb4lint commented 1 year ago

What's the URL that resulting a 404? Using this configuration should not affect the dev mode and should still use @webfonts/webfonts.css virtual path. Could you please share your vite config?

beckend commented 1 year ago

I did not know about the virtual path, using it works thank you, I was using

one option in the plugin along with the relevant element at the top of the conversation.

 PluginViteWebfontDownload(
      [
        'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
      ],
      {
        injectAsStyleTag: false,
      },
    ),

beckend commented 1 year ago

Ok I take that back, tried to use @webfonts/webfonts.css in the index file, it doesn't resolve in production builds.

0xb4lint commented 1 year ago

Could you please specify more your way of using Vite?

By default this plugin embeds a <style> tag containing all the font definitions into index.html and you can change this behavior by setting injectAsStyleTag: false (which is the default while using dev server).

injectAsStyleTag: false option injects the following code to index.html's <head>:

<link rel="preload" as="style" href="/assets/webfonts-6806b66f.css">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="/assets/webfonts-6806b66f.css">

The dev server mode is the same but using a virtual path: @webfonts/webfonts.css:

<link rel="preload" as="style" href="/@webfonts/webfonts.css">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="/@webfonts/webfonts.css">

beckend commented 1 year ago

At first I was using no options, building production doesn't inject anything, that's why I had to resort to adding to index.html:

<link rel="preload" as="style" href="/assets/webfonts.b904bd45.css">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="/assets/webfonts.b904bd45.css">

vite.config.ts

import pluginReact from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'
import { imagetools as pluginImageTools } from 'vite-imagetools'
import pluginCircularDependency from 'vite-plugin-circular-dependency'
import { compression as pluginCompression } from 'vite-plugin-compression2'
import pluginHTMLMinifier from 'vite-plugin-html-minifier'
import pluginSVGR from 'vite-plugin-svgr'
import pluginWASM from 'vite-plugin-wasm'
import { ViteWebfontDownload as PluginViteWebfontDownload } from 'vite-plugin-webfont-dl'
import pluginTSConfigPaths from 'vite-tsconfig-paths'

const paths = {
  root: __dirname,
}

// https://vitejs.dev/config
export default defineConfig({
  build: {
    emptyOutDir: true,
  },
  esbuild: {
    supported: {
      'top-level-await': true,
    },
  },
  plugins: [
    pluginWASM(),
    pluginHTMLMinifier(),
    pluginImageTools({
      defaultDirectives(url) {
        if (url.searchParams.has('ITPicture')) {
          return new URLSearchParams(
            'w=190;859;1291;1619;1906;2125;2363;2659;2863;3059;3079;3474;3604;3809;3828;3840&as=picture&format=avif;webp',
          )
        }

        if (url.searchParams.has('ITSrcSet')) {
          return new URLSearchParams(
            'w=190;859;1291;1619;1906;2125;2363;2659;2863;3059;3079;3474;3604;3809;3828;3840&as=srcset&format=webp',
          )
        }

        return url.searchParams
      },
    }),
    pluginCompression({
      algorithm: 'brotliCompress',
      exclude: ['**/*.avif', '**/*.webp', '**/*.wav', '**/*.mp3', '**/*.png'],
    }),
    pluginTSConfigPaths(),
    pluginSVGR({
      exportAsDefault: false,
    }),
    pluginReact(),
    PluginViteWebfontDownload(
      [
        'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
      ],
      {
        injectAsStyleTag: false,
      },
    ),
    pluginCircularDependency({
      circleImportThrowErr: true,
    }),
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@this': paths.root,
    },
  },
})

"vite-plugin-webfont-dl": "^3.7.6",

So in dev I get a 404 because of this.

feat-agency / vite-plugin-webfont-dl

configure output file name? #37