Skip to content
Hozo

Astro

Astro builds with Vite, so Hozo’s Vite plugin is all an Astro project needs. This documentation site is itself Astro with @hozo/vite.

Terminal window
npm install --save-dev @hozo/vite @hozo/compiler
npm install @hozo/core @astrojs/react react react-dom
astro.config.mjs
import react from '@astrojs/react'
import { hozo } from '@hozo/vite'
import { defineConfig } from 'astro/config'


export default defineConfig({
  integrations: [react()],
  vite: {
    // First: Hozo has to see the source as written, before any other
    // plugin transforms it.
    plugins: [hozo({ css: 'src/styles/global.css' })],
  },
})

Three things to know

Section titled “Three things to know”
  • Primitives go in .tsx components and .mdx pages, not in .astro templates. Hozo compiles JSX. An .astro file can import and render a .tsx component built from primitives, and an .mdx page can use primitives inline.
  • A component built only from static primitives ships no JavaScript. Astro renders it at build time with no client: directive, and Hozo has already turned it into HTML and a stylesheet. A component with an event handler or a stateful pattern needs a client: directive like any other React island; without one, Astro renders it and drops the handler.
  • Beside @tailwindcss/vite, pass preflight: false. If your own stylesheet already imports Tailwind, it brings Tailwind’s preflight inside @layer base. Hozo’s own copy is unlayered and would override your utilities. Write hozo({ preflight: false }), and put hozo() before tailwindcss() in vite.plugins.