CSS Minifier

Your stylesheet is 84 KB unminified and you'd like it to be 60. Comments, whitespace, and the trailing semicolons that some linters insist on add up surprisingly fast. Drop the CSS in, get a minified version out — usually 25–35% smaller depending on how comment-heavy the original is.

The minifier preserves what matters (selectors, declarations, valid syntax) and strips what doesn't (block comments, redundant spaces, the last semicolon in a rule). Doesn't touch the structure — it's a textual reduction, not a compiler that rewrites your selectors.

For production builds, your bundler does this automatically. This tool is for one-off cases: an inline `<style>` block, an email template, a quick check before pasting into a CMS field with a character limit.

The minifier walks your stylesheet token by token, preserving anything semantically meaningful and stripping anything cosmetic. Block comments (/* ... */) get removed entirely. Whitespace gets collapsed: any run of spaces, tabs, or newlines becomes either nothing (when adjacent to syntax characters like `{`, `}`, `;`, `:`) or a single space (between identifiers where spacing matters for parsing). The trailing semicolon before `}` gets dropped because it's syntactically optional. Hex colors like `#ffffff` get shortened to `#fff` when they're representable in 3-character form. Multiple consecutive identical declarations are deduplicated within the same rule.

A worked example: the input `.card { background-color: #ffffff; padding: 16px 16px 16px 16px; /* equal padding */ color: rgba(0, 0, 0, 1); }` becomes `.card{background-color:#fff;padding:16px;color:#000}`. Three optimizations stacked: hex shortening, padding shorthand collapse (when all four values are identical, only one is needed), and rgba(0,0,0,1) collapsing to #000 because the alpha is fully opaque. A character count drop from roughly 95 down to 47.

The honest limitation: the minifier does not optimize selector specificity, dead-code-eliminate unused classes, or merge duplicate rules across the file. Tools like cssnano or PurgeCSS handle those higher-level optimizations and can compress further than this minifier alone. For a hand-written CSS file the simple textual reduction here gets you 25–35%; combined with PurgeCSS removing unused classes the total reduction can hit 80%+ in heavily Tailwind-style codebases.

A subtle gotcha: minified CSS that 'works in dev' can sometimes break in production due to selector specificity changes that look identical but parse differently. If you minify a stylesheet with malformed syntax (a missing semicolon mid-rule, a typo in a property), browsers are forgiving in their parsing while the minifier may take the input literally. The fix isn't to abandon minification; it's to validate the source CSS first. The minifier shows the source-error position when it can't parse cleanly.