refactor: use of more compatible programmes

Author: markthree

README.md

@@ -47,3 +47,32 @@ export default defineNuxtConfig({
 ```
 
 That's all. Everything's automatic.
+
+### Configuration
+
+Of course, you can also configure it.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  styleExtractor: {
+    minify: true, // Whether to enable minification
+    removeUnused: true, // Whether to remove unused styles
+  },
+});
+```
+
+#### Custom Transformer
+
+```ts
+// style-extractor.mjs
+export default (options) => {
+  return options.css + "body { background: red }";
+};
+// nuxt.config.ts
+export default defineNuxtConfig({
+  styleExtractor: {
+    transformFile: "style-extractor.mjs",
+  },
+});
+```

README_CN.md

@@ -42,3 +42,33 @@ export default defineNuxtConfig({
 ```
 
 仅此而已，一切都是自动的。
+
+### 配置
+
+当然你也可以进行配置
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+    styleExtractor: {
+        minify: true, // 是否开启压缩
+        removeUnused: true, // 是否移除未使用
+    },
+});
+```
+
+#### 自定义转换器
+
+```ts
+// style-extractor.mjs
+export default (options) => {
+    return options.css + "body { background: red }";
+};
+
+// nuxt.config.ts
+export default defineNuxtConfig({
+    styleExtractor: {
+        transformFile: "style-extractor.mjs",
+    },
+});
+```

package.json

@@ -30,8 +30,10 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.4",
-    "ohash": "^1.1.3",
+    "@types/csso": "^5.0.4",
     "cssnano": "^7.0.6",
+    "csso": "^5.0.5",
+    "ohash": "^1.1.3",
     "purgecss": "^6.0.0",
     "purgecss-from-html": "^6.0.0"
   },

playground/nuxt.config.ts

@@ -2,4 +2,9 @@ export default defineNuxtConfig({
   modules: ['../src/module'],
   devtools: { enabled: true },
   compatibilityDate: '2024-08-16',
+  sourcemap: false,
+  styleExtractor: {
+    removeUnused: false,
+    minify: false,
+  },
 })

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { join } from 'node:path'
-import fs, { readFile } from 'node:fs/promises'
+import fs from 'node:fs/promises'
 import { existsSync } from 'node:fs'
+import { hash } from 'ohash'
 import { addPlugin, addServerPlugin, addTemplate, addTypeTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 function emptyDir(dir: string) {
@@ -14,21 +15,51 @@ function emptyDir(dir: string) {
 }
 
 // Module options TypeScript interface definition
-export interface ModuleOptions {}
+export interface ModuleOptions {
+  /**
+   * @default true
+   */
+  minify: boolean
+  /**
+   * @default true
+   */
+  removeUnused: boolean
+
+  /**
+   * @default automatically use built-in modules via other configurations by default
+   * @description Optimise css module path
+   * @example
+   * ```
+   * // style-extractor.mjs
+   * export default options => {
+   *    return options.css + 'body { background: red }'
+   * }
+   *
+   * // nuxt.config.ts
+   * export default defineNuxtConfig({
+   *  styleExtractor: {
+   *    transformFile: 'style-extractor.mjs'
+   *  }
+   * })
+   * ```
+   */
+  transformFile: string
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'nuxt-style-extractor',
-    configKey: 'Extracts the style of the page as an external css when rendered on the server side | 提取服务端渲染时页面的 style 为外部 css',
+    configKey: 'styleExtractor',
   },
   defaults: {
-    minify: false,
+    minify: true,
     removeUnused: true,
+    transformFile: '',
   },
   async setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
-    addPlugin(resolver.resolve('./runtime/inject-style-id.server'))
+    addPlugin(resolver.resolve('./runtime/plugin.server'))
 
     addServerPlugin(resolver.resolve('./runtime/server/plugins/style-extractor'))
 
@@ -55,18 +86,43 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     addTemplate({
-      filename: 'nuxt-style-extractor-options.mjs',
+      filename: 'nuxt-style-extractor-config-hash.mjs',
+      getContents() {
+        return `export const configHash = "${hash(_options)}"`
+      },
+    })
 
+    addTemplate({
+      filename: 'nuxt-style-extractor-transform.mjs',
       getContents() {
-        return `export default ${JSON.stringify(_options)}`
+        if (_options.transformFile !== '') {
+          return fs.readFile(_options.transformFile, 'utf-8')
+        }
+        return fs.readFile(getDefaultTransformFile(), 'utf-8')
       },
     })
 
     addTypeTemplate({
-      filename: 'nuxt-style-extractor-options.d.ts',
+      filename: 'nuxt-style-extractor.d.ts',
       getContents() {
-        return readFile(resolver.resolve('./runtime/nuxt-style-extractor-options.d.ts'), 'utf-8')
+        return fs.readFile(resolver.resolve('./runtime/nuxt-style-extractor.d.ts'), 'utf-8')
       },
     })
+
+    function getDefaultTransformFile() {
+      if (_options.minify && _options.removeUnused) {
+        return resolver.resolve('./runtime/transforms/best.mjs')
+      }
+
+      if (_options.minify) {
+        return resolver.resolve('./runtime/transforms/minify.mjs')
+      }
+
+      if (_options.removeUnused) {
+        return resolver.resolve('./runtime/transforms/remove-unused.mjs')
+      }
+
+      return resolver.resolve('./runtime/transforms/plain.mjs')
+    }
   },
 })

src/module.ts

@@ -0,0 +1,14 @@
+declare module '#build/nuxt-style-extractor-config-hash.mjs' {
+  export const configHash: string
+}
+
+declare module '#build/nuxt-style-extractor-transform.mjs' {
+  export interface Options {
+    html: string
+    css: string
+    name: string
+  }
+  type OptimiseCss = (options: Options) => Promise<string> | string
+  const optimiseCss: OptimiseCss
+  export default optimiseCss
+}

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

@@ -1,62 +1,10 @@
 import { hash } from 'ohash'
-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'
-
-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
-}
+import optimiseCss from '#build/nuxt-style-extractor-transform.mjs'
+import { configHash } from '#build/nuxt-style-extractor-config-hash.mjs'
 
 export default defineNuxtPlugin({
-  name: 'inject-style-id',
+  name: 'style-extractor',
   setup(nuxt) {
     nuxt.hook('app:rendered', async (nuxtCtx) => {
       const html = nuxtCtx.renderResult?.html || ''
@@ -76,7 +24,7 @@ export default defineNuxtPlugin({
               return
             }
 
-            const name = hash([html, style]) + '.css'
+            const name = hash([html, style, configHash]) + '.css'
 
             const oldCss = await $fetch(`/_css/${name}`)
 

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

@@ -0,0 +1,38 @@
+import { minify } from 'csso'
+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 || ''
+}
+
+function minifyCss(options) {
+  const { css } = options
+
+  return minify(css || '', {
+    sourceMap: false,
+  }).css
+}
+
+async function optimiseCss(options) {
+  options.css = await removeUnusedCss(options)
+
+  options.css = minifyCss(options)
+
+  return options.css
+}
+
+export default optimiseCss