Lessons Learned from Building a CSS Minifier
summary
Builds cssshrink.com, a JavaScript CSS minifier that uses the Gonzalez AST and npm modules, reuses the color library for brute‑force color shortening, and runs pixel‑diff tests with PhantomJS to assert visual parity. It removes comments/whitespace, strips units from zeros, removes unnecessary quotes, merges adjacent identical media queries/selectors, and drops duplicate declarations. A browser‑specific generation step cuts Bootstrap payload by about 48% for old IE, but the tool is not yet production‑benchmarked.
AI-written summary · about
chapters (27)
- 0:00Introduction
- 1:05Agenda
- 3:21Motivation
- 6:58CSS is hard
- 8:22Crockford on CSS
- 9:43Solution
- 10:53Partial parsing
- 11:54How about
- 13:22Next: write a parser
- 14:06Next: use a parser
- 17:54Space, comments
- 18:41Colors
- 20:14Zeros, numbers
- 20:49Quotes
- 23:02Pseudo
- 24:39font-weight
- 24:50Lowercase
- 25:46Duplicate declarations
- 26:51Duplicate selectors
- 27:01Adjacent selectors
- 27:21Adjacent blocks
- 28:00Random nonsense
- 30:18Shorthands
- 31:00Unit conversions
- 31:43Duplicate keyframes
- 32:22Rename
- 33:31Supporting tools
