CSS Minifier & Beautifier

Minify CSS for production or beautify it for readability.

CSS Minifier & Beautifier is a two-mode stylesheet transformer that runs entirely in your browser. Minify mode strips /* */ comments, collapses newlines and edge spaces, tightens spacing around { } : ; ,, and drops trailing semicolons before } — producing a compact file ready for production. Beautify mode does the reverse: it re-walks the character stream and re-emits braces, colons, and semicolons with clean 2-space indentation.

Three size cards (Original, Result, Saved) show byte counts via Blob sizes and the percentage saved, so you can see the impact before downloading minified.css or beautified.css. Both modes share the same input pane — switch Mode and click the action button again to re-transform. Everything is local; no CSS ever leaves the tab.

How it works

minifyCss in lib/cssMinifier.ts runs a regex pipeline: strip comments, remove newlines and edge whitespace, collapse interior spaces, tighten punctuation around { } : ; ,, and remove the final ; in ;} pairs. beautifyCss strips comments and normalizes whitespace first, then walks characters emitting { and } and ; line breaks with a fixed 2-space indent, finally cleaning blank lines.

compareSizes measures both strings with new Blob([s]).size, computes round((original - result) / original * 100) for the Saved percent, and formats byte counts. State (input, output, mode) lives in cssMinifierSlice; the transform runs on the mode-named button click ("Minify" or "Beautify") with empty-input guard toast "Please enter CSS to process". No network is involved.

How to use

Step "Input" — paste CSS into "CSS Input" (placeholder "Paste your CSS here...").
Choose Mode: Minify or Beautify in the "Mode" select.
Click the mode-named action button ("Minify" or "Beautify") — toast confirms ("CSS minified!" / "CSS beautified!").
Read "Minified Output" / "Beautified Output" and the Original / Result / Saved size cards (bytes + percent).
Copy or download from the output header — files are minified.css or beautified.css.
Empty input → error toast "Please enter CSS to process".
"Clear" resets state (toast "Cleared!").

Tips

Both modes strip /* */ comments first — beautify does not preserve them, so keep a backup if comments matter.
Saved percent is round((original-result)/original * 100) computed from Blob byte sizes, not character counts.
Switching modes reuses the same input — pick the new mode and click the action button again to re-transform.
Unlike css-formatter's Format mode (Prettier), this tool is pure regex/char-walk — spot-check complex selectors after minifying.