1# The design rules hold for the forge's own CSS and templates, and2# lib/check-css.ts fails on each kind of break: a colour, size, weight or3# family written outside the tokens, a rounded corner, capitals by CSS,4# letter-spacing, a token block in a template, and a middle dot anywhere.5. "$(dirname "$0")/../lib.sh"6check() { node "$T_HOME/lib/check-css.ts" "$@"; }7ok check8d=$T/lint9mkdir -p "$d"10cp "$T_HOME/site/assets/style.css" "$d/style.css"11ok check "$d/style.css"12plant() { # plant <name> <ext> <text> <expected message>13 f=$d/$1.$214 if [ "$2" = css ]; then { cat "$T_HOME/site/assets/style.css"; printf '%s\n' "$3"; } >"$f"15 else printf '%s\n' "$3" >"$f"; fi16 fails_with "$4" check "$f"17}18plant caps css '.x { text-transform: uppercase; }' 'text-transform: uppercase'19plant tracking css '.x { letter-spacing: 0.08em; }' 'letter-spacing'20plant round css '.x { border-radius: 4px; }' 'corners are square'21plant hex css '.x { color: #fff; }' 'colour literal \(#fff\)'22plant rgba css '.x { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }' 'colour literal'23plant named css '.x { border: 1px solid white; }' 'colour literal \(white\)'24plant size css '.x { font-size: 11px; }' 'use a --text-\* token'25plant weight css '.x { font-weight: 600; }' 'use a --fw-\* token'26plant family css '.x { font-family: Georgia, serif; }' 'use --sans, --mono or --serif'27plant short css '.x { font: 600 11px/1.4 var(--mono); }' 'name the weight, size and family'28plant block njk '{% css %}29.x { color: var(--fg); letter-spacing: 1px; }30{% endcss %}31<p class="x">x</p>' 'block.njk:2: letter-spacing'32plant inline njk '<p style="color: #c00">x</p>' 'colour literal'33plant tokens njk '{% css %}34/* == tokens == */35:root { --x: #fff; }36/* == end tokens == */37{% endcss %}' 'a token block belongs in style.css'38plant dot txt "$(printf 'a \302\267 b')" 'a middle dot'39# What may stand: tokens, a line height in the shorthand, var() in a40# template's style attribute.41printf '%s\n' '{% css %}42.x { font: var(--fw-strong) var(--text-sm)/1.4 var(--sans); color: var(--muted); border-radius: var(--radius); }43{% endcss %}44<p class="x" style="--depth: 2; width: var(--space-4)">x</p>' >"$d/fine.njk"45ok check "$d/fine.njk"