unocss-componentify

An agnostic UnoCSS generator that creates isolated styles for each component.

[!IMPORTANT] This project was inspired by @antfu's starter-vue-webcomponent-uno. Special thanks to Anthony Fu for the inspiration and guidance.

pnpm add -D unocss-componentify

Usage

# Basic usage
pnpm unocss-componentify

# With options
pnpm unocss-componentify --include './src/components/**/*.vue' --output 'src/.generated/css.ts'

CLI Options

• --cwd - Specify the current working directory (default: process.cwd())
• --include - Glob pattern to match files
• --reset-css - Standard reset CSS stylesheets to be included (default: @unocss/reset/tailwind.css)
• --user-style - Extra styles to be bundled into the generated CSS
• --output - Output directory or file path (default: src/.generated/css.ts)
• --minify - Whether to minify the output CSS (default: true)

Configuration

Create a unocss-componentify.config.ts file in your project root:

import { defineConfig } from 'unocss-componentify'

export default defineConfig({
  include: ['./src/components/**/*.vue'],
  // Reset CSS stylesheets
  resetCSS: '@unocss/reset/tailwind.css',
  // This will be injected into css output
  userStyle: `./src/style.css`,

  // Compose css to a single file
  output: 'src/.generated/css.ts',

  // Output to a directory with a file for each component
  output: 'src/.generated',

  minify: true,
  targets: {
    chrome: 100,
  }
})

Why ?

I want to use UnoCSS to build components, but atomic CSS can cause conflicts with the host application's styles. Therefore, I hope to achieve isolation through shadow DOM. After @antfu recommended the starter-vue-webcomponent-uno project, I realized that the CSS build implementation could be made into a separate library. Perhaps it can also be applied to web extension builds in the future?

License

MIT License © jinghaihan