bun-plugin-unocss

"Instant On-demand Atomic CSS Engine" - UnoCSS

Features

• 💉 Automatic injection of generated CSS into HTML files
• 🪄 On-demand CSS generation using UnoCSS core
• 🚀 Seamless integration with Bun's build system
• 📦 Support for HTML file processing with UnoCSS rules
• 🎨 Highly configurable
• 🔄 Real-time CSS generation during development
• ⚡ Zero-config setup with automatic UnoCSS config detection

Usage

bun install -d bun-plugin-unocss

Bundler

You may now use the plugin now via Bun.build:

// 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, // by default, it will look for the Uno config file in the project root
  ],
})

Server

Additionally, it can also be used in conjunction with HTML imports, via Bun.serve():

// server.ts
import home from './home.html'

const server = Bun.serve({
  static: {
    // Bundle & route home.html to "/home"
    '/': home,
  },

  async fetch(req) {
    console.log('any other request', req.url)

    // Return 404 for unmatched routes
    return new Response('Not Found', { status: 404 })
  },
})

console.log(`Listening on ${server.url}`)

<!-- home.html -->
<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
</head>

<body>
  <div id="root">Root Element</div>
  <div class="mt-24 text-red-500">Test</div>
</body>

</html>

Configuration

For this to work, though, you have to ensure that the plugin is defined in your bunfig.toml:

[serve.static]
plugins = [ "bun-plugin-unocss" ]

Testing

bun test

Changelog

Please see our releases page for more information on what has changed recently.

Contributing

Please review the Contributing Guide for details.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Stacks Discord Server

Postcardware

“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where bun-plugin-unocss is being used! We showcase them on our website too.

Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎

Sponsors

We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.

• JetBrains
• The Solana Foundation

Credits

Many thanks to the following core technologies & people who have contributed to this package:

• UnoCSS
• Anthony Fu
• Chris Breuer
• All Contributors

License

The MIT License (MIT). Please see LICENSE for more information.

Made with 💙