diff --git a/README.md b/README.md
index 769d7d7..ee667bc 100644
--- 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
index aeb6c4d..86f445a 100644
--- 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('', `\n`)
-
- 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('', `\n`)
+
+ return {
+ contents,
+ loader: 'html',
+ }
+ })
+ },
+ }
}
export default plugin
diff --git a/test/unocss.test.ts b/test/unocss.test.ts
index cbc237b..24f84d9 100644
--- 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 = `
-
-
- Test
-
-
-
-
- `
+ const htmlPath = `${import.meta.dir}/test.html`
+ await Bun.write(htmlPath, `
+
+
+ Test
+
+
+
+
+ `)
- 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,
})