Yumma CSS 4.3

A Yumma CSS class names a value from a table, so it either exists or it does not. 4.3 checks that where you write code, & answers with the class you meant.

Lint Rules for Oxlint

@yummacss/lint is a plugin for Oxlint. Add it next to Oxlint & turn the rules on.

pnpm add -D oxlint @yummacss/lint

{
  "jsPlugins": ["@yummacss/lint"],
  "rules": {
    "yummacss/no-unknown-classes": "error",
    "yummacss/no-inline-styles": "warn"
  }
}

The rules read your yumma.config.mjs, so your own colors, states, prefix & safelist pass. The plugin is written in the ESLint plugin format, so ESLint runs it too.

Unknown Classes

no-unknown-classes reports a class Yumma CSS does not generate, & names the closest one that exists.

<div className="d:f ai:c bg:redd-5" />

card.tsx:1:16: error yummacss(no-unknown-classes): `bg:redd-5` is not a Yumma CSS class, so it generates no CSS. Did you mean `bg:red-5`?

It reads className, class, & the arguments of cn, cx, clsx, classNames & merge from yummacss/merge, including ternaries, arrays & the static parts of a template literal.

Inline Styles

no-inline-styles reports a property set in a style object when a class writes the same declaration.

<div style={{ display: "flex", justifyContent: "space-between" }} />

card.tsx:1:15: warning yummacss(no-inline-styles): `display: flex` is set inline. Use `d:f` instead.
card.tsx:1:32: warning yummacss(no-inline-styles): `justify-content: space-between` is set inline. Use `jc:sb` instead.

Custom properties pass, so a value that changes at runtime goes through one: w:var(--progress) & style={{ "--progress": "40%" }}.

A One-Off Check

yummacss lint scans the source files from your config & lists every class it does not recognize, with no linter to set up. It exits with 1 when it finds one, so it works as a CI step.

pnpm dlx yummacss lint

Upgrading

The yummacss-lint command & the validate() function are removed. Replace pnpm dlx @yummacss/lint with pnpm dlx yummacss lint, which takes the same --allow & --config flags.

Both rules, their options & the command are documented on @yummacss/lint. The full list is in the changelog.