PostCSS and Build Tools

Prerequisites: Sass and preprocessors

In production, CSS usually passes through a build step that bundles, transforms, and minifies it.

What a CSS build does

Bundling — combine @imported files into one (or a few) files, so the browser doesn't fetch them one after another.
Syntax lowering — rewrite modern syntax (nesting, new color functions, media query ranges) for older target browsers.
Vendor prefixes — add -webkit- and similar prefixes only where your target browsers still need them.
Minification — remove whitespace and comments, shorten values.
Cache busting — add a content hash to file names (app.3f9a1c.css) so browsers can cache files forever and still get updates.

Tools

Tool	What it is
PostCSS	A CSS parser with a plugin ecosystem: Autoprefixer, `postcss-preset-env`, cssnano, and Tailwind's PostCSS plugin
Lightning CSS	A very fast Rust-based parser, transformer, and minifier; Vite can use it for transforms and minification
Vite, webpack, esbuild	Bundlers that process CSS alongside JavaScript
Dart Sass	The Sass compiler

Browser targets

Transforms and prefixes depend on which browsers you support, usually declared once as a Browserslist query in package.json:

"browserslist": [
  "> 0.5%",
  "last 2 versions",
  "not dead"
]

Autoprefixer, postcss-preset-env, and Lightning CSS all read it. Many teams now target Baseline ("features supported by all major browsers for a while") instead of a percentage query.

Minified output

A minifier turns:

/* Card component */
.card {
  margin: 0px 0px 0px 0px;
  color: #ffffff;
  background-color: rgb(255 0 0);
}

into .card{color:#fff;background-color:red;margin:0} (Lightning CSS 1.33's actual output) — same meaning, far fewer bytes. Our CSS Minifier does this in the browser.

Development setup with Vite

npm create vite@latest my-site
cd my-site
npm install
npm run dev      # dev server with instant CSS updates
npm run build    # bundled, minified, hashed CSS in dist/

Vite supports PostCSS config files, Sass (after npm install -D sass-embedded or sass), and CSS Modules (*.module.css) out of the box, and can switch its CSS processing to Lightning CSS.

Source maps

Source maps connect minified CSS back to your original files, so DevTools shows card.css:14 instead of line 1 of a minified bundle. Enable them in development; decide deliberately whether to ship them.