CSS Formatter / Minifier

Instantly pretty-print messy CSS or minify it for production.

The CSS Formatter / Minifier does both ends of the CSS hygiene workflow in one card. Action: Format pretty-prints with real Prettier using the PostCSS parser — standards-compliant indentation you can trust for checked-in stylesheets. Action: Minify runs a lightweight regex pipeline that strips /* */ comments, squeezes whitespace around {}|;:,, collapses leftover spaces, and trims edges — quick output for a quick size check.

Paste into "Raw CSS" (or click "Upload CSS" with the .css,text/css accept filter) and output updates live; async Prettier feeds the "Formatted Output" pane while the sync minify fills "Minified Output". Copy and download icons confirm with "Copied to clipboard" / "CSS downloaded!" toasts and save formatted.css or minified.css. Prettier errors surface as the first line of its message (or "Failed to process CSS."). The whole pipeline runs in-browser — Prettier standalone, no network.

How it works

Format mode calls prettier.format(input, { parser: "css", plugins: [prettierPluginPostcss] }) using prettier/standalone and prettier/plugins/postcss — the same engine as the CLI, just bundled into the page. Minify mode is a synchronous regex pipeline in the same effect: remove /* */ comments, normalize whitespace around {}|;:,, collapse spaces, and trim. A useEffect reprocesses whenever input or mode changes.

File upload goes through FileReader; the hidden input accepts only .css,text/css. When Prettier throws on invalid CSS, the red box shows err.message.split("\n")[0] — the first line — or "Failed to process CSS." as a fallback. Switching Action re-runs the same input immediately because mode is an effect dependency. No request ever leaves the browser.

How to use

Select "Action:" — Format (pretty-print) or Minify.
Paste CSS into "Raw CSS" (placeholder "Paste your messy CSS here...") or click "Upload CSS" to load a .css file.
Wait for the output to update live — async Prettier for format, sync regex for minify.
If Prettier throws, the red error box shows the first line of the message.
Review "Formatted Output" or "Minified Output" (the label switches with the mode).
Download (toast "CSS downloaded!"; files formatted.css / minified.css) or copy (toast "Copied to clipboard").
Click "Clear" to reset both panes at once.

Tips

Format uses real Prettier with the PostCSS parser — indentation matches what CI formatters produce, not a hand-rolled pretty-printer.
Minify is a lightweight regex pass (comments + whitespace only) — verify complex CSS (content strings with braces, data URIs) before shipping it.
Upload only accepts .css,text/css — other file types are ignored by the picker.
Switching Action reprocesses the same input immediately (mode is an effect dependency), so you can A/B format vs minify without retyping.