Platform
← Foundations

FOUNDATIONS FEATURE

Per-route CSS bundles

The sx-* / ui-* grammar is a fixed vocabulary, so the compiler sees which slices a template uses and emits a per-route CSS bundle, often under 3KB gzipped.

Live demo
1 · Scan Read the template

TwigExtractor finds every sx-* / ui-* attribute the template references — a fixed, knowable vocabulary.

2 · Resolve Only used slices

SliceCatalog maps each (attribute, value) to a CSS slice. 9 domains, 43 slices — only the ones in use are selected.

3 · Emit < 3KB bundle

BundleCompiler writes a per-route bundle of just those slices — typically under 3KB gzipped. Verify with css:inspect.

9 domains / 43 slices Only-what-you-use Under 3KB gzipped

Per-route CSS bundles

Because layout and identity are expressed as a small, regular attribute grammar — not arbitrary class names — the CSS a page needs is statically knowable. The compiler reads the template, finds every sx-* / ui-* slice it references, and emits exactly those. Nothing more accumulates.

Scan → resolve → emit

  1. Scan — TwigExtractor reads a template and finds every grammar attribute it uses.
  2. Resolve — SliceCatalog maps each (attribute, value) to a CSS slice. The vocabulary is 9 domains / 43 slices, so the set is finite and the lookup is exact.
  3. Emit — BundleCompiler writes a per-route bundle of just those slices — typically under 3KB gzipped. A static build also ships a shared full.css (~2.6KB) and baseline.css (~1.1KB) for common cases.

Introspect any of it from the CLI: platform-ui:css:explain sx-gap:4 prints the emitted CSS and referenced tokens; platform-ui:css:inspect <template> reports which slices a template uses and the final bundle size.

Only-what-you-use here is a property of the grammar being finite, not of a tree-shaking heuristic that might guess wrong. Pages ship tiny, predictable stylesheets, there is no global CSS bloat accumulating across features, and you can prove what a route ships with one command.

© Jeff Sickel:"Deleted code is debugged code."

Explain a sliceCSS and tokens it emits
# what CSS does one grammar slice emit, and which tokens does it touch?$ bin/semitexa platform-ui:css:explain sx-gap:4  .sx-gap-4 { gap: 1rem; }            # → no token; spacing scale step 4

How it works

A `TwigExtractor` scans a template for grammar attributes; the `SliceCatalog` maps each (attribute, value) to a CSS slice; the `BundleCompiler` emits a per-route bundle of only the used slices. A static build produces a shared `full.css` (~2.6KB gzipped) and `baseline.css` (~1.1KB) for common cases. Introspect it from the CLI: `platform-ui:css:explain sx-gap:4` prints the emitted CSS + referenced tokens; `platform-ui:css:inspect <template>` reports which slices a template uses and the final bundle size.

Why it matters

Only-what-you-use CSS is a property of the grammar being finite, not of a tree-shaking heuristic that might guess wrong. Pages ship tiny, predictable stylesheets; there is no global CSS bloat accumulating across features, and you can prove what a route ships with one command. A small, regular vocabulary is also what makes the UI writable by a person — or a language model — without inventing class names.