3 种操作 · 3 种不同承诺
先决定允许机器改动到哪一步。
格式化、诊断和压缩都要求源码能够被正确解析，但它们会进入不同处理流程。先选清楚要的是可读排版、错误线索，还是更少字节，再判断输出是否符合预期。
01
格式化
PostCSS AST → 可读 CSS统一缩进、空格和换行
02
诊断
Parser → 解析证据定位语法问题，并说明检查边界
03
压缩
保守清理 / CSSO减少注释、空白或进一步优化结构
现代 CSS 压力样本
今天的 CSS，不止是二十年前的属性声明。
这些片段会同时考验层叠层、原生嵌套、自定义属性、特性查询、数学表达式和感知颜色。真正有用的格式化器必须先正确理解它们。
@layer
@layer components { … }保留作者定义的层叠层顺序
原生嵌套
.card { &:hover { … } }父选择器仍与嵌套规则相连
设计 Token
:root { --space: 1rem; }完整保留自定义属性名
@supports
@supports (color: oklch(0 0 0))条件规则保持正确嵌套
数学表达式
width: calc(100% - var(--space))让运算间距清晰可读
现代颜色
color: oklch(72% .18 145)保留现代颜色函数 token
字节预算流水线
更小是一条处理路径，不是“更漂亮”的同义词。
格式化可能让文件变大。默认保守压缩只清理普通注释和多余空白，不重组规则；Maximum preset 会交给 CSSO，并启用 declaration 与 rule 的结构优化。
原始源码
基准
保留原始空白、注释和换行
格式化
可能增大
为阅读重新排版，字节增加很正常
保守压缩
通常更小
收紧空白并删除普通注释，不调整规则结构
Maximum preset
需主动选择
CSSO 清理、短写并合并或重组结构
Parser 定位线索
先修复最早断裂的语法边界。
一个没有闭合的代码块，会改变解析器理解后续每个 token 的方式。最早出现的行列位置，比笼统的“CSS 无效”更有价值。
ParseError · 第 1 行打开的代码块未闭合
.card {
color: var(--ink);
&:hover {
color: oklch(70% .2 145);
/* 缺少两个结束花括号 */先闭合嵌套规则，再闭合父规则。重新运行诊断后，再处理后续 declaration。
层叠边界法庭
解析成功，仍然不能证明这些事情
01
Specificity 是否符合意图
合法选择器仍可能覆盖不该覆盖的规则。
02
选择器是否未使用
格式化器看不到应用实际渲染出的 DOM。
03
目标浏览器是否支持
parser 能识别现代语法，不代表目标浏览器能够执行。
04
视觉结果是否等价
只有真实渲染与视觉回归测试，才能判断最终像素。