Build Pipeline

Strata is a JIT CSS framework — you write class names in your HTML/JSX, Strata scans those files, looks each class up in its registry, and emits only the CSS that's actually used. No purging step needed.

Nothing on this page is something you run yourself

This is what happens automatically, every time, inside every build — whether it's triggered by the CLI (--build / --watch), the PostCSS plugin running as part of Vite/Webpack's own pipeline, or the one-off build strata-css init runs for you during setup. There's no separate step here to remember; it's the same pipeline no matter which of those triggered it.

What happens on build

strata.build() calls scanFiles(globs) — finds all class names in your content files.
Passes them to generate(classNames) — looks up each in the registry Map.
Routes each rule to its breakpoint sub-layer (st-utilities-md, st-components-lg, etc.).
String-replaces @strata base/components/utilities in the input CSS.
Writes the output CSS to disk.

Warm builds

If nothing changed, Strata returns the cached CSS string — zero allocation.

CSS Layers

Layer declaration order controls cascade priority — source order in your HTML never matters:

st-base
st-components  ->  st-components-xs  <  sm  <  md  <  lg  <  xl  <  xxl
st-utilities   ->  st-utilities-xs   <  sm  <  md  <  lg  <  xl  <  xxl
st-skeleton

Higher breakpoint layers always beat lower ones, and utilities always win over components at the same breakpoint.