.gitignore

@@ -12,3 +12,4 @@ pnpm-global
 TODOs.md
 .temp
 *.tgz
+examples-temp

.npmrc

@@ -1 +1,2 @@
 shell-emulator=true
+update-notifier=false

CHANGELOG.md

@@ -1,3 +1,19 @@
+# [1.0.0-alpha.23](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-10-25)
+
+
+### Bug Fixes
+
+* **build:** explicitly exit process after build to prevent hangup ([#1530](https://github.com/vuejs/vitepress/issues/1530)) ([09fcc46](https://github.com/vuejs/vitepress/commit/09fcc460794d515c48c38ccb47a936d58a2582b3))
+
+
+### Features
+
+* **build:** add `useWebFonts` option ([#1531](https://github.com/vuejs/vitepress/issues/1531)) ([c9f04e0](https://github.com/vuejs/vitepress/commit/c9f04e045922a6f1e11136bd1ccc824c2e9928f1))
+* support focus, colored diffs, error highlights in code blocks ([#1534](https://github.com/vuejs/vitepress/issues/1534)) ([04ab0eb](https://github.com/vuejs/vitepress/commit/04ab0eb6dcacb065e865332580088891bc2df893))
+* **theme:** add --vp-layout-top-height to adjust banner ([#1521](https://github.com/vuejs/vitepress/issues/1521)) ([a29a4a6](https://github.com/vuejs/vitepress/commit/a29a4a62c682b54ec88c609cb480ddb68b3f4699))
+
+
+
 # [1.0.0-alpha.22](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-10-22)
 
 

docs/guide/deploying.md

@@ -100,6 +100,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: docs/.vitepress/dist
+             # cname: example.com # if wanna deploy to custom domain
    ```
 
    ::: tip

docs/guide/markdown.md

@@ -71,11 +71,11 @@ For more details, see [Frontmatter](./frontmatter).
 **Input**
 
 ```
-| Tables        | Are           | Cool  |
-| ------------- |:-------------:| -----:|
+| Tables        |      Are      |  Cool |
+| ------------- | :-----------: | ----: |
 | col 3 is      | right-aligned | $1600 |
-| col 2 is      | centered      |   $12 |
-| zebra stripes | are neat      |    $1 |
+| col 2 is      |   centered    |   $12 |
+| zebra stripes |   are neat    |    $1 |
 ```
 
 **Output**
@@ -351,6 +351,131 @@ export default { // Highlighted
 }
 ```
 
+Alternatively, it's possible to highlight directly in the line by using the `// [!code hl]` comment.
+
+**Input**
+
+````
+```js
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!' // [!codeㅤ hl]
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!' // [!code hl]
+    }
+  }
+}
+```
+
+## Focus in Code Blocks
+
+Adding the `// [!code focus]` comment on a line will focus it and blur the other parts of the code. 
+
+Additionally, you can define a number of lines to focus using `// [!code focus:<lines>]`.
+
+**Input**
+
+````
+```js
+export default {
+  data () {
+    return {
+      msg: 'Focused!' // [!codeㅤ focus]
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js
+export default {
+  data () {
+    return {
+      msg: 'Focused!' // [!code focus]
+    }
+  }
+}
+```
+
+## Colored diffs in Code Blocks
+
+Adding the `// [!code --]` or `// [!code ++]` comments on a line will create a diff of that line, while keeping the colors of the codeblock. 
+
+**Input**
+
+````
+```js
+export default {
+  data () {
+    return {
+      msg: 'Removed' // [!codeㅤ --]
+      msg: 'Added' // [!codeㅤ ++]
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js
+export default {
+  data () {
+    return {
+      msg: 'Removed' // [!code --]
+      msg: 'Added' // [!code ++]
+    }
+  }
+}
+```
+
+## Errors and warnings
+
+Adding the `// [!code warning]` or `// [!code error]` comments on a line will color it accordingly.
+
+**Input**
+
+````
+```js
+export default {
+  data () {
+    return {
+      msg: 'Error', // [!codeㅤ error]
+      msg: 'Warning' // [!codeㅤ warning]
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js
+export default {
+  data () {
+    return {
+      msg: 'Error', // [!code error]
+      msg: 'Warning' // [!code warning]
+    }
+  }
+}
+```
+
+
 ## Line Numbers
 
 You can enable line numbers for each code blocks via config:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-alpha.22",
+  "version": "1.0.0-alpha.23",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
   "packageManager": "pnpm@7.9.2",
@@ -81,15 +81,16 @@
     "ci-docs": "run-s docs-build"
   },
   "dependencies": {
-    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.2.1",
+    "@docsearch/css": "^3.3.0",
+    "@docsearch/js": "^3.3.0",
     "@vitejs/plugin-vue": "^3.1.2",
-    "@vue/devtools-api": "^6.4.4",
-    "@vueuse/core": "^9.3.0",
+    "@vue/devtools-api": "^6.4.5",
+    "@vueuse/core": "^9.4.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "shiki": "^0.11.1",
-    "vite": "^3.1.6",
-    "vue": "^3.2.40"
+    "shiki-processor": "^0.1.0",
+    "vite": "^3.1.8",
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@mdit-vue/plugin-component": "^0.11.1",
@@ -99,11 +100,11 @@
     "@mdit-vue/plugin-title": "^0.11.1",
     "@mdit-vue/plugin-toc": "^0.11.1",
     "@mdit-vue/shared": "^0.11.0",
-    "@rollup/plugin-alias": "^4.0.0",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-alias": "^4.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/compression": "^1.7.2",
     "@types/cross-spawn": "^6.0.2",
@@ -119,7 +120,7 @@
     "@types/markdown-it-emoji": "^2.0.2",
     "@types/micromatch": "^4.0.2",
     "@types/minimist": "^1.2.2",
-    "@types/node": "^18.8.3",
+    "@types/node": "^18.11.5",
     "@types/prompts": "^2.4.1",
     "chokidar": "^3.5.3",
     "compression": "^1.7.4",
@@ -128,7 +129,7 @@
     "debug": "^4.3.4",
     "diacritics": "^1.3.0",
     "enquirer": "^2.3.6",
-    "esbuild": "^0.15.10",
+    "esbuild": "^0.15.12",
     "escape-html": "^1.0.3",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
@@ -141,27 +142,27 @@
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.2",
     "micromatch": "^4.0.5",
-    "minimist": "^1.2.6",
+    "minimist": "^1.2.7",
     "npm-run-all": "^4.1.5",
     "ora": "^5.4.1",
     "picocolors": "^1.0.0",
     "pkg-dir": "^5.0.0",
-    "playwright-chromium": "^1.27.0",
+    "playwright-chromium": "^1.27.1",
     "polka": "1.0.0-next.22",
     "prettier": "^2.7.1",
     "prompts": "^2.4.2",
     "punycode": "^2.1.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-esbuild": "^4.10.1",
     "semver": "^7.3.8",
-    "simple-git-hooks": "^2.8.0",
+    "simple-git-hooks": "^2.8.1",
     "sirv": "^2.0.2",
     "supports-color": "^9.2.3",
     "typescript": "~4.8.4",
-    "vitest": "^0.24.0",
-    "vue-tsc": "^1.0.0",
+    "vitest": "^0.24.3",
+    "vue-tsc": "^1.0.9",
     "wait-on": "^6.0.1"
   },
   "pnpm": {

src/client/theme-default/components/VPContent.vue

@@ -63,7 +63,7 @@ const NotFound = inject('NotFound')
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height);
+    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
   }
 
   .VPContent.has-sidebar {

src/client/theme-default/components/VPDoc.vue

@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 

src/client/theme-default/components/VPHero.vue

@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc(var(--vp-nav-height) * -1);
-  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
   }
 }
 

src/client/theme-default/components/VPNav.vue

@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: 0;
+  top: var(--vp-layout-top-height, 0px);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;

src/client/theme-default/components/VPNavScreen.vue

@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: var(--vp-nav-height-mobile);
+  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
   right: 0;
   bottom: 0;
   left: 0;

src/client/theme-default/components/VPSidebar.vue

@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: 0;
+  top: var(--vp-layout-top-height, 0px);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);

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;

src/client/theme-default/styles/components/vp-doc.css

@@ -329,6 +329,62 @@
   display: inline-block;
 }
 
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 1rem;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
 .vp-doc div[class*='language-'].line-numbers-mode {
   padding-left: 32px;
 }

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;

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;
@@ -172,9 +172,10 @@
 :root {
   --vp-z-index-local-nav: 10;
   --vp-z-index-nav: 20;
-  --vp-z-index-backdrop: 30;
-  --vp-z-index-sidebar: 40;
-  --vp-z-index-footer: 50;
+  --vp-z-index-layout-top: 30;
+  --vp-z-index-backdrop: 40;
+  --vp-z-index-sidebar: 50;
+  --vp-z-index-footer: 60;
 }
 
 /**
@@ -208,6 +209,15 @@
   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
   --vp-code-line-number-color: var(--vp-c-text-dark-3);
 
+  --vp-code-line-diff-add-color: rgba(125, 191, 123, 0.1);
+  --vp-code-line-diff-add-symbol-color: rgba(125, 191, 123, 0.5);
+
+  --vp-code-line-diff-remove-color: rgba(255, 128, 128, 0.05);
+  --vp-code-line-diff-remove-symbol-color: rgba(255, 128, 128, 0.5);
+
+  --vp-code-line-error-color: var(--vp-c-red-dimm-2);
+  --vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
+
   --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
   --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
 }

src/node/cli.ts

@@ -28,10 +28,14 @@ if (!command || command === 'dev') {
     process.exit(1)
   })
 } else if (command === 'build') {
-  build(root, argv).catch((err) => {
-    console.error(c.red(`build error:\n`), err)
-    process.exit(1)
-  })
+  build(root, argv)
+    .then(() => {
+      process.exit()
+    })
+    .catch((err) => {
+      console.error(c.red(`build error:\n`), err)
+      process.exit(1)
+    })
 } else if (command === 'serve') {
   serve(argv).catch((err) => {
     console.error(c.red(`failed to start server. error:\n`), err)

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,

src/node/markdown/plugins/highlight.ts

@@ -1,4 +1,14 @@
-import { IThemeRegistration, getHighlighter, HtmlRendererOptions } from 'shiki'
+import { IThemeRegistration, HtmlRendererOptions } from 'shiki'
+import {
+  createDiffProcessor,
+  createFocusProcessor,
+  createHighlightProcessor,
+  createRangeProcessor,
+  getHighlighter,
+  Processor,
+  addClass,
+  defineProcessor
+} from 'shiki-processor'
 import type { ThemeOptions } from '../markdown'
 
 /**
@@ -32,38 +42,80 @@ const attrsToLines = (attrs: string): HtmlRendererOptions['lineOptions'] => {
   }))
 }
 
+const errorLevelProcessor = defineProcessor({
+  name: 'error-level',
+  handler: createRangeProcessor({
+    error: ['highlighted', 'error'],
+    warning: ['highlighted', 'warning']
+  })
+})
+
 export async function highlight(
   theme: ThemeOptions = 'material-palenight'
 ): Promise<(str: string, lang: string, attrs: string) => string> {
   const hasSingleTheme = typeof theme === 'string' || 'name' in theme
   const getThemeName = (themeValue: IThemeRegistration) =>
     typeof themeValue === 'string' ? themeValue : themeValue.name
 
+  const processors: Processor[] = [
+    createFocusProcessor(),
+    createHighlightProcessor({ hasHighlightClass: 'highlighted' }),
+    createDiffProcessor(),
+    errorLevelProcessor
+  ]
+
   const highlighter = await getHighlighter({
-    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light]
+    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light],
+    processors
   })
-  const preRE = /^<pre.*?>/
+
+  const styleRE = /<pre .* (style=".*")><code>/
+  const preRE = /^<pre(.*?)>/
   const vueRE = /-vue$/
 
   return (str: string, lang: string, attrs: string) => {
     const vPre = vueRE.test(lang) ? '' : 'v-pre'
     lang = lang.replace(vueRE, '').toLowerCase()
 
     const lineOptions = attrsToLines(attrs)
+    const cleanup = (str: string) =>
+      str
+        .replace(preRE, (_, attributes) => `<pre ${vPre}${attributes}>`)
+        .replace(styleRE, (_, style) => _.replace(style, ''))
 
     if (hasSingleTheme) {
-      return highlighter
-        .codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme) })
-        .replace(preRE, `<pre ${vPre}>`)
+      return cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme)
+        })
+      )
     }
 
-    const dark = highlighter
-      .codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.dark) })
-      .replace(preRE, `<pre ${vPre} class="vp-code-dark">`)
+    const dark = addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.dark)
+        })
+      ),
+      'vp-code-dark',
+      'pre'
+    )
 
-    const light = highlighter
-      .codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.light) })
-      .replace(preRE, `<pre ${vPre} class="vp-code-light">`)
+    const light = addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.light)
+        })
+      ),
+      'vp-code-light',
+      'pre'
+    )
 
     return dark + light
   }

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
   ]

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, '')
+      }
+    }
+  }
+})