feat: switch critters to beasties, upgrade jsdom

Author: antfu

README.md

@@ -103,25 +103,25 @@ See [`@unhead/vue`'s docs](https://unhead.unjs.io/setup/vue/installation) for mo
 
 ## Critical CSS
 
-Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
+Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`beasties`](https://github.com/danielroe/beasties) package.
 Install it with:
 
 ```bash
-npm i -D critters
+npm i -D beasties
 ```
 
 Critical CSS generation will automatically be enabled for you.
 
-To configure `critters`, pass [its options](https://github.com/GoogleChromeLabs/critters#usage) into `ssgOptions.crittersOptions` in `vite.config.ts`:
+To configure `beasties`, pass [its options](https://github.com/danielroe/beasties#usage) into `ssgOptions.beastiesOptions` in `vite.config.ts`:
 
 ```ts
 // vite.config.ts
 export default defineConfig({
   ssgOptions: {
-    crittersOptions: {
+    beastiesOptions: {
       // E.g., change the preload strategy
       preload: 'media',
-      // Other options: https://github.com/GoogleChromeLabs/critters#usage
+      // Other options: https://github.com/danielroe/beasties#usage
     },
   },
 })

examples/multiple-pages-pwa/package.json

@@ -7,18 +7,18 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@unhead/vue": "^1.9.15",
-    "vue": "^3.4.31"
+    "@unhead/vue": "^1.11.10",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "cross-env": "^7.0.3",
-    "typescript": "^5.5.3",
+    "typescript": "^5.6.3",
     "unplugin-vue-markdown": "^0.26.2",
-    "vite": "^5.3.3",
+    "vite": "^5.4.10",
     "vite-plugin-pages": "^0.32.3",
-    "vite-plugin-pwa": "^0.20.0",
+    "vite-plugin-pwa": "^0.20.5",
     "vite-ssg": "workspace:*",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   }
 }

examples/multiple-pages-with-store/package.json

@@ -7,20 +7,20 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@unhead/vue": "^1.9.15",
-    "pinia": "^2.1.7",
-    "vue": "^3.4.31"
+    "@unhead/vue": "^1.11.10",
+    "pinia": "^2.2.4",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@nuxt/devalue": "^2.0.2",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "cross-env": "^7.0.3",
-    "typescript": "^5.5.3",
-    "unplugin-vue-components": "^0.27.2",
+    "typescript": "^5.6.3",
+    "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.26.2",
-    "vite": "^5.3.3",
+    "vite": "^5.4.10",
     "vite-plugin-pages": "^0.32.3",
     "vite-ssg": "workspace:*",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   }
 }

examples/multiple-pages/package.json

@@ -7,18 +7,18 @@
     "serve": "vite preview --base /ssg-base/"
   },
   "dependencies": {
-    "@unhead/vue": "^1.9.15",
-    "vue": "^3.4.31"
+    "@unhead/vue": "^1.11.10",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "cross-env": "^7.0.3",
-    "typescript": "^5.5.3",
-    "unplugin-vue-components": "^0.27.2",
+    "typescript": "^5.6.3",
+    "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-markdown": "^0.26.2",
-    "vite": "^5.3.3",
+    "vite": "^5.4.10",
     "vite-plugin-pages": "^0.32.3",
     "vite-ssg": "workspace:*",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   }
 }

examples/single-page/package.json

@@ -7,14 +7,14 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "pinia": "^2.1.7",
-    "vue": "^3.4.31"
+    "pinia": "^2.2.4",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "cross-env": "^7.0.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
     "vite-ssg": "workspace:*"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-ssg",
   "version": "0.23.8",
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.12.3",
   "description": "Server-side generation for Vite",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -83,12 +83,16 @@
     "release": "bumpp && npm publish"
   },
   "peerDependencies": {
+    "beasties": "^0.1.0",
     "critters": "^0.0.24",
     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0",
     "vue": "^3.2.10",
     "vue-router": "^4.0.1"
   },
   "peerDependenciesMeta": {
+    "beasties": {
+      "optional": true
+    },
     "critters": {
       "optional": true
     },
@@ -97,40 +101,41 @@
     }
   },
   "dependencies": {
-    "@unhead/dom": "^1.9.15",
-    "@unhead/vue": "^1.9.15",
+    "@unhead/dom": "^1.11.10",
+    "@unhead/vue": "^1.11.10",
     "fs-extra": "^11.2.0",
     "html-minifier-terser": "^7.2.0",
     "html5parser": "^2.0.2",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.1",
     "kolorist": "^1.8.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.22.0-beta.1",
+    "@antfu/eslint-config": "^3.8.0",
     "@types/fs-extra": "^11.0.4",
     "@types/html-minifier-terser": "^7.0.2",
     "@types/jsdom": "^21.1.7",
-    "@types/yargs": "^17.0.32",
-    "bumpp": "^9.4.1",
-    "critters": "^0.0.22",
-    "eslint": "^9.6.0",
-    "esno": "^4.7.0",
+    "@types/yargs": "^17.0.33",
+    "beasties": "^0.1.0",
+    "bumpp": "^9.8.0",
+    "critters": "^0.0.25",
+    "eslint": "^9.13.0",
+    "esno": "^4.8.0",
     "fast-glob": "^3.3.2",
     "p-queue": "^8.0.1",
-    "rollup": "^4.18.0",
-    "tsup": "^8.1.0",
-    "typescript": "^5.5.3",
+    "rollup": "^4.24.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
     "unbuild": "^2.0.0",
-    "vite": "^5.3.3",
-    "vite-plugin-pwa": "^0.20.0",
-    "vitest": "^1.6.0",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0",
-    "vue-tsc": "^2.0.26"
+    "vite": "^5.4.10",
+    "vite-plugin-pwa": "^0.20.5",
+    "vitest": "^2.1.4",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5",
+    "vue-tsc": "^2.1.8"
   },
   "resolutions": {
-    "vite": "^5.3.3"
+    "vite": "^5.4.10"
   }
 }

pnpm-lock.yaml

@@ -16,7 +16,7 @@ import type { ViteSSGContext, ViteSSGOptions } from '../types'
 import { serializeState } from '../utils/state'
 import { renderPreloadLinks } from './preload-links'
 import { buildLog, getSize, routesToPaths } from './utils'
-import { getCritters } from './critical'
+import { getBeastiesOrCritters } from './critical'
 
 export type Manifest = Record<string, string[]>
 
@@ -38,12 +38,12 @@ export async function build(ssgOptions: Partial<ViteSSGOptions> = {}, viteConfig
   const outDir = config.build.outDir || 'dist'
   const out = isAbsolute(outDir) ? outDir : join(root, outDir)
 
+  const mergedOptions = Object.assign({}, config.ssgOptions || {}, ssgOptions)
   const {
     script = 'sync',
     mock = false,
     entry = await detectEntry(root),
     formatting = 'none',
-    crittersOptions = {},
     includedRoutes: configIncludedRoutes = DefaultIncludedRoutes,
     onBeforePageRender,
     onPageRendered,
@@ -54,7 +54,9 @@ export async function build(ssgOptions: Partial<ViteSSGOptions> = {}, viteConfig
     concurrency = 20,
     rootContainerId = 'app',
     base,
-  }: ViteSSGOptions = Object.assign({}, config.ssgOptions || {}, ssgOptions)
+  }: ViteSSGOptions = mergedOptions
+
+  const beastiesOptions = mergedOptions.beastiesOptions ?? mergedOptions.crittersOptions ?? {}
 
   if (fs.existsSync(ssgOut))
     await fs.remove(ssgOut)
@@ -133,11 +135,11 @@ export async function build(ssgOptions: Partial<ViteSSGOptions> = {}, viteConfig
 
   buildLog('Rendering Pages...', routesPaths.length)
 
-  const critters = crittersOptions !== false
-    ? await getCritters(outDir, crittersOptions)
+  const beasties = beastiesOptions !== false
+    ? await getBeastiesOrCritters(outDir, beastiesOptions)
     : undefined
-  if (critters)
-    console.log(`${gray('[vite-ssg]')} ${blue('Critical CSS generation enabled via `critters`')}`)
+  if (beasties)
+    console.log(`${gray('[vite-ssg]')} ${blue('Critical CSS generation enabled via `beasties`')}`)
 
   const {
     path: _ssrManifestPath,
@@ -190,8 +192,8 @@ export async function build(ssgOptions: Partial<ViteSSGOptions> = {}, viteConfig
 
         const html = jsdom.serialize()
         let transformed = (await onPageRendered?.(route, html, appCtx)) || html
-        if (critters)
-          transformed = await critters.process(transformed)
+        if (beasties)
+          transformed = await beasties.process(transformed)
 
         const formatted = await formatHtml(transformed, formatting)
 
@@ -244,7 +246,7 @@ async function detectEntry(root: string) {
   // eslint-disable-next-line regexp/no-super-linear-backtracking
   const scriptSrcReg = /<script.*?src=["'](.+?)["'](?!<).*>\s*<\/script>/gi
   const html = await fs.readFile(join(root, 'index.html'), 'utf-8')
-  const scripts = [...html.matchAll(scriptSrcReg)] || []
+  const scripts = [...html.matchAll(scriptSrcReg)]
   const [, entry] = scripts.find((matchResult) => {
     const [script] = matchResult
     const [, scriptType] = script.match(/.*\stype=(?:'|")?([^>'"\s]+)/i) || []

src/node/build.ts

@@ -1,10 +1,26 @@
 import type Critters from 'critters'
-import type { Options } from 'critters'
+import type Beasties from 'beasties'
+import type { Options } from 'beasties'
 
-export async function getCritters(outDir: string, options: Options = {}): Promise<Critters | undefined> {
+export async function getBeastiesOrCritters(outDir: string, options: Options = {}): Promise<Critters | Beasties | undefined> {
   try {
-    const CrittersClass = (await import('critters')).default
+    const BeastiesClass = (await import('beasties')).default
+
+    return new BeastiesClass({
+      path: outDir,
+      logLevel: 'warn',
+      external: true,
+      inlineFonts: true,
+      preloadFonts: true,
+      ...options,
+    })
+  }
+  catch {
+  }
 
+  try {
+    const CrittersClass = (await import('critters')).default
+    console.warn('`critters` is deprecated. Please use `beasties` instead.')
     return new CrittersClass({
       path: outDir,
       logLevel: 'warn',

src/node/critical.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue'
 import type { RouteRecordRaw, Router, RouterOptions as VueRouterOptions } from 'vue-router'
 import type { MergeHead, VueHeadClient } from '@unhead/vue'
 import type { Options as CrittersOptions } from 'critters'
+import type { Options as BeastiesOptions } from 'beasties'
 
 export interface ViteSSGOptions {
   /**
@@ -71,10 +72,18 @@ export interface ViteSSGOptions {
   /**
    * Options for the critters package.
    *
+   * @deprecated Use `beastiesOptions` instead.
    * @see https://github.com/GoogleChromeLabs/critters
    */
   crittersOptions?: CrittersOptions | false
 
+  /**
+   * Options for the beasties package.
+   *
+   * @see https://github.com/danielroe/beasties
+   */
+  beastiesOptions?: BeastiesOptions | false
+
   /**
    * Custom function to modify the routes to do the SSG.
    *