@htmelt/plugin

@htmelt/unocss

UnoCSS plugin for HTMelt.

How It Works

1. It loads your unocss.config.js file.
2. It scans your JSX and TSX files for tokens identified by UnoCSS plugins/presets.
3. For each JSX and TSX module, it generates a separate CSS file and adds it to the document with JavaScript.

Roadmap

• Use lightningcss to remove duplicate CSS rules on a per-chunk basis.

Install

pnpm install -D @htmelt/unocss
yarn add -D @htmelt/unocss
npm install --save-dev @htmelt/unocss

import.meta extensions

The typings of import.meta and import.meta.env can both be extended by plugins.

declare module '@htmelt/plugin/dist/importMeta.mjs' {
  export interface ImportMeta {
    foo: string
  }
  export interface ImportMetaEnv {
    bar: string
  }
}

// Important: Ensure this file is a module
export {}

It's recommended to add a client.d.ts module to your plugin's root directory and advise users to include my-plugin/client in the types array of their tsconfig (along with htmelt/client).

{
  "compilerOptions": {
    "types": ["htmelt/client", "my-plugin/client"]
  }
}