Skip to main content

wxmp-atomic-css

atomic css for wechat mini program, instant global css content generator

features

  • support pages in main package and subpackages
  • support component pages with global css
  • with page class names cache and promise, speed up to 20 ms
  • watching wechat mini program directory, auto generated by 200 ms delay
  • with 15 themes, which colors come from ant-design
  • with 100+ common css style rules

roadmap

  • count style name usage in all pages

usage

1 install deno

iwr https://deno.land/install.ps1 -useb | iex

2 open terminal and run script on the wechat mini program directory

deno run --allow-read --allow-write --allow-net https://deno.land/x/wxmp_atomic_css@v0.0.9/worker.ts .

the result is 

❯ deno run --allow-read --allow-write --allow-net https://deno.land/x/wxmp_atomic_css@v0.0.9/worker.ts .
2022-10-23 11:02:10.529 ==========================================================
2022-10-23 11:02:10.531    wxmp-atomic-css: wechat mini program atomic css kit
2022-10-23 11:02:10.531 ==========================================================
2022-10-23 11:02:10.531 starting wxmp-atomic-css
2022-10-23 11:02:10.534 [task] working directory found for app.wxss at D:\repo\ryl-wxmp\miniprogram\
2022-10-23 11:02:10.542 [task] read 15 themes
2022-10-23 11:02:10.545 [task] read 144 rules
2022-10-23 11:02:10.545 [task] start auto generation after started
2022-10-23 11:02:10.576 [task] parse global styles names, found [1] in [font.wxss]
2022-10-23 11:02:10.578 [task] parse global styles names, found [6] in [app.wxss]
2022-10-23 11:02:10.580 [task] read wechat mini program pages from config file, found [34] pages
2022-10-23 11:02:10.580 [task] [parsePageClassNames] begin 34 tasks
2022-10-23 11:02:10.680 [task] [parsePageClassNames] finish 34 tasks
2022-10-23 11:02:10.688 [task] [parseComponentClassNames] begin 11 tasks
2022-10-23 11:02:10.709 [task] [parseComponentClassNames] finish 11 tasks
2022-10-23 11:02:10.710 [data] total found [7] global style names
2022-10-23 11:02:10.710 [data] total found [166] class names from pages
2022-10-23 11:02:10.710 [data] total found [100] class names from components
2022-10-23 11:02:10.712 [data] [4] class names to remove, [tip-blue,tip-green,tip-red,tip-yellow]
2022-10-23 11:02:10.712 [data] new task for generate [190] class names = [-a,active-bg,active-text-day,active-text-week,ai-center,ai-end,ai-start,bg-black,bg-black-a50,bg-blue-1,bg-blue-6,bg-gray-1,bg-gray-2,bg-gray-3,bg-gray-4,bg-gray-5,bg-gray-7,bg-green-7,bg-orange-3-a10,bg-orange-6,bg-orange-6-a30,b
g-primary,bg-primary-a10,bg-red-3-a10,bg-red-7,bg-red-7-a10,bg-white,border,border-2,border-black,border-bottom,border-gray-10,border-green-6,border-orange-6,border-orange-6-a30,border-primary,border-red-6,border-top,border-transparent,c1,c2,c3,currency,day,delay-1000,disable-text,duration-1000,ease-in,
flex-cc,flex-col,flex-col-r,flex-lc,flex-row,g-,gap-10,gap-20,gap-32,gap-4,grid-2c,grid-3c,grid-5c,grid-7c,h-120,h-150,h-20,h-36,h-64,h-80,h-96,jc-around,jc-between,jc-center,jc-end,jc-start,m-32,mb-10,mb-20,mb-32,mh-120,mh-150,mh-200,ml-10,ml-20,ml-32,ml-4,mr-20,mr-32,mr-4,mt-10,mt-20,mt-32,mt-4,mx-20,
mx-32,my-10,my-20,normal-bg,normal-text,number,opacity-60,opacity-70,p-10,p-20,p-32,pb-10,pb-20,pb-32,pb-4,pl-10,pl-20,pl-32,pos-abs,pos-rel,pos-tr,pr-20,pr-32,pr-4,pt-10,pt-20,pt-32,px-10,px-20,px-32,px-37,px-4,px-80,py-10,py-20,py-4,py-90,rotate-180,round,round-10,round-10m,round-20,round-36,round-4,r
ound-8,round-bl-10,round-br-10,round-tl-10,round-tr-10,shadow,text-20,text-24,text-28,text-30,text-32,text-36,text-48,text-black,text-blue-6,text-bold,text-break,text-center,text-gray-6,text-gray-7,text-gray-9,text-green-6,text-line-p150,text-normal,text-orange-6,text-primary,text-red-6,text-right,text-
white,theme,themes,type,userinfo,userinfo-avatar,userinfo-nickname,w-120,w-96,w-full,wh-144,wh-256,wh-36,wh-48,wh-64,wh-72,wh-96,wh-full,wh-screen,wrap,z-,z-1,z-2,z-3,z-4]
2022-10-23 11:02:10.713 [data] new task to create [190] class names
2022-10-23 11:02:10.730 [warnings] 21 class names not matched, -a,active-bg,active-text-day,active-text-week,currency,day,disable-text,g-,normal-bg,normal-text,number,pos-tr,round-10m,theme,themes,type,userinfo,userinfo-avatar,userinfo-nickname,wrap,z-
2022-10-23 11:02:10.731 [data] new task to create [29] unit vars, [0,1,10,12,120,144,150,2,20,200,24,256,28,3,30,32,36,37,4,48,6,64,72,8,80,90,96,d5,p100]
2022-10-23 11:02:10.731 [data] new task to create [26] color vars, [black-1,black-1-50,blue-1,blue-6,gray-1,gray-10,gray-2,gray-3,gray-4,gray-5,gray-5-a05,gray-6,gray-7,gray-9,green-6,green-7,orange-3-10,orange-6,orange-6-30,primary-1,primary-1-10,red-3-10,red-6,red-7,red-7-10,white-1]
2022-10-23 11:02:10.731 [task] begin to write output file
2022-10-23 11:02:10.734 [task] save 1756 chars to var.wxss
2022-10-23 11:02:10.736 [task] save 10754 chars to mini.wxss
2022-10-23 11:02:10.736 [data] job done, cost 191 ms, result = 0
2022-10-23 11:02:10.736 service ready, Press Ctrl-C to exit

3 open any page and add class name, e.g index/index

the original content is <view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>

and the new content is <view class="intro text-primary">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>

add some code with class names to the wxml file

2022-10-23 11:02:17.339 [file changed] *D:\xxx\yyy\miniprogram\pages\index\zzz.wxml
2022-10-23 11:02:17.341 [task] page [D:\xxx\yyy\miniprogram\pages\index\zzz.wxml] - [wh-screen,z-1,flex-col,py-20,c1,mh-200,text-32,text-black,px-32,px-37,flex-row,ai-center,jc-center,h-96,wh-64,text-30,text-orange-6,mx-20,my-20,shadow,round-20,gap-32,duration-1000,delay-1000,ease-in,my-10,text
-36,text-bold,text-center,wh-144,text-primary,bg-gray-2,round-10,text-gray-7,wh-256,h-20,mt-32,bg-orange-3-a10,jc-around,wh-72,h-36,bg-red-3-a10,safe-bottom]
2022-10-23 11:02:17.342 [data] new task to create [193] class names
2022-10-23 11:02:17.346 [warnings] 23 class names not matched, -a,active-bg,active-text-day,active-text-week,currency,day,disable-text,ff-n,g-,normal-bg,normal-text,number,pop-full,pos-tr,round-10m,theme,themes,type,userinfo,userinfo-avatar,userinfo-nickname,wrap,z-
2022-10-23 11:02:17.347 [data] new task to create [29] unit vars, [0,1,10,12,120,144,150,2,20,200,24,256,28,3,30,32,36,37,4,48,6,64,72,8,80,90,96,d5,p100]
2022-10-23 11:02:17.347 [data] new task to create [26] color vars, [black-1,black-1-50,blue-1,blue-6,gray-1,gray-10,gray-2,gray-3,gray-4,gray-5,gray-5-a05,gray-6,gray-7,gray-9,green-6,green-7,orange-3-10,orange-6,orange-6-30,primary-1,primary-1-10,red-3-10,red-6,red-7,red-7-10,white-1]
2022-10-23 11:02:17.347 [task] begin to write output file
2022-10-23 11:02:17.349 [task] save 1756 chars to var.wxss
2022-10-23 11:02:17.350 [task] save 10819 chars to mini.wxss
2022-10-23 11:02:17.350 [data] job done, cost 11 ms, result = 0
2022-10-23 11:02:17.351 [task] wxmp-atomic-css refresh 1x

add some code without class names to the wxml file

2022-10-23 11:02:24.870 [file changed] *D:\xxx\yyy\miniprogram\pages\index\zzz.wxml
2022-10-23 11:02:24.873 [task] page [D:\xxx\yyy\miniprogram\pages\index\zzz.wxml] - [wh-screen,z-1,flex-col,py-20,c1,mh-200,text-32,text-black,px-32,px-37,flex-row,ai-center,jc-center,h-96,wh-64,text-30,text-orange-6,text-36,mx-20,my-20,shadow,round-20,gap-32,duration-1000,delay-1000,ease-in,my
-10,text-bold,text-center,wh-144,text-primary,bg-gray-2,round-10,text-gray-7,wh-256,h-20,mt-32,bg-orange-3-a10,jc-around,wh-72,h-36,bg-red-3-a10,safe-bottom]
2022-10-23 11:02:24.874 [data] job terminated, cost 3 ms { code: 1, msg: "page class names already generated" }
2022-10-23 11:02:24.876 [task] wxmp-atomic-css refresh 2x

and add some code with class names to the wxml file

2022-10-23 11:02:41.979 [file changed] *D:\xxx\yyy\miniprogram\pages\index\zzz.wxml
2022-10-23 11:02:41.985 [task] page [D:\xxx\yyy\miniprogram\pages\index\zzz.wxml] - [wh-screen,z-1,flex-col,py-20,c1,mh-200,text-32,text-black,px-32,px-37,flex-row,ai-center,jc-center,h-96,wh-64,text-30,text-orange-6,text-36,text-red-5,mx-20,my-20,shadow,round-20,gap-32,duration-1000,delay-1000
,ease-in,my-10,text-bold,text-center,wh-144,text-primary,bg-gray-2,round-10,text-gray-7,wh-256,h-20,mt-32,bg-orange-3-a10,jc-around,wh-72,h-36,bg-red-3-a10,safe-bottom]
2022-10-23 11:02:41.986 [data] new task to create [194] class names
2022-10-23 11:02:41.990 [warnings] 23 class names not matched, -a,active-bg,active-text-day,active-text-week,currency,day,disable-text,ff-n,g-,normal-bg,normal-text,number,pop-full,pos-tr,round-10m,theme,themes,type,userinfo,userinfo-avatar,userinfo-nickname,wrap,z-
2022-10-23 11:02:41.991 [data] new task to create [29] unit vars, [0,1,10,12,120,144,150,2,20,200,24,256,28,3,30,32,36,37,4,48,6,64,72,8,80,90,96,d5,p100]
2022-10-23 11:02:41.991 [data] new task to create [27] color vars, [black-1,black-1-50,blue-1,blue-6,gray-1,gray-10,gray-2,gray-3,gray-4,gray-5,gray-5-a05,gray-6,gray-7,gray-9,green-6,green-7,orange-3-10,orange-6,orange-6-30,primary-1,primary-1-10,red-3-10,red-5,red-6,red-7,red-7-10,white-1]
2022-10-23 11:02:41.991 [task] begin to write output file
2022-10-23 11:02:41.994 [task] save 1791 chars to var.wxss
2022-10-23 11:02:41.996 [task] save 10865 chars to mini.wxss
2022-10-23 11:02:41.996 [data] job done, cost 17 ms, result = 0
2022-10-23 11:02:41.996 [task] wxmp-atomic-css refresh 3x

the result file

  • app.wxss should import var.wxss and mini.wxss
  • var.wxss auto generated, only contains page element with css variables
  • mini.wxss auto generated, contains all class names which not defined and following by the rules in all pages and component pages with global css

data files

  • data/config.json running configuration
{
  "fileStructure": {
    "miniProgramDir": "miniprogram",
    "componentDir": "components",
    "appConfigFile": "app.json",
    "cssMainFile": "app.wxss",
    "cssVarFile": "var.wxss",
    "cssOutputFile": "mini.wxss",
    "cssInputFiles": [
      "font.wxss"
    ]
  },
  "workDir": "",
  "watchOption": {
    "delay": 200,
    "fileTypes": [
      ".wxml"
    ],
    "refreshCount": 0
  },
  "fileExtension": {
    "page": ".wxml",
    "ts": ".ts",
    "js": ".js",
    "css": ".wxss"
  },
  "cssOption": {
    "rootElementName": "page",
    "componentGlobalCss": "addGlobalClass:\\s*true",
    "one": {
      "from": 1,
      "to": 7.5,
      "precision": 3,
      "unit": "vmin"
    },
    "singleColorThemes": [
      "primary",
      "white",
      "black"
    ],
    "styleIndent": "    "
  },
  "dataOption": {
    "themeFile": "data/themes.json",
    "ruleFile": "data/rules.json"
  },
  "debugOption": {
    "printConfigInfo": false,
    "printRule": false,
    "printThemes": false,
    "showPageClassNames": false,
    "showPageClassAttribute": false,
    "showCssStyleNames": false,
    "showPageTaskBegin": false,
    "showPageTaskResult": false,
    "showStyleTaskResult": false,
    "showTaskStep": false,
    "showFileContent": false
  },
  "processOption": {
    "promiseLimit": 5
  },
  "tempData": {
    "pageClassNameMap": {},
    "globalClassNames": []
  }
}
  • data/rules.json css style rules

partially content

[
  {
    "package": "spacing.padding.core",
    "syntax": "safe-bottom",
    "expr": "padding-bottom: env(safe-area-inset-bottom);"
  },
  {
    "package": "spacing.padding.ext",
    "syntax": "p-[U]",
    "compose": [
      "pl-[U]",
      "pr-[U]",
      "pt-[U]",
      "pb-[U]"
    ]
  },
  {
    "package": "spacing.padding.ext",
    "desc": "padding-x-axis",
    "syntax": "px-[U]",
    "compose": [
      "pl-[U]",
      "pr-[U]"
    ]
  },
  {
    "package": "spacing.padding.ext",
    "desc": "padding-y-axis",
    "syntax": "py-[U]",
    "compose": [
      "pt-[U]",
      "pb-[U]"
    ]
  },
  {
    "package": "spacing.padding.ext",
    "syntax": "pt-[U]",
    "expr": "padding-top: var(--unit-[U]);"
  },
  {
    "package": "spacing.padding.ext",
    "syntax": "pb-[U]",
    "expr": "padding-bottom: var(--unit-[U]);"
  },
  {
    "package": "spacing.padding.ext",
    "syntax": "pl-[U]",
    "expr": "padding-left: var(--unit-[U]);"
  },
  {
    "package": "spacing.padding.ext",
    "syntax": "pr-[U]",
    "expr": "padding-right: var(--unit-[U]);"
  }
]
  • data/themes.json css color themes
{
  "primary": [
    "70,134,235"
  ],
  "black": [
    "0,0,0"
  ],
  "white": [
    "255,255,255"
  ],
  "gray": [
    "255,255,255",
    "250,250,250",
    "245,245,245",
    "240,240,240",
    "217,217,217",
    "191,191,191",
    "140,140,140",
    "89,89,89",
    "67,67,67",
    "38,38,38",
    "31,31,31",
    "20,20,20",
    "0,0,0"
  ],
  "red": [
    "255,241,240",
    "255,204,199",
    "255,163,158",
    "255,120,117",
    "255,77,79",
    "245,34,45",
    "207,19,34",
    "168,7,26",
    "130,0,20",
    "92,0,17"
  ],
  "orange": [ ...  ],
  "yellow": [ ...  ],
  "green": [ ...  ],
  "blue": [ ...  ],
  "purple": [ ...  ],
  "magenta": [[ ...  ] ],
  "cyan": [ ...  ],
  "lime": [ ...  ],
  "gold": [ ...  ],
  "volcano": [ ...  ]
}

the