Css font imports in manifest.json

[indykoning]

Description

Currently fonts are properly added to the manifest.json but you cannot see which e.g. css/vue files require this font.
This makes automatic preloading difficult as we cannot determine which file requires the font, and IF we need to require the font for the initial page load.

https://stackblitz.com/edit/github-citlf9?file=package.json,src%2Findex.css&terminal=build

Suggested solution

I suggest adding an imports key to css files within the manifest.json just like is done with JS.
This may contain imported css (which is not relevant as everything currently gets compiled to a single css file)
and fonts required by the current css or vue file.

This way when (pre)loading the css or vue file, we know we should also (pre)load those font files

Alternative

Preloading of the fonts either needs to be done manually, or ALL fonts in the manifest.json must be loaded. Which isn't ideal since likely not all fonts are actually used on the current page.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[royduin]

An example, currently the Vite just adds all the fonts with no relation to the css file where the font was discovered in the manifest:

  "resources/css/app.css": {
    "file": "assets/app-DE7dJou-.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/css/fonts/Nunito-Bold.woff": {
    "file": "assets/Nunito-Bold-C6dW0HYt.woff",
    "src": "resources/css/fonts/Nunito-Bold.woff"
  },

Where Javascript files do have a reference with dynamic imports:

  "resources/js/app.js": {
    "file": "assets/app-CNshmeXx.js",
    "name": "app",
    "src": "resources/js/app.js",
    "isEntry": true,
    "dynamicImports": [
      "_Listing-DnGV7WH4.js"
     ],
  },
  "_Listing-DnGV7WH4.js": {
    "file": "assets/Listing-DnGV7WH4.js",
    "name": "Listing",
    "isDynamicEntry": true,
    "imports": [
      "resources/js/app.js"
    ]
  },

It would be nice to have something like:

  "resources/css/app.css": {
    "file": "assets/app-DE7dJou-.css",
    "src": "resources/css/app.css",
    "isEntry": true,
    "fonts": [
        "resources/css/fonts/Nunito-Bold.woff"
    ]
  },
  "resources/css/fonts/Nunito-Bold.woff": {
    "file": "assets/Nunito-Bold-C6dW0HYt.woff",
    "src": "resources/css/fonts/Nunito-Bold.woff",
    "foundIn": [
        "resources/css/app.css"
    ]
  },

With that we can use the new fonts array to add preload tags in the html and only get fonts from that CSS file instead of all fonts from all CSS files which aren't always used. For example multisite with a CSS per store.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-citlf9 (Open reproduction)

[indykoning]

I'm guessing somewhere here we need to have access to the bundle so we can set the bundle.imports to the files we find here

vite/packages/vite/src/node/plugins/css.ts

Line 643 in ccee3d7

const resolveAssetUrlsInCss = (

[daun]

I've published a vite plugin that adds information about font imports to the manifest: vite-plugin-font-manifest. Working great in our use case, but would appreciate feedback if anybody wants to give it a try!

import { defineConfig } from 'vite'
import fontManifest from 'vite-plugin-font-manifest'

export default defineConfig({
    plugins: [
        fontManifest(),
    ]
})

{
  "src/fonts/Inter-Regular.woff2": {
    "file": "assets/Inter-Regular-CnZ_CWUo.woff2",
    "src": "src/fonts/Inter-Regular.woff2",
    "fontFace": {
      "family": "Inter",
      "weight": "400",
      "style": "normal",
      "mime": "font/woff2",
      "css": "@font-face { /* */ }",
      "definedIn": ["src/css/display.css"]
    }
  },
  "src/css/display.css": {
    "fonts": ["src/fonts/Inter-Regular.woff2"]
  }
}