微信小程序原子样式工具已经开放源码，发布在 github 上。本文开展实例教学。
准备工作，安装 deno，windows 环境在 Terminal 中运行
iwr https://deno.land/install.ps1 -useb | iex安装完毕后，运行 deno --version 检查版本在 1.26 以上。
1 结果页面
以卡片的形式显示操作说明，包含一个标题和四个步骤。
2 初始状态
1 初始数据 index.js
const app = getApp()
Page({
data: {
title: "wxmp-atomic-css 使用示例",
lines: [
"运行 iwr https://deno.land/install.ps1 -useb | iex 安装 deno",
"运行 deno run --allow-read --allow-write https://deno.land/x/wxmp_atomic_css@v0.0.3/worker.ts . 自动生成样式到 mini.wxss",
"修改 app.wxss，导入 mini.wxss",
"修改页面文件，增减样式，等待立即生效"
]
},
onLoad() {
},
})
2 启动脚本
❯ deno run --allow-read --allow-write https://deno.land/x/wxmp_atomic_css@v0.0.3/worker.ts .
2022-9-20 9:6:59.720 working directory found for app.wxss at .
2022-9-20 9:6:59.724 [check] read wechat mini program pages from config file, found [1] pages
2022-9-20 9:6:59.725 [check] missing global css file [font.wxss] and ignore
2022-9-20 9:6:59.726 [check] read global styles names, found [0] in [app.wxss]
2022-9-20 9:6:59.726 [check] found total [0] global class styles
2022-9-20 9:6:59.727 [check] 1/1) process page [index/index]
2022-9-20 9:6:59.747 [check] found page class names [0] []
2022-9-20 9:6:59.748 [check] found page style names [1] [intro]
2022-9-20 9:6:59.748 [check] no styles to create
2022-9-20 9:6:59.749 [check] no global styles to create
2022-9-20 9:6:59.750 [task] wxmp-atomic-css service started
3 设置 app.wxss
4 设置 index.wxml样式
<view class="wh-screen bg-gray-4">
<view class="flex-col gap-30 mx-32 my-20 pb-32 shadow round-20 bg-white">
<view class="px-32 py-20 text-36 text-bold border-bottom border-gray-6 round-tl-20 round-tr-20">{{ title }}</view>
<view class="px-32 flex-row gap-20" wx:for="{{ lines }}" wx:key="index">
<text class="my-2 wh-36 flex-cc bg-blue-10 text-white round text-20">{{index+1}}</text>
<text class="c1 text-gary-7 text-28 text-break text-line-p150">{{item}}</text>
</view>
</view>
</view>
5 自动生成日志
2022-9-20 8:59:40.261 [check] read wechat mini program pages from config file, found [1] pages
2022-9-20 8:59:40.262 [check] missing global css file [font.wxss] and ignore
2022-9-20 8:59:40.262 [check] read global styles names, found [0] in [app.wxss]
2022-9-20 8:59:40.262 [check] found total [0] global class styles
2022-9-20 8:59:40.262 [check] 1/1) process page [index/index]
2022-9-20 8:59:40.262 [check] parse class attribute [wh-screen bg-gray-4] to [wh-screen,bg-gray-4]
2022-9-20 8:59:40.262 [check] parse class attribute [flex-col gap-30 mx-32 my-20 pb-32 shadow round-20 bg-white] to [flex-col,gap-30,mx-32,my-20,pb-32,shadow,round-20,bg-white]
2022-9-20 8:59:40.263 [check] parse class attribute [px-32 py-20 text-36 text-bold border-bottom border-gray-6 round-tl-20 round-tr-20] to [px-32,py-20,text-36,text-bold,border-bottom,border-gray-6,round-tl-20,round-tr-20]
2022-9-20 8:59:40.263 [check] parse class attribute [px-32 flex-row gap-20] to [px-32,flex-row,gap-20]
2022-9-20 8:59:40.263 [check] parse class attribute [my-2 wh-36 flex-cc bg-blue-10 text-white round text-20] to [my-2,wh-36,flex-cc,bg-blue-10,text-white,round,text-20]
2022-9-20 8:59:40.263 [check] parse class attribute [c1 text-gary-7 text-28 text-break text-line-p150] to [c1,text-gary-7,text-28,text-break,text-line-p150]
2022-9-20 8:59:40.263 [check] found page class names [32] [wh-screen,bg-gray-4,flex-col,gap-30,mx-32,my-20,pb-32,shadow,round-20,bg-white,px-32,py-20,text-36,text-bold,border-bottom,border-gray-6,round-tl-20,round-tr-20,flex-row,gap-20,my-2,wh-36,flex-cc,bg-blue-10,text-white,round,text-20,c1,text-gary-7,text-28,text-break,text-line-p150]
2022-9-20 8:59:40.263 [check] found page style names [1] [intro]
2022-9-20 8:59:40.263 [check] need to create [32] styles [wh-screen,bg-gray-4,flex-col,gap-30,mx-32,my-20,pb-32,shadow,round-20,bg-white,px-32,py-20,text-36,text-bold,border-bottom,border-gray-6,round-tl-20,round-tr-20,flex-row,gap-20,my-2,wh-36,flex-cc,bg-blue-10,text-white,round,text-20,c1,text-gary-7,text-28,text-break,text-line-p150]
2022-9-20 8:59:40.263 [check] total to create [32] global styles
2022-9-20 8:59:40.263 [check] skip style names in [mini.wxss]
2022-9-20 8:59:40.264 [task] create [32] class items [wh-screen,bg-gray-4,flex-col,gap-30,mx-32,my-20,pb-32,shadow,round-20,bg-white,px-32,py-20,text-36,text-bold,border-bottom,border-gray-6,round-tl-20,round-tr-20,flex-row,gap-20,my-2,wh-36,flex-cc,bg-blue-10,text-white,round,text-20,c1,text-gary-7,text-28,text-break,text-line-p150]
2022-9-20 8:59:40.264 [task] read 150 rules
2022-9-20 8:59:40.264 [task] try to generate [32] styles
2022-9-20 8:59:40.264 [task] 1/32 bg-blue-10
2022-9-20 8:59:40.264 [task] 2/32 bg-gray-4
2022-9-20 8:59:40.264 [task] 3/32 bg-white
2022-9-20 8:59:40.264 [task] 4/32 border-bottom units = d5
2022-9-20 8:59:40.264 [task] 5/32 border-gray-6
2022-9-20 8:59:40.264 [task] 6/32 c1
2022-9-20 8:59:40.264 [task] 7/32 flex-cc
2022-9-20 8:59:40.265 [task] 8/32 flex-col
2022-9-20 8:59:40.265 [task] 9/32 flex-row
2022-9-20 8:59:40.265 [task] 10/32 gap-20 units = 20
2022-9-20 8:59:40.265 [task] 11/32 gap-30 units = 30
2022-9-20 8:59:40.265 [task] 12/32 mx-32 units = 32
2022-9-20 8:59:40.265 [task] 13/32 my-2 units = 2
2022-9-20 8:59:40.265 [task] 14/32 my-20 units = 20
2022-9-20 8:59:40.265 [task] 15/32 pb-32 units = 32
2022-9-20 8:59:40.265 [task] 16/32 px-32 units = 32
2022-9-20 8:59:40.265 [task] 17/32 py-20 units = 20
2022-9-20 8:59:40.265 [task] 18/32 round
2022-9-20 8:59:40.266 [task] 19/32 round-20 units = 20
2022-9-20 8:59:40.266 [task] 20/32 round-tl-20 units = 20
2022-9-20 8:59:40.266 [task] 21/32 round-tr-20 units = 20
2022-9-20 8:59:40.266 [task] 22/32 shadow units = 4,10
2022-9-20 8:59:40.266 [task] 23/32 text-20 units = 20
2022-9-20 8:59:40.266 [task] 24/32 text-28 units = 28
2022-9-20 8:59:40.266 [task] 25/32 text-36 units = 36
2022-9-20 8:59:40.266 [task] 26/32 text-bold
2022-9-20 8:59:40.266 [task] 27/32 text-break
2022-9-20 8:59:40.266 [task] 28/32 text-gary-7
2022-9-20 8:59:40.267 [task] 29/32 text-line-p150
2022-9-20 8:59:40.267 [task] 30/32 text-white
2022-9-20 8:59:40.267 [task] 31/32 wh-36 units = 36
2022-9-20 8:59:40.267 [task] 32/32 wh-screen units = 0,full
2022-9-20 8:59:40.267 [task] found total [11] units [0,10,2,20,28,30,32,36,4,d5,full]
2022-9-20 8:59:40.268 [task] save 5945 chars to ./mini.wxss
2022-9-20 8:59:40.268 [task] wxmp-atomic-css refresh 1x
3 小结
使用 wxmp-atomic-css 生成微信小程序原子样式 mini.wxss，一行命令启动，不需要额外配置任何代码。
有需要的同学可以直接使用，有问题欢迎提出 issue，也欢迎 fork https://github.com/foxgst/wxmp-atomic-css/