TOOLING · COMPLETE
Class formatter
Keep class lists deterministic with the exact comparator used by the compiler. Application classes stay stable, Coordiation utilities follow canonical CSS order, and runtime expressions remain untouched.
@coordiation/formatter does not maintain a second ordering table. Every framework comparison delegates to compareCandidates() from @coordiation/css.
Check formatting in automation
npm install -D @coordiation/formatter
coordiation-format src/App.tsx --checkCheck mode exits with code 1 when a literal class list needs changes. It never rewrites a file.
Apply canonical order
<article class="co-p-4 card hover:co-bg-black co-flex co-m-2"><article class="card co-flex co-m-2 co-p-4 hover:co-bg-black">Use --write to replace files, stdin/stdout for editor pipelines, or --json for a machine-readable changed-file report.
Use exact edit data programmatically
import { formatSourceDetailed } from "@coordiation/formatter";
const result = formatSourceDetailed(source, { prefix: "co-" });
console.log(result.changed, result.edits, result.code);The package also exports sortClassList(), formatSource(), checkSource(), and formatterManifest.
SAFE BOUNDARIES
Literal classes only
The formatter changes source only where ordering is provably safe.
- Supports class, className, class:list, :class, and v-bind:class literal values.
- Preserves unknown application classes in their original relative order.
- Preserves template interpolation and string concatenation.
- Uses the configured prefix for recognition.
- Does not deduplicate or invent candidates.
AI CONTRACT
Never recreate the order
Agents should call the formatter instead of sorting from memory.
- Use check mode before proposing a formatting-only change.
- Read exact edits when explaining what changed.
- Leave dynamic expressions unchanged.
- Do not treat an unknown application class as unsupported Coordiation syntax.