chore: fix playground build

unocss · Apr 20, 2024 · 026916a · 026916a
1 parent ae509cb
commit 026916a
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 22 deletions.
diff --git a/packages/preset-web-fonts/src/local-font.ts b/packages/preset-web-fonts/src/local-font.ts
@@ -2,29 +2,23 @@
  * Inspired by:
  * https://github.com/feat-agency/vite-plugin-webfont-dl/blob/master/src/downloader.ts
  */
-import process from 'node:process'
-import { resolve } from 'node:path'
-import { lstat, mkdir, readFile, writeFile } from 'node:fs/promises'
-import { Buffer } from 'node:buffer'
-import { $fetch } from 'ofetch'
 import { resolveDownloadDir } from './util'
 
 const fontUrlRegex = /[-a-z0-9@:%_+.~#?&/=]+\.(?:woff2?|eot|ttf|otf|svg)/gi
 
 const defaultFontCssFilename = 'fonts.css'
 
-const isNode = typeof process !== 'undefined' && process.stdout && !process.versions.deno
-
 interface UseLocalFontOptions {
   downloadDir: string
 }
 
 export { resolveDownloadDir }
 
 export async function useLocalFont(css: string, { downloadDir }: UseLocalFontOptions) {
-  if (!isNode)
-    return
-
+  const [{ mkdir, writeFile }, { resolve }] = await Promise.all([
+    import('node:fs/promises'),
+    import('node:path'),
+  ])
   await mkdir(downloadDir, { recursive: true })
 
   // Download the fonts locally and update the font.css file
@@ -40,21 +34,29 @@ export async function useLocalFont(css: string, { downloadDir }: UseLocalFontOpt
 }
 
 async function fileExists(path: string) {
+  const { lstat } = await import('node:fs/promises')
   return await lstat(path).then(({ isFile }) => isFile()).catch(() => false)
 }
 
 async function saveFont(url: string, path: string) {
   if (await fileExists(path))
     return
+
+  const [{ writeFile }, { $fetch }, { Buffer }] = await Promise.all([
+    import('node:fs/promises'),
+    import('ofetch'),
+    import('node:buffer'),
+  ])
   const response = await $fetch(url, { headers: { responseType: 'arraybuffer' } }) as ArrayBuffer
   const content = new Uint8Array(response)
   await writeFile(path, Buffer.from(content))
 }
 
 export async function readFontCSS(downloadDir: string) {
-  if (!isNode)
-    return ''
-
+  const [{ resolve }, { readFile }] = await Promise.all([
+    import('node:path'),
+    import('node:fs/promises'),
+  ])
   const fontCssPath = resolve(downloadDir, defaultFontCssFilename)
   if (!await fileExists(fontCssPath))
     return '/* [preset-web-font] This code will be replaced with the local CSS once it is downloaded */'

diff --git a/packages/preset-web-fonts/src/preset.ts b/packages/preset-web-fonts/src/preset.ts
@@ -5,6 +5,7 @@ import { BunnyFontsProvider } from './providers/bunny'
 import { GoogleFontsProvider } from './providers/google'
 import { FontshareProvider } from './providers/fontshare'
 import { NoneProvider } from './providers/none'
+import { isNode } from './util'
 import type { Provider, ResolvedWebFontMeta, WebFontMeta, WebFontsOptions, WebFontsProviders } from './types'
 
 const builtinProviders = {
@@ -59,15 +60,14 @@ export function createWebFontPreset(fetcher: (url: string) => Promise<any>) {
       preflights: [
         {
           async getCSS() {
-            if (downloadLocally) {
-              const { readFontCSS, resolveDownloadDir } = await import('./local-font')
-              const resolvedDownloadDir = await resolveDownloadDir(downloadDir)
-              return readFontCSS(resolvedDownloadDir)
-            }
-            else {
+            if (!isNode || !downloadLocally) {
               const { getRemoteFontsCSS } = await import('./remote-font')
               return getRemoteFontsCSS(fontObject, { inlineImports, customFetch })
             }
+
+            const { readFontCSS, resolveDownloadDir } = await import('./local-font')
+            const resolvedDownloadDir = await resolveDownloadDir(downloadDir)
+            return readFontCSS(resolvedDownloadDir)
           },
           layer: inlineImports ? undefined : LAYER_IMPORTS,
         },

diff --git a/packages/preset-web-fonts/src/util.ts b/packages/preset-web-fonts/src/util.ts
@@ -1,5 +1,5 @@
 // eslint-disable-next-line node/prefer-global/process
-const isNode = typeof process !== 'undefined' && process.stdout && !process.versions.deno
+export const isNode = typeof process !== 'undefined' && process.stdout && !process.versions.deno
 
 export async function resolveDownloadDir(downloadDir?: string | (() => Promise<string>)) {
   if (!isNode)

diff --git a/playground/uno.config.ts b/playground/uno.config.ts
@@ -7,7 +7,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import presetWebFonts from '../packages/preset-web-fonts/src/'
+import presetWebFonts from '@unocss/preset-web-fonts'
 
 export default defineConfig({
   theme: {
@@ -24,7 +24,6 @@ export default defineConfig({
     presetUno(),
     presetIcons(),
     presetWebFonts({
-      downloadLocally: true,
       provider: 'google',
       fonts: {
         sans: 'Lato',

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -40,6 +40,7 @@ export default defineConfig({
   ],
   optimizeDeps: {
     exclude: [
+      '@unocss/preset-web-fonts/local-font',
       '@iconify/utils/lib/loader/fs',
       '@iconify/utils/lib/loader/install-pkg',
       '@iconify/utils/lib/loader/node-loader',
@@ -51,6 +52,7 @@ export default defineConfig({
     emptyOutDir: true,
     rollupOptions: {
       external: [
+        '@unocss/preset-web-fonts/local-font',
         '@iconify/utils/lib/loader/fs',
         '@iconify/utils/lib/loader/install-pkg',
         '@iconify/utils/lib/loader/node-loader',