perf: Use of optimised utils

Author: markthree

package.json

@@ -31,11 +31,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.13.2",
-    "csso": "^5.0.5",
     "ohash": "^1.1.4",
-    "pathe": "^1.1.2",
-    "purgecss": "^6.0.0",
-    "purgecss-from-html": "^6.0.0"
+    "pathe": "^1.1.2"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.6.0",

pnpm-lock.yaml

@@ -105,6 +105,12 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.nitro.virtual['#style-extractor/nuxt-style-extractor-transform.js'] = () => {
       return fs.readFile(transformFile, 'utf-8')
     }
+    nuxt.options.nitro.virtual['#style-extractor/remove-unused.js'] = () => {
+      return fs.readFile(resolver.resolve('./runtime/utils/remove-unused.js'), 'utf-8')
+    }
+    nuxt.options.nitro.virtual['#style-extractor/minify.js'] = () => {
+      return fs.readFile(resolver.resolve('./runtime/utils/minify.js'), 'utf-8')
+    }
 
     nuxt.options.nitro.virtual['#style-extractor/nuxt-style-extractor-cache-control.js'] = () => {
       return `const cacheControl = "${_options.cacheControl === null ? '' : _options.cacheControl}";
@@ -123,13 +129,6 @@ export default defineNuxtModule<ModuleOptions>({
       },
     })
 
-    addTemplate({
-      filename: 'nuxt-style-extractor-transform.js',
-      getContents() {
-        return fs.readFile(transformFile, 'utf-8')
-      },
-    })
-
     addTypeTemplate({
       filename: 'nuxt-style-extractor.d.ts',
       getContents() {

src/module.ts

@@ -13,18 +13,23 @@ declare module '#build/nuxt-style-extractor-transform.js' {
   export default optimiseCss
 }
 
-declare module '#style-extractor/nuxt-style-extractor-transform.js' {
+declare module '#style-extractor/nuxt-style-extractor-cache-control.js' {
+  const cacheControl: string
+  export default cacheControl
+}
+
+declare module '#style-extractor/remove-unused.js' {
   export interface Options {
     html: string
     css: string
     name: string
   }
   type OptimiseCss = (options: Options) => Promise<string> | string
-  const optimiseCss: OptimiseCss
-  export default optimiseCss
+  const removeUnusedCss: OptimiseCss
+  export const removeUnusedCss
 }
 
-declare module '#style-extractor/nuxt-style-extractor-cache-control.js' {
-  const cacheControl: string
-  export default cacheControl
+declare module '#style-extractor/minify.js' {
+  const minify: (css: string) => string
+  export const minify
 }

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

@@ -1,23 +1,5 @@
-import { minify } from 'csso/dist/csso.esm'
-import { PurgeCSS } from 'purgecss'
-import purgehtml from 'purgecss-from-html'
-
-let purgeCssCtx
-async function removeUnusedCss(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 || ''
-}
+import { minify } from '#style-extractor/minify.js'
+import { removeUnusedCss } from '#style-extractor/remove-unused.js'
 
 async function minifyCss(options) {
   const { css } = options

src/runtime/transforms/best.js

@@ -1,4 +1,4 @@
-import { minify } from 'csso/dist/csso.esm'
+import { minify } from '#style-extractor/minify.js'
 
 export default async (options) => {
   const { css } = options

src/runtime/transforms/minify.js

@@ -1,21 +1,3 @@
-import { PurgeCSS } from 'purgecss'
-import purgehtml from 'purgecss-from-html'
-
-let purgeCssCtx
-async function removeUnusedCss(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 || ''
-}
+import { removeUnusedCss } from '#style-extractor/remove-unused.js'
 
 export default options => removeUnusedCss(options)