Reference · Markup

classes

classes() -> list

What it does

The classes the program's markup writes, sorted, each once: the .class shorthand (<div.card.p-4>), class="..." attributes, the text in class={...} (both sides of a ? :, for instance) and class:name={...}, in every file of the program. It is for a CSS engine the program runs itself, such as one written in Rust in a .rs file, which needs the classes to make rules for: build "/app.css" = engine(classes()). quillo classes app.qwe prints the same list, one class a line, for a tool beside the program (Tailwind's @source inline(...) or a safelist file).

Examples

component Card(on: bool) {    <div.card.p-4 class={on ? "ring-2 shadow" : "opacity-50"} class:active={on}>        <span class="text-sm md:text-lg">hi</span>    </div>}print(classes())

["active", "card", "md:text-lg", "opacity-50", "p-4", "ring-2", "shadow", "text-sm"]

use "tailwind.rs"build "/app.css" = tailwind(css`@import "tailwindcss";`, classes())

Edge cases

• Only whole words written out count. In a template, `chip bg-${color}`, the word chip is in the list and the class made from parts is not: name such classes in full somewhere, as Tailwind asks.
• A program whose markup writes no class gives [].

let color = "red"component Chip() { <span class={`chip bg-${color}`}>x</span> }print(classes(), contains(classes(), "bg-red"))

["chip"] false

Errors

None. It takes no arguments, and quillo check refuses one: `classes` takes 0 arguments, got 1.

Chaining

component A() { <p.lead.text-lg>a</p> }print(classes() | filter((c) => starts_with(c, "text-")))

["text-lg"]

See also

style_with, markdown, raw

Edit this page on GitHub · every example's output was made by running it (tools/refcheck.mjs) · questions on Discord or r/quillo