fix: google fonts style encoding + make vite a peer dependencies

Author: stafyniaksacha

example/package.json

@@ -5,10 +5,8 @@
     "dev": "vite",
     "build": "vite build"
   },
-  "dependencies": {
-    "vite-plugin-fonts": "workspace: *"
-  },
   "devDependencies": {
-    "vite": "^2.0.0-beta.5"
+    "vite": "^2.0.0-beta.22",
+    "vite-plugin-fonts": "workspace: *"
   }
 }

example/style.css

@@ -1,5 +1,5 @@
 body {
-  font-family: 'Crimson Pro', Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Crimson Pro", Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
@@ -8,5 +8,5 @@ body {
 }
 
 a {
-  font-family: 'Open Sans', Avenir, Helvetica, Arial, sans-serif;
-}
+  font-family: "Open Sans", Avenir, Helvetica, Arial, sans-serif;
+}

example/vite.config.ts

@@ -1,12 +1,12 @@
 import { defineConfig } from 'vite'
-import ViteFonts from 'vite-plugin-fonts';
+import ViteFonts from 'vite-plugin-fonts'
 
 export default defineConfig({
   plugins: [
     ViteFonts({
       google: {
         families: ['Crimson Pro', 'Open Sans'],
       },
-    })
-  ]
-})
+    }),
+  ],
+})

package.json

@@ -19,14 +19,15 @@
     "lint": "eslint --ext .ts ./src",
     "lint:fix": "eslint --fix --ext .ts ./src"
   },
-  "dependencies": {
-    "vite": "^2.0.0-beta.5"
+  "peerDependencies": {
+    "vite": "^2.0.0-beta.22"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.4.3",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "eslint": "^7.17.0",
     "tsup": "^3.11.0",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "vite": "^2.0.0-beta.22"
   }
 }

pnpm-lock.yaml

@@ -54,7 +54,7 @@ function injectFonts({
       let spec = encodeURIComponent(name)
 
       if (typeof styles === 'string')
-        spec += `:${encodeURIComponent(styles)}`
+        spec += `:${styles}`
 
       if (defer)
         deferedSpecs.push(spec)
@@ -64,15 +64,16 @@ function injectFonts({
   }
 
   // warm up the fonts’ origin
-  if (preconnect && specs.length + deferedSpecs.length > 0)
+  if (preconnect && specs.length + deferedSpecs.length > 0) {
     tags.push({
       tag: 'link',
       attrs: {
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com/',
-        crossorigin: '',
-      }
+        crossorigin: true,
+      },
     })
+  }
 
   // defer loading font-faces definitions
   // @see https://web.dev/optimize-lcp/#defer-non-critical-css
@@ -90,9 +91,9 @@ function injectFonts({
       attrs: {
         rel: 'preload',
         as: 'style',
-        onload: "this.rel='stylesheet'",
+        onload: 'this.rel=\'stylesheet\'',
         href,
-      }
+      },
     })
   }
 
@@ -111,7 +112,7 @@ function injectFonts({
       attrs: {
         rel: 'stylesheet',
         href,
-      }
+      },
     })
   }
 

src/google-fonts.ts

@@ -14,14 +14,14 @@ function VitePluginFonts(options: VitePluginFontsOptions = {}) {
 
     transformIndexHtml(): HtmlTagDescriptor[] {
       const tags: HtmlTagDescriptor[] = []
-        
+
       if (options.typekit)
         tags.push(...injectTypekitFonts(options.typekit))
 
       if (options.google)
         tags.push(...injectGoogleFonts(options.google))
 
-      return tags;
+      return tags
     },
   }
 }

src/index.ts

@@ -19,24 +19,26 @@ function injectFonts({
     return tags
   }
 
-  if (defer)
+  if (defer) {
     tags.push({
       tag: 'link',
       attrs: {
         rel: 'preload',
         as: 'style',
-        onload: "this.rel='stylesheet'",
+        onload: 'this.rel=\'stylesheet\'',
         href: `${TypekitFontBase}${id}.css`,
-      }
+      },
     })
-  else
+  }
+  else {
     tags.push({
       tag: 'link',
       attrs: {
         rel: 'stylesheet',
         href: `${TypekitFontBase}${id}.css`,
-      }
+      },
     })
+  }
 
   return tags
 }