2026-10-19 · 6 min read · Rahul Chitturi
- css
- formatting
- debugging
Flashman's CSS tool does not parse a stylesheet. Beautify minifies first, then inserts newlines around braces and after semicolons. Minify deletes every closed comment, collapses whitespace, and removes spaces that sit next to a brace, colon, semicolon, or comma.
That is enough for a rule like .btn { color: white; padding: 8px 12px; }. It is not enough for a string, a data URI, or a license comment. The output can still look indented in a glance and be invalid CSS.
Comments disappear, including a license banner
A closed comment is removed before any other step, and the /*! form is not special. /*! license */ a{color:red} beautifies to a rule whose body is color:red. The banner is gone. An unclosed comment is different: a{color:red} /* unterminated keeps the comment text, because the deletion only matches a comment that reaches */.
Two rules separated by a newline are glued together. a{color:red} and b{color:blue} on the next line minify to a{color:red}b{color:blue}. That is still valid CSS, and the blank line you were using as a separator is not coming back.
- Copy a license comment out before beautifying.
- Expect /*! comments to be deleted too.
- Leave an unclosed comment unfinished on purpose only in a fixture.
- Diff the file if a blank line between rules mattered.
A semicolon inside a string becomes a line break
Spaces around a semicolon are removed even when the semicolon is inside quotes. a{content:"hello; world"} minifies to a{content:"hello;world"}. Beautify then breaks at that semicolon, so the declaration is split into content:"hello; and world" on the next line. The result is not a string the browser can use as the content property.
A data URI breaks the same way. background:url(data:image/svg+xml;base64,abc) is cut after xml. The colon inside data: stays, because there was no space to remove around it, and the space in a value such as 8px 12px also stays. The transform only understands the five punctuation marks, not CSS grammar.
Pretty output is not indented
Beautify of the button sample puts .btn { on one line, then color:white, background:black, and padding:8px 12px with no indent and no space after the colon. A closing brace is on its own line, and the result ends with a newline. If a review tool expected two-space indents, the whole file will show as changed.
Use the CSS tool on rules that are only selectors and plain declarations. Use diff before you replace a stylesheet, and the regex tester to find content:, url(data:, and /* in the source. When any of those are present, format by hand or with a parser. The color tool still wants a six-digit hex when the question is contrast, not a rewritten stylesheet.