From c9f04e045922a6f1e11136bd1ccc824c2e9928f1 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 24 Oct 2022 21:51:33 +0530
Subject: [PATCH] feat(build): add `useWebFonts` option (#1531)

---
 src/client/theme-default/styles/base.css  |  2 +-
 src/client/theme-default/styles/fonts.css |  4 ++++
 src/client/theme-default/styles/vars.css  |  6 +++---
 src/node/config.ts                        | 14 ++++++++++++++
 src/node/plugin.ts                        |  2 ++
 src/node/webFontsPlugin.ts                | 19 +++++++++++++++++++
 6 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/node/webFontsPlugin.ts

diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index b569f8d7d15..a40dcb2fb4f 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -26,7 +26,7 @@ body {
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
   direction: ltr;
-  font-synthesis: none;
+  font-synthesis: style;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/client/theme-default/styles/fonts.css b/src/client/theme-default/styles/fonts.css
index 7d18208c88b..525240889c0 100644
--- a/src/client/theme-default/styles/fonts.css
+++ b/src/client/theme-default/styles/fonts.css
@@ -1,3 +1,7 @@
+/* webfont-marker-begin */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+/* webfont-marker-end */
+
 @font-face {
   font-family: 'Inter var';
   font-weight: 100 900;
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index dff17f20425..7740055779f 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -145,9 +145,9 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-font-family-base: 'Inter var experimental', 'Inter var', ui-sans-serif,
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
+  --vp-font-family-base: 'Inter var experimental', 'Inter var', 'Inter',
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
     Consolas, 'Liberation Mono', 'Courier New', monospace;
diff --git a/src/node/config.ts b/src/node/config.ts
index 1f54c1d67b6..61559f50346 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -87,6 +87,16 @@ export interface UserConfig<ThemeConfig = any> {
    */
   cleanUrls?: CleanUrlsMode
 
+  /**
+   * Use web fonts instead of emitting font files to dist.
+   * The used theme should import a file named `fonts.(s)css` for this to work.
+   * If you are a theme author, to support this, place your web font import
+   * between `webfont-marker-begin` and `webfont-marker-end` comments.
+   *
+   * @default true in webcontainers, else false
+   */
+  useWebFonts?: boolean
+
   /**
    * Build end hook: called when SSG finish.
    * @param siteConfig The resolved configuration.
@@ -142,6 +152,7 @@ export interface SiteConfig<ThemeConfig = any>
     | 'lastUpdated'
     | 'ignoreDeadLinks'
     | 'cleanUrls'
+    | 'useWebFonts'
     | 'buildEnd'
     | 'transformHead'
     | 'transformHtml'
@@ -230,6 +241,9 @@ export async function resolveConfig(
     mpa: !!userConfig.mpa,
     ignoreDeadLinks: userConfig.ignoreDeadLinks,
     cleanUrls: userConfig.cleanUrls || 'disabled',
+    useWebFonts:
+      userConfig.useWebFonts ??
+      typeof process.versions.webcontainer === 'string',
     buildEnd: userConfig.buildEnd,
     transformHead: userConfig.transformHead,
     transformHtml: userConfig.transformHtml,
diff --git a/src/node/plugin.ts b/src/node/plugin.ts
index 01dc52fd685..f324e611a2f 100644
--- a/src/node/plugin.ts
+++ b/src/node/plugin.ts
@@ -13,6 +13,7 @@ import { slash } from './utils/slash'
 import { OutputAsset, OutputChunk } from 'rollup'
 import { staticDataPlugin } from './staticDataPlugin'
 import { PageDataPayload } from './shared'
+import { webFontsPlugin } from './webFontsPlugin'
 
 const hashRE = /\.(\w+)\.js$/
 const staticInjectMarkerRE =
@@ -315,6 +316,7 @@ export async function createVitePressPlugin(
   return [
     vitePressPlugin,
     vuePlugin,
+    webFontsPlugin(siteConfig.useWebFonts),
     ...(userViteConfig?.plugins || []),
     staticDataPlugin
   ]
diff --git a/src/node/webFontsPlugin.ts b/src/node/webFontsPlugin.ts
new file mode 100644
index 00000000000..03510414bf3
--- /dev/null
+++ b/src/node/webFontsPlugin.ts
@@ -0,0 +1,19 @@
+import { Plugin } from 'vite'
+
+const webfontMarkerRE =
+  /\/(?:\*|\/) *webfont-marker-begin *(?:\*\/|\n|\r|\n\r|\r\n)([^]*?)\/(?:\*|\/) *webfont-marker-end *(?:\*\/|\n|\r|\n\r|\r\n|$)/
+
+export const webFontsPlugin = (enabled = false): Plugin => ({
+  name: 'vitepress:webfonts',
+  enforce: 'pre',
+
+  transform(code, id) {
+    if (/[\\/]fonts\.s?css/.test(id)) {
+      if (enabled) {
+        return code.match(webfontMarkerRE)?.[1]
+      } else {
+        return code.replace(webfontMarkerRE, '')
+      }
+    }
+  }
+})