# A class the extractor never saw

The frame puts small rotated squares at the corners of each band. They all
rendered at roughly `x = 0`, stacked on the left edge instead of sitting at the
four corners.

Nothing was wrong with the geometry. The component built its classes like this:

```ts
const corners = ["t", "t", "b", "b"];
const x = index < 2 ? "i-s" : "i-e";
const cls = `${x}:[var(--site-node-offset)]`;
```

## Why it produced no CSS at all

TeaCSS is a scanner, not a runtime. It reads your source **as text**, finds
whole class tokens, and generates a rule for each one it recognises. It never
executes the file.

So `` `${x}:[var(--site-node-offset)]` `` is not a class token as far as the
scanner is concerned. There is no `i-s:[...]` in the source text — only a
fragment starting at `:`. No rule is generated. The class still lands in the
HTML at runtime, matches nothing, and `inset-inline-start` falls back to `auto`.

The failure mode is the dangerous one: **no error**. A token that matches no
rule emits no CSS and no warning. The markup looks right, the class attribute
looks right, and the element is simply unstyled.

## The fix

Write the tokens out whole and pick between them:

```ts
const corners = [
  "i-t:[-3.5px] i-s:[var(--site-node-offset)]",
  "i-t:[-3.5px] i-e:[var(--site-node-offset)]",
  "i-b:[-3.5px] i-s:[var(--site-node-offset)]",
  "i-b:[-3.5px] i-e:[var(--site-node-offset)]",
];
```

Verbose, and correct. A test now asserts the literal strings are present and
that no `i-*:${` appears in the file, because the next person to tidy this into
a loop will reintroduce exactly the same bug.

## The general rule

Any class token that cannot appear literally in your source — because it is
composed at runtime, or comes from a CMS — has to be declared with
`@safelist` instead. Interpolation and utility scanners do not mix.