perf: Use of more compatible programmes

Author: markthree

.npmrc

@@ -1,3 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
-registry=https://registry.npmjs.org/
+# registry=https://registry.npmjs.org/

package.json

@@ -30,8 +30,10 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.4",
-    "beastcss": "^2.1.3",
-    "ohash": "^1.1.3"
+    "cssnano": "^7.0.6",
+    "ohash": "^1.1.3",
+    "purgecss": "^6.0.0",
+    "purgecss-from-html": "^6.0.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.9",

playground/app.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>View Panel</div>
+  <div class="foo">
+    View Panel
+  </div>
 </template>
 
 <script setup>
@@ -9,7 +11,13 @@ useServerHead({
       innerHTML: 'body { color: red }',
     },
     {
-      innerHTML: 'body { background: gray }',
+      innerHTML: '.foo { background: gray }',
+    },
+    {
+      innerHTML: '.bar { color: blue }',
+    },
+    {
+      innerHTML: '.foo { color: white }',
     },
   ],
 })

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { join } from 'node:path'
-import fs from 'node:fs/promises'
+import fs, { readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
-import { addPlugin, addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addPlugin, addServerPlugin, addTemplate, addTypeTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 function emptyDir(dir: string) {
   if (!existsSync(dir)) {
@@ -21,7 +21,10 @@ export default defineNuxtModule<ModuleOptions>({
     name: 'nuxt-style-extractor',
     configKey: 'Extracts the style of the page as an external css when rendered on the server side | 提取服务端渲染时页面的 style 为外部 css',
   },
-  defaults: {},
+  defaults: {
+    minify: true,
+    removeUnused: true,
+  },
   async setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
@@ -50,5 +53,20 @@ export default defineNuxtModule<ModuleOptions>({
         maxAge: 0,
       })
     }
+
+    addTemplate({
+      filename: 'nuxt-style-extractor-options.mjs',
+
+      getContents() {
+        return `export default ${JSON.stringify(_options)}`
+      },
+    })
+
+    addTypeTemplate({
+      filename: 'nuxt-style-extractor-options.d.ts',
+      getContents() {
+        return readFile(resolver.resolve('./nuxt-style-extractor-options.d.ts'), 'utf-8')
+      },
+    })
   },
 })

src/module.ts

@@ -0,0 +1,8 @@
+declare module '#build/nuxt-style-extractor-options.mjs' {
+  interface Options {}
+  const _Options: {
+    minify: boolean
+    removeUnused: boolean
+  }
+  export default _Options
+}

src/nuxt-style-extractor-options.d.ts

@@ -1,33 +1,130 @@
 import { hash } from 'ohash'
-import { defineNuxtPlugin, useRoute } from '#imports'
+import cssnano from 'cssnano'
+import { PurgeCSS } from 'purgecss'
+import purgehtml from 'purgecss-from-html'
+import { defineNuxtPlugin } from '#imports'
+import extractorOptions from '#build/nuxt-style-extractor-options.mjs'
+
+console.log(extractorOptions)
+
+interface Options {
+  html: string
+  css: string
+  name: string
+}
+
+let purgeCssCtx: PurgeCSS
+async function removeUnusedCss(options: Options) {
+  const { html, css } = options
+  if (!purgeCssCtx) {
+    purgeCssCtx = new PurgeCSS()
+  }
+  const [result] = await purgeCssCtx.purge({
+    content: [{ raw: html, extension: 'html' }],
+    css: [{ raw: css }],
+    extractors: [{
+      extensions: ['html'],
+      extractor: purgehtml,
+    }],
+  })
+  return result.css || ''
+}
+
+let cssnanoCtx: ReturnType<typeof cssnano>
+async function minifyCss(options: Options) {
+  const { css, name } = options
+  if (!cssnanoCtx) {
+    cssnanoCtx = cssnano()
+  }
+
+  const result = await cssnanoCtx.process(css, {
+    from: name,
+    map: false,
+  })
+
+  return result.css || ''
+}
+
+async function optimiseCss(options: Options) {
+  if (extractorOptions.removeUnused) {
+    options.css = await removeUnusedCss(options)
+  }
+
+  if (extractorOptions.minify) {
+    options.css = await minifyCss(options)
+  }
+
+  return options.css
+}
 
 export default defineNuxtPlugin({
   name: 'inject-style-id',
   setup(nuxt) {
-    const route = useRoute()
-    nuxt.ssrContext?.head.use({
-      hooks: {
-        'ssr:render'(ctx) {
-          let style = ''
-          ctx.tags = ctx.tags.filter((tag) => {
-            if (tag.tag === 'style' && tag.innerHTML) {
-              style += tag.innerHTML
-              return false
+    nuxt.hook('app:rendered', async (nuxtCtx) => {
+      const html = nuxtCtx.renderResult?.html || ''
+      nuxtCtx.ssrContext?.head.use({
+        hooks: {
+          async 'ssr:render'(ctx) {
+            let style = ''
+            ctx.tags = ctx.tags.filter((tag) => {
+              if (tag.tag === 'style' && tag.innerHTML) {
+                style += tag.innerHTML
+                return false
+              }
+              return true
+            })
+
+            if (!style) {
+              return
             }
-            return true
-          })
-          if (style) {
-            const key = hash([route.matched, style]) + '.css'
+
+            const name = hash([html, style]) + '.css'
+
+            const oldCss = await $fetch(`/_css/${name}`)
+
+            if (oldCss === '') {
+              return
+            }
+
+            if (oldCss) {
+              ctx.tags.push({
+                tag: 'link',
+                props: {
+                  rel: 'stylesheet',
+                  href: `/_css/${name}`,
+                },
+              })
+              return
+            }
+
+            const css = await optimiseCss({
+              html,
+              css: style,
+              name,
+            })
+
+            await $fetch('/_css', {
+              body: {
+                name,
+                css,
+              },
+              method: 'POST',
+            })
+
+            if (css === '') {
+              return
+            }
+
             ctx.tags.push({
-              tag: 'style',
+              tag: 'link',
               props: {
-                'data-style-extractor-key': key,
+                rel: 'stylesheet',
+                href: `/_css/${name}`,
               },
-              innerHTML: style,
             })
-          }
+          },
         },
-      },
+      })
     })
   },
 })

src/runtime/inject-style-id.server.ts

@@ -1,16 +1,9 @@
-import Beastcss from 'beastcss'
-import { defineNitroPlugin, defineEventHandler, useStorage, getRouterParam, setHeader } from '#imports'
+import { defineNitroPlugin, defineEventHandler, useStorage, getRouterParam, setHeader, readBody } from '#imports'
 
 export default defineNitroPlugin((nitroApp) => {
   const cacheStorage = useStorage<string>('cache:_css')
   const assetsStorage = useStorage<string>('assets:_css')
-  const beastcss = new Beastcss({
-    minifyCss: true,
-    merge: true,
-  })
 
-  const keyReg = /data-style-extractor-key="(.*?)"/
-  const styleReg = /<style[^>]*>([\s\S]*?)<\/style>/
   nitroApp.router.add('/_css/:name', defineEventHandler(async (event) => {
     const name = getRouterParam(event, 'name')
     let css = await cacheStorage.getItem(name!)
@@ -21,26 +14,13 @@ export default defineNitroPlugin((nitroApp) => {
     return css
   }))
 
-  nitroApp.hooks.hook('render:response', async (res) => {
-    const html: string = res.body
-    const [_, key] = html.match(keyReg) || []
-    if (!key) {
-      return
-    }
-    const storage = import.meta.prerender ? assetsStorage : cacheStorage
-    const item = await storage.getItem(key)
-    if (item === null) {
-      const newHtml = await beastcss.process(html).catch(() => html)
-      const [style, css] = newHtml.match(styleReg) || ['']
+  nitroApp.router.post('/_css', defineEventHandler(async (event) => {
+    const body = await readBody<{ name: string, css: string }>(event)
+    const { name, css } = body
 
-      await storage.setItem(key, css || '')
-      if (css) {
-        res.body = newHtml.replace(style, `<link href="/_css/${key}" rel="stylesheet" />`)
-      }
-      return
-    }
-    if (item) {
-      res.body = html.replace(styleReg, `<link href="/_css/${key}" rel="stylesheet" />`)
-    }
-  })
+    await Promise.all([
+      cacheStorage.setItem(name, css),
+      assetsStorage.setItem(name, css),
+    ])
+  }))
 })