Basics

This check has a base priority of normal and works with any version of Elixir.

Explanation

Enforces two layout rules for HEEx class attributes:

1. Interpolated attrs with multiple values must use list syntax. Comma-separated content inside class={} without surrounding brackets either fails to compile or is silently parsed as a tuple/keyword list. Wrap them in [...]. The most common shape this catches in practice is an unparenthesized if whose keyword-list commas leak to the top level of the attribute expression.

2. Long single-line class attrs must be broken across multiple lines. When the line containing a class={...} or class="..." exceeds :max_line_length characters as displayed by the editor (default 98, matching the Elixir formatter convention), the class attr should be converted to a multi-line list with one logical group per line. Long horizontal class lists are very hard to read and review.

The check inspects every ~H sigil and every .heex template referenced via embed_templates. Both rules can be violated by the same attribute; you'll get one issue per attribute. Line length is measured against the full source line (String.length/1 of the line text, i.e. the column position the editor shows).

Configure via :max_line_length (default 98).

Bad — comma-separated without brackets

<a class={if @cond, do: "x", else: "y"}>...</a>

Bad — single-line class attr exceeds the line limit

<a class={["px-2 text-white", "py-5 bg-blue-600", "rounded-md border border-transparent"]}>x</a>
<a class="px-2 text-white py-5 bg-blue-600 rounded-md border border-transparent hover:underline">x</a>

Good

<a class={if(@cond, do: "x", else: "y")}>...</a>

<a class={[
  "px-2 text-white",
  "py-5 bg-blue-600",
  "rounded-md border border-transparent",
  "hover:underline"
]}>x</a>

Check-Specific Parameters

There are no specific parameters for this check.

General Parameters

Like with all checks, general params can be applied.

Parameters can be configured via the .credo.exs config file.