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.

Minification

--minify runs a fixed cascade, never "whichever output is smaller": a minifier set in config is honoured exactly, otherwise Lightning CSS runs first, falling back to cssnano on a missing package, a parse failure, or a dropped declaration, and finally shipping unminified CSS if neither is installed. Each fallback is announced with the reason.

Why not just pick the smaller output?

Strata always enables errorRecovery, so a legacy CSS hack can never kill your build — but a recovered parse error is treated as a failure, since the smaller output is smaller precisely because something you wrote got deleted. See Configuration for the minifier/targets options. This cascade only applies to the CLI — under Vite, Next, or webpack the PostCSS plugin path is used and the bundler minifies instead.

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.