INSTALLATION · COMPLETE ADAPTER

Using Vite

Install Coordiation CSS as a Vite plugin, import its generated virtual stylesheet, and get dependency-aware updates while you develop.

✓

The adapter scans from the resolved Vite root, watches templates, the CSS entry, and every local CSS import, then refreshes the generated stylesheet when files change, appear, or disappear. A process-local incremental cache reuses unchanged work; no Coordiation runtime is added to the browser.

Install the packages

Add the compiler, official Vite adapter, and Vite as development dependencies.

Terminal

npm install -D @coordiation/css @coordiation/vite vite

Configure Vite

vite.config.js

import { defineConfig } from "vite";
import coordiation from "@coordiation/vite";

export default defineConfig({
  plugins: [
    coordiation({
      content: ["src"],
      cssFile: "src/coordiation.css",
      toolchain: {
        minify: process.env.NODE_ENV === "production"
      },
      sourceMap: true
    })
  ]
});

Create the CSS input

Keep the framework marker in a watched entry. Local imports are bundled before compilation and become HMR dependencies automatically.

src/coordiation.css

@import "./theme.css";
@coordiation;

src/theme.css

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
  --co-color-brand-600: oklch(54.6% 0.245 262.881);
}

Import the generated CSS

Import the virtual stylesheet exactly once from your application entry point.

src/main.js

import "virtual:coordiation.css";
import { createApp } from "./app";

createApp().mount("#app");

Start using utilities

Compose literal utility classes directly in your template. The co- prefix keeps framework classes easy to identify and scan.

src/App.coord

<section class="co-grid co-min-h-screen co-place-items-center co-bg-white co-p-8">
  <div class="co-max-w-xl co-text-center">
    <h1 class="co-text-5xl co-font-bold co-tracking-tight">
      Build with Coordiation.
    </h1>
    <p class="co-mt-4 co-text-lg co-text-neutral-600">
      Utility-first CSS with zero browser runtime.
    </p>
  </div>
</section>

Develop with reliable hot updates

Changing a template or imported CSS file invalidates the virtual CSS module and returns it to Vite as an HMR dependency. Creating or deleting a source file triggers a structural rescan and stylesheet refresh. Changes outside the configured dependency boundary are ignored.

Why cssFile is recommended

An inline css option still works for generated configuration, but a cssFile gives imports a stable resolution base and can be watched directly.

Give AI the support contract

Point coding agents to the concise guide and capability manifest so they only generate utilities that really ship.

Agent instructions

Read /llms.txt first.
Check /api/capabilities before generating Coordiation classes.
Never treat a planned capability as implemented.

Open llms.txt ↗Open capability JSON ↗

CONFIGURATION

Keep dependencies explicit

Every path is resolved from Vite's final project root unless cwd is supplied deliberately.

01
content: source files or directories to scan and watch; defaults to ["src"].
02
cssFile: recommended watched CSS entry and import-resolution base.
03
css: inline alternative for generated configurations.
04
cache: process-local source and compilation reuse; defaults to true.
05
sourceMap: return a native Vite map; accepts true or an embedded-content policy.
06
toolchain: controls imports, nesting, prefixing, minification, and browser targets.
07
include / exclude / safelist: literal scan-boundary controls.
08
extractors: framework-specific candidate extraction hooks.

TROUBLESHOOTING

When a class does not appear

The adapter reports scanner diagnostics through Vite and keeps unsupported candidates observable.

Confirm the file lives inside a configured content root and is not excluded.
Keep complete utility strings in source; dynamic string concatenation cannot be discovered.
Import virtual:coordiation.css exactly once from the client entry.
Use cssFile when theme changes should participate in HMR.
On WSL or mounted filesystems, verify that Vite itself receives filesystem events.

Previous← Using npm NextUsing PostCSS →