feat: make plugin configurable

stacksjs · Feb 3, 2025 · d9d2359 · d9d2359
1 parent a89cee5
commit d9d2359
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -30,14 +30,19 @@ You may now use the plugin now via `Bun.build`:
 
 ```ts
 // build.ts
+import type { UserConfig } from 'unocss'
 import { plugin as unocss } from 'bun-plugin-unocss'
 // import unocss from 'bun-plugin-unocss'
 
+const config: UserConfig = {
+  // Your UnoCSS config
+}
+
 Bun.build({
   entrypoints: ['./src/index.html'],
   outdir: './dist',
   plugins: [
-    unocss()
+    unocss(config), // by default, it will look for the Uno config file in the project root
   ],
 })
 ```
@@ -51,20 +56,13 @@ Additionally, it can also be used in conjunction with HTML imports, via `Bun.ser
 import home from './home.html'
 
 const server = Bun.serve({
-  // Add HTML imports to `static`
   static: {
     // Bundle & route home.html to "/home"
     '/': home,
   },
 
-  // Enable development mode for:
-  // - Detailed error messages
-  // - Rebuild on request
-  development: true,
-
-  // Handle API requests
   async fetch(req) {
-    console.log('on server')
+    console.log('any other request', req.url)
 
     // Return 404 for unmatched routes
     return new Response('Not Found', { status: 404 })

diff --git a/src/index.ts b/src/index.ts
@@ -1,24 +1,36 @@
 import type { BunPlugin } from 'bun'
+import type { UserConfig } from 'unocss'
 import { loadConfig } from '@unocss/config'
 import { createGenerator } from '@unocss/core'
 
-export const plugin: BunPlugin = {
-  name: 'bun-plugin-unocss',
-  async setup(build) {
-    const { config } = await loadConfig()
-    const generator = await createGenerator(config)
+export function plugin(userConfig?: UserConfig): BunPlugin {
+  return {
+    name: 'bun-plugin-unocss',
+    async setup(build) {
+      let conf: UserConfig
 
-    build.onLoad({ filter: /\.html$/ }, async ({ path }) => {
-      const html = await Bun.file(path).text()
-      const { css } = await generator.generate(html)
-      const contents = html.replace('</head>', `<style>${css}</style>\n</head>`)
-
-      return {
-        contents,
-        loader: 'html',
+      if (userConfig) {
+        conf = userConfig
+      }
+      else {
+        const { config } = await loadConfig()
+        conf = config
       }
-    })
-  },
+
+      const generator = await createGenerator(conf)
+
+      build.onLoad({ filter: /\.html$/ }, async ({ path }) => {
+        const html = await Bun.file(path).text()
+        const { css } = await generator.generate(html)
+        const contents = html.replace('</head>', `<style>${css}</style>\n</head>`)
+
+        return {
+          contents,
+          loader: 'html',
+        }
+      })
+    },
+  }
 }
 
 export default plugin
diff --git a/test/unocss.test.ts b/test/unocss.test.ts
@@ -1,34 +1,29 @@
 import { afterAll, describe, expect, it } from 'bun:test'
 import { plugin as unocss } from '../src/index'
+import unoConfig from '../uno.config'
 
 describe('bun-plugin-unocss', () => {
   it('should inject generated CSS into HTML', async () => {
-    const html = `
-      <!DOCTYPE html>
-      <html>
-        <head><title>Test</title></head>
-        <body>
-          <div class="mt-24 text-red-500"></div>
-        </body>
-      </html>
-    `
+    const htmlPath = `${import.meta.dir}/test.html`
+    await Bun.write(htmlPath, `
+    <!DOCTYPE html>
+    <html>
+      <head><title>Test</title></head>
+      <body>
+        <div class="mt-24 text-red-500"></div>
+      </body>
+    </html>
+  `)
 
-    await Bun.write('test.html', html)
-
-    // Process with Bun plugin
     const result = await Bun.build({
-      entrypoints: ['test.html'],
-      outdir: 'out',
-      plugins: [unocss],
-      root: import.meta.dir, // Add root directory specification
+      entrypoints: [htmlPath],
+      outdir: `${import.meta.dir}/out`,
+      plugins: [unocss(unoConfig)],
     })
 
-    // Get the output contents directly from build results
     const output = await result.outputs[0].text()
-
-    // Verify CSS properties without spaces (UnoCSS minifies by default)
-    expect(output).toInclude('margin-top:6rem') // mt-24
-    expect(output).toInclude('color:rgb(239 68 68') // text-red-500
+    expect(output).toInclude('.mt-24{margin-top:6rem}')
+    expect(output).toInclude('.text-red-500{color:rgb(239 68 68)}')
   })
 
   it('should handle HTML without UnoCSS classes', async () => {
@@ -38,7 +33,7 @@ describe('bun-plugin-unocss', () => {
     const result = await Bun.build({
       entrypoints: ['test-empty.html'],
       outdir: 'out',
-      plugins: [unocss],
+      plugins: [unocss(unoConfig)],
       root: import.meta.dir,
     })