Biome Plugin

The @styled-cva/biome-plugin package ships Biome GritQL rules that flag tw.tag\…`/tw(Component)`…“ tagged templates with abnormal whitespace or excessive single-line length. It is a lint plugin, not a fixer.

Part of the styled-cva monorepo. Published to npm as @styled-cva/biome-plugin.

Diagnostics, not auto-fix

As of Biome 2.x, GritQL plugins can only register diagnostics — they cannot rewrite code. To auto-fix the issues this plugin reports, run @styled-cva/prettier-plugin on the same files. The two plugins are designed to compose:

• @styled-cva/biome-plugin — surfaces issues in biome check / biome lint
• @styled-cva/prettier-plugin — rewrites the offending templates on save

A migration to a code-modifying Biome plugin will become possible once Biome’s JS plugin API ships.

Rules

normalize-tw-classes

Flags inline tw.tag\…`/tw(Component)`…“ tagged templates whose class string contains:

• a run of 2+ horizontal whitespace characters,
• leading horizontal whitespace,
• or trailing horizontal whitespace.

Multi-line templates (whose chunk contains a \n) are exempt so that prettier-formatted multi-line tw.div\\n flex\n“ does not trigger the rule.

multiline-long-tw

Flags inline tw.tag\…`/tw(Component)`…“ tagged templates whose quasi text exceeds 80 characters on a single line. Multi-line templates are exempt.

Installation

bun add -D @styled-cva/biome-plugin @biomejs/biome

Peer dependency: @biomejs/biome >= 2.0.

Configuration

In biome.json reference the .grit files by path:

{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "plugins": [
    "./node_modules/@styled-cva/biome-plugin/rules/normalize-tw-classes.grit",
    "./node_modules/@styled-cva/biome-plugin/rules/multiline-long-tw.grit"
  ]
}

Biome plugins are referenced by relative path; there is no package-name shorthand in Biome 2.x.

Caveats

• Diagnostics only. Pair with @styled-cva/prettier-plugin for rewrites.
• tw import name is hard-coded. Renamed imports (import sc as tw from …) are not recognized.
• .cva({ base, variants }) strings are not analyzed. Object-literal traversal with conditional regex predicates is not expressible in the current Biome GritQL dialect. Use @styled-cva/prettier-plugin to normalize those.
• 80-char threshold is fixed. GritQL has no numeric comparison or plugin options; the rule uses r".{81,}". To change the threshold, fork the .grit file.
• Regex matches the quasi chunk text. Edge cases (classes that contain escaped backticks, e.g.) are not exercised by the plugin’s tests.