feat: add "injectTo" option to provider for transformIndexHtml

close #19

Author: stafyniaksacha

README.md

@@ -54,6 +54,13 @@ export default {
          * default: true
          */
         defer: true,
+
+        /**
+         * define where the font load tags should be inserted
+         * default: 'head-prepend'
+         *   values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
+         */
+        injectTo: 'head-prepend',
       },
 
       // Google Fonts API V2
@@ -77,6 +84,13 @@ export default {
          */
         text: 'ViteAwsom',
 
+        /**
+         * define where the font load tags should be inserted
+         * default: 'head-prepend'
+         *   values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
+         */
+        injectTo: 'head-prepend',
+
         /**
          * Fonts families lists
          */
@@ -148,6 +162,13 @@ export default {
          * Note: this can not be used with `preload`
          */
         prefetch: false,
+
+        /**
+         * define where the font load tags should be inserted
+         * default: 'head-prepend'
+         *   values: 'head' | 'body' | 'head-prepend' | 'body-prepend'
+         */
+        injectTo: 'head-prepend',
       },
     }),
   ],

src/custom.ts

@@ -74,6 +74,10 @@ export interface CustomFonts {
    * @default false
    */
   prefetch?: boolean
+  /**
+   * @default: 'head-prepend'
+   */
+  injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend'
 }
 
 const resolveWeight = (weightOrSrc?: string | number) => {
@@ -154,9 +158,13 @@ const createFontFaceCSS = ({ name, src, local, weight, style, display }: CustomF
 }`
 }
 
-const createFontFaceLink = (prefetch = false) => (href: string) => {
+const createFontFaceLink = (
+  prefetch = false,
+  injectTo: 'head' | 'body' | 'head-prepend' | 'body-prepend' = 'head-prepend',
+) => (href: string) => {
   return {
     tag: 'link',
+    injectTo,
     attrs: {
       rel: prefetch ? 'prefetch' : 'preload',
       as: 'font',
@@ -178,6 +186,7 @@ export default (options: CustomFonts, config: ResolvedConfig) => {
     display = 'auto',
     preload = true,
     prefetch = false,
+    injectTo = 'head-prepend',
   } = options
   /* eslint-enable prefer-const */
 
@@ -225,7 +234,7 @@ export default (options: CustomFonts, config: ResolvedConfig) => {
       console.warn('vite-plugin-fonts: The prefetch stand for a lower priority for the resource (maybe we will need it in a future page) whereas preload is for the current page, so we can not have both.')
     }
     if (preload || prefetch)
-      tags.push(...hrefs.map(createFontFaceLink(prefetch)))
+      tags.push(...hrefs.map(createFontFaceLink(prefetch, injectTo)))
 
     // --- Generate CSS `@font-face` rules.
     for (const face of faces) css.push(createFontFaceCSS(face))

src/google-fonts.ts

@@ -10,6 +10,10 @@ export interface GoogleFonts {
   text?: string
   display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
   preconnect?: boolean
+  /**
+   * @default: 'head-prepend'
+   */
+  injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend'
 }
 
 const GoogleFontsBase = 'https://fonts.googleapis.com/css2'
@@ -19,6 +23,7 @@ function injectFonts({
   text,
   preconnect = true,
   display = 'swap',
+  injectTo = 'head-prepend',
 }: GoogleFonts): HtmlTagDescriptor[] {
   const specs: string[] = []
   const deferedSpecs: string[] = []
@@ -67,6 +72,7 @@ function injectFonts({
   if (preconnect && specs.length + deferedSpecs.length > 0) {
     tags.push({
       tag: 'link',
+      injectTo,
       attrs: {
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com/',
@@ -109,6 +115,7 @@ function injectFonts({
 
     tags.push({
       tag: 'link',
+      injectTo,
       attrs: {
         rel: 'stylesheet',
         href,

src/typekit.ts

@@ -3,13 +3,18 @@ import type { HtmlTagDescriptor } from 'vite'
 export interface TypeKitFonts {
   id: string
   defer?: boolean
+  /**
+   * default: 'head-prepend'
+   */
+  injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend'
 }
 
 const TypekitFontBase = 'https://use.typekit.net/'
 
 function injectFonts({
   id,
   defer = true,
+  injectTo = 'head-prepend',
 }: TypeKitFonts): HtmlTagDescriptor[] {
   const tags: HtmlTagDescriptor[] = []
 
@@ -22,6 +27,7 @@ function injectFonts({
   if (defer) {
     tags.push({
       tag: 'link',
+      injectTo,
       attrs: {
         rel: 'preload',
         as: 'style',
@@ -33,6 +39,7 @@ function injectFonts({
   else {
     tags.push({
       tag: 'link',
+      injectTo,
       attrs: {
         rel: 'stylesheet',
         href: `${TypekitFontBase}${id}.css`,