bellagonia

Vite plugin that automatically injects scoped styles into Gonia directives.

Install

pnpm add -D bellagonia

Usage

// vite.config.ts
import { defineConfig } from "vite";
import { bellagonia } from "bellagonia";

export default defineConfig({
  plugins: [bellagonia()],
});

When a directive file has a sibling CSS file, bellagonia automatically adds a style import and passes it via assign:

// src/directives/counter.ts (before)
import { directive } from "gonia";
directive("counter", setup);

// src/directives/counter.ts (after transform)
import { directive } from "gonia";
import * as $styles from "./counter.module.css";
directive("counter", setup, { assign: { $styles } });

Options

bellagonia({
  // Glob patterns for directive source files
  // Default: ['src/directives/**/*.ts']
  directiveSources: ["src/directives/**/*.ts"],

  // Enable automatic style injection
  // Default: true
  autoStyles: true,
});

SSR API

For SSR frameworks that construct their own HTML, bellagonia exposes a programmatic API to retrieve collected style paths and generate markup.

import { getCollectedStyles, createStyleTags } from "bellagonia";

// Get all CSS paths discovered during transform
const styles = getCollectedStyles();
// ['/app/src/directives/counter.module.css', '/app/src/directives/widget.module.css']

// Generate a <style> block with @import rules (default)
createStyleTags(styles, { base: "/app" });
// <style>
// @import url("/src/directives/counter.module.css");
// @import url("/src/directives/widget.module.css");
// </style>

// Generate <link> tags instead
createStyleTags(styles, { base: "/app", mode: "link" });
// <link rel="stylesheet" href="/src/directives/counter.module.css">
// <link rel="stylesheet" href="/src/directives/widget.module.css">

createStyleTags(paths, options?)

Option	Type	Default	Description
mode	'import' | 'link'	'import'	Output format
base	string		Project root for relative path resolution
prefix	string	'/'	URL prefix prepended to paths

CSS Detection

Bellagonia looks for sibling CSS files next to each directive source file, checking these extensions in priority order:

1. .css.ts (vanilla-extract)
2. .css.js (vanilla-extract compiled)
3. .module.css
4. .module.scss
5. .css

The first match wins. For example, given src/directives/counter.ts, it checks for counter.css.ts, then counter.css.js, and so on.

License

BSD-2-Clause