About

Malformed CSS causes silent rendering failures across browsers. A missing brace shifts every subsequent rule. A misplaced semicolon inside a calc() expression breaks the entire declaration block. This tool parses your stylesheet character by character, reconstructs the rule tree, and re-emits it with consistent indentation, brace placement, and whitespace. It handles nested @media and @supports blocks, preserves or strips comments, and flags unclosed braces before they reach production. Minification mode strips all non-essential bytes, reducing payload size by 20 - 40% on typical stylesheets.

The formatter approximates standard Prettier/stylelint output conventions. It does not reorder properties or perform semantic analysis. Shorthand collapsing and vendor-prefix deduplication are outside scope. For critical stylesheets, always validate against a browser rendering test after formatting.

Formulas

CSS formatting is a structural transformation, not a mathematical operation. The core logic follows a finite-state tokenizer model:

State ∈ { DEFAULT, COMMENT, STRING, AT_RULE, SELECTOR, PROPERTY, VALUE }

For each character c at position i, the tokenizer transitions between states based on a deterministic rule set:

if c = / ∧ c_i+1 = * → COMMENT

if c = { → depth + 1, emit newline + indent

if c = } → depth − 1, emit newline + dedent

Minification output size S_min relative to original S_orig:

S_min ≈ S_orig − W − C

where W = total whitespace bytes and C = total comment bytes (when stripping is enabled).

Reference Data

Feature	Beautify Mode	Minify Mode
Indentation	Configurable (2/4 spaces or tab)	None
Newlines after {	Yes	No
Newlines after ;	Yes	No
Trailing semicolons	Preserved/Added	Removed (last in block)
Comments	Preserved (configurable)	Stripped (configurable)
Empty lines between rules	Yes (1 blank line)	No
Selector-per-line	Each selector on own line	All on one line
Whitespace around :	Space after colon	No space
Whitespace around {	Space before brace	No space
Nested @-rules	Indented per depth level	Flattened
Typical size reduction	-	20 - 40%
Parse error detection	Yes (warnings shown)	Yes (warnings shown)
String literal safety	Preserved verbatim	Preserved verbatim
Unicode escape handling	Preserved	Preserved
Max tested input	500KB	500KB

Frequently Asked Questions

No. The tool only modifies whitespace, newlines, and optionally comments. It does not reorder rules, collapse shorthands, or change property values. The rendered output in a browser will be identical before and after formatting. The sole exception is minification removing the last trailing semicolon in a declaration block, which is syntactically valid per the CSS specification.

The tokenizer tracks string context using a state flag. When it encounters a quote character (' or ") or enters a url() function, all content is passed through verbatim until the matching close character. Braces, semicolons, and colons inside strings are never interpreted as structural tokens.

This tool processes standard CSS syntax. Modern CSS nesting (the CSS Nesting Module supported in Chrome 120+ and Firefox 117+) is handled correctly because it follows standard brace-matching rules. However, Sass-specific syntax like $variables, @mixin, or & parent selectors beyond the CSS spec may produce unexpected output since the parser treats them as unknown at-rules or selectors.

The parser tracks brace depth. If the input ends with depth > 0, a warning is displayed indicating the number of unclosed blocks. The formatter will still produce output, auto-closing remaining blocks at the end. This helps you identify the error location by examining where indentation appears incorrect in the formatted result.

If your source CSS is already compact (minimal comments, few blank lines, short selectors), the reduction will be small. The primary savings come from stripping comments (which can be substantial in documented frameworks), removing whitespace between rules, and eliminating trailing semicolons. For heavily commented files like normalize.css, reductions of 30-40% are typical. For already-minified input, expect near 0% reduction.

Yes. The parser recognizes all CSS at-rules (@media, @supports, @keyframes, @font-face, @layer, @container, @property, etc.) and correctly nests their content. In beautify mode, each nesting level receives an additional indentation level. @keyframes percentage stops and from/to keywords are treated as selectors within the keyframes block.