A class the extractor never saw

# 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.