React css自动原子化

开篇

闲来无事，开发一个css自动原子化工具玩玩。

本文仅为实现思路，如有改进地方希望各位积极评论交流。

背景

现有的css原子化方案对于开发者不算友好。

1. 开发者很难记得所有原子化样式。
2. 对于不常用的样式需要进行配置。

效果

打包效果对比

原子化前->原子化后 (gzip压缩之前，由于css原子化之后gzip压缩比率降低，导致效果没有压缩前明显)

以下为原子化完成后webpack打包出的代码片段

打包后部分js片段

打包后部分css片段

实现原理

1. 处理js，使用babel将js转化为ast，对ast不同结构进行处理，将其转化为js树。
2. 处理css，使用postcss将css转为ast，将其转化为css block。
3. 合并，css规则匹配js上的class，进行替换。

处理JS

1. 使用babel将js代码转为ast。

babel.parse(code);

2. 对不同类型结构进行不同处理。