About CSSTidy

What this is

A CSS beautifier and minifier that runs entirely in your browser. Your stylesheet is never uploaded: the transformation is a handful of string replacements in a <script> tag on the page, and there is no network request carrying your CSS.

The tradeoff for that privacy is that the tool is textual, not a parser. It does not build a syntax tree, does not know what a selector is, and has no concept of a string literal. It rewrites characters around four structural symbols and stops there.

That single fact explains every limitation on this page, so it is worth stating precisely before you trust the tool with anything load-bearing.

What tidy does, exactly

The beautifier applies five replacements, in this order:

1. Collapse whitespace around {, }, ;, :.
2. Every ; becomes a newline plus two spaces.
3. Every { becomes { plus a newline plus two spaces.
4. Every } becomes a newline, }, and a blank line.
5. Two spaces before a } collapse to nothing, closing the block.

Indentation therefore comes from brace depth only. Nested rules inside @media sit at the same indent as their parent's siblings, because nothing is tracking how deep you are.

What minify does, exactly

Four steps: strip every /* … */ comment, collapse whitespace around { } ; : ,, drop the semicolon before a closing }, trim. No selectors are renamed, no colours shortened, no rules merged, no duplicates removed. Treat the size drop as whitespace and comments only.

Where it breaks, measured

These are outputs from this tool, not hypotheticals.

A } inside a quoted string. div::before { content: "}" } tidies to a block cut in half:

div::before {
  content:"
}

"
}

The minifier handles the same input correctly, so the failure is specific to tidy. Anything with a brace in a content: string — icons, generated counters, CSS-drawn punctuation — will mangle.

A comment inside a string. a { content: "x/*y*/z" } minifies to a{content:"xz"}. The comment stripper cannot tell a comment from string contents, so it deletes characters that were data. This is the same class of bug the tidy pass has, reached from the other side.

A colon inside a string. content: "12:30" survives, but only because step 1 removes the space that would have mattered. Do not read this as string awareness — it is coincidence.

Anything not listed above that relies on whitespace being meaningful (the old _zoom and *prop IE hacks) should be diffed after minifying, not assumed safe.

What it does not do

• No vendor prefixing.
• No autoprefixer, no can-i-use data, no browser queries.
• No CSS nesting transform, so nesting you write stays nesting you write.
• No sorting, grouping, deduplication, or dead-code removal.
• No @import inlining or URL rewriting.
• No source map, so a minified bundle is unreadable at 200 KB in one line.

When to use a real parser instead

If your stylesheet matters — a design system, a client build, anything shipping to production — use something that parses properly. None of them can corrupt a content: string, because they tokenize strings before they rewrite structure:

• Lightning CSS — Rust, minification plus prefixing, and the fast option in this group.
• cssnano — the PostCSS-pipeline minifier.
• Stylelint — enforce a format in CI so nothing needs tidying by hand.

Use this page for the quick job: a snippet from a tutorial, a stackoverflow block, one file you are reading rather than shipping.

Costs and limits

Free, no account, no upload, no size ceiling. The only real limit is your browser tab's memory, and the 15-second budget it gets before you decide it is stuck.