Introducing Canon

Abbreviated utilities are easy to write, but they are also easy to get wrong - especially for AI models. LLMs love to mix in Tailwind syntax, writing gap-4 when they mean g-4. Suggestions like llms.txt help, but suggestions are not enforcement. Canon scans your source files & reports every class that is not part of the Yumma CSS canon.

If it's not canon, it doesn't ship.

How It Works

Canon checks validity against the Yumma CSS generator itself, so a class is canon exactly when it produces CSS. Variants (@sm:, h:), opacity (/50), negative values (m--4), custom theme colors, prefixes, & safelist entries are all understood - there is no separate rule list to maintain or drift out of sync.

npx @yummacss/canon

Scanned 42 files and found 128 unique classes.
Found 2 classes Yumma CSS does not recognize:
 "gap-4"
  - src/components/hero.tsx
 "items-center"
  - src/components/hero.tsx

CI & AI Feedback Loops

Canon exits with code 1 when unknown classes are found. Wire it into CI to catch typos before they ship, or let your AI agent run it after generating code & fix its own hallucinations.

We ran Canon on our own docs & playground while building it. It caught real bugs - flex-shrink-0 (Tailwind, not Yumma) in a published registry component & ff-c, a class removed back in 3.10, still living in the playground's default example.

Custom Classes

Classes you define in your own CSS are not known to Yumma CSS. Skip them with --allow:

npx @yummacss/canon --allow "docs-container,brand-logo"

Programmatic API

Use the validate function for custom tooling & scripts. Our docs use it to enforce extra registry-specific rules on top of class validation.

import { validate } from "@yummacss/canon";

const result = await validate({ allowlist: ["docs-container"] });

for (const { className, files } of result.invalid) {
  console.log(className, files);
}

Get Started

Canon ships with Yumma CSS 3.27 & runs in any project with a yumma.config.mjs.

npm install -D @yummacss/canon