小程序|tailwindcss jit 与各大框架的融合

小程序|tailwindcss jit 与各大框架的融合

【小程序|tailwindcss jit 与各大框架的融合】


把 tailwindcss JIT 思想带入小程序开发吧!
书接上文
到今天为止已经 , 距离第一版已经发布了 19天了 。这 19 天内 , 在许多人的帮助和支持下 , 添加了许多的 feature 和修复了许多的 bug.
现在到 1.1.5 版本的发布 weapp-tailwindcss-webpack-plugin , 已经不只是一个 webpack-plugin 了 。 接下来让我们大概看一下有哪些改进吧 。
适配了更多的框架
原先设计的时候 , 主要是给 uni-app 的 webpack 打包版本设计的 。 随着群友和一些使用者的需求 , 陆陆续续添加了:
  • uni-app-vite
  • taro (react/vue2/3)
  • remax (react)
  • rax (react)
框架支持 。 而且也补充了更多的  和 .
uni-app (vue2/3)
uni-app for vite (vue3)
taro (React/vue2/3)
remax (react)
rax (react)
当然 , 未来肯定是要支持更多的框架以及原生的写法的 。
毕竟 tailwindcss 这种自动生成 css 的框架 , 是一种非常优秀的思想 。 非常的灵活多变 , 是非常值得推广的 , 能够精炼的对 css 进行提炼 , 自由的组合 。
这让我想起了 js函数式编程 , 用函数来生成函数 。 而且 tailwindcss 配合上最新的 dart sass 开发体验非常好 。
现在的 sass 也提倡编程 @use 'sass:meta' as M; 这类的 , 大大提升了样式的可编程性 。
简单的原理
由于小程序的 class 不支持除了 _ 和 - 以外的特殊符号和诸多选择器 , 而 tailwindcss jit 又是特殊符号一大堆 。
于是在不改变 tailwindcss 默认 jit engine 的情况下 , 我们自然而然就想到了 , 同时去 修改(mangle) 对应的 xxmlxxssjsx这类的生成的文件 。 将他们进行 对照配合 修改 , 那么就能兼容小程序平台了 , 毕竟所见不为所得 , 用户在编写的时候 , 还是按照 web 的习惯去写 tailwindcss , 我们编写的 webpack/vite/postcss plugin 这类的 , 把这些都处理掉就完事了 。
比较好改一点的还是 uni-app , 毕竟生成的 wxml 和 wxss 文件还比较可控 。 那种类 react 框架 , wxml 都引入一个 base.wxml 然后根据那种 render function 来渲染的 , 就比较难了 。 目前个人的解法 , 也仅仅只能做到解析 AST , 然后遇到某些关键词 , 比如 class/className/staticClass后 , 进行语句匹配 , 替换其中的字符串字面量 , 语句结束停止匹配并继续向下 walk ast 。
当然在编写过程中 , 也发现这种和各个框架是耦合的 , 因为自己并没有去详细了解各个框架的生命周期和源码 。 导致目前都是针对打包后的结果进行解析修改 。 这点做的不是特别好 , 应该各个框架内 , 都有一个切面 , 可以把处理方法注入进去的 。
省的在生成产物后 , 还要去解析 AST 进行修改 , 这样也十分的损耗性能 。
以上就是我对这些天的感悟了 。 功能吧能用 , 达不到完美 , 毕竟还有 多线程 , 缓存 这种玩意要玩耍呢(笑) 。
Bugs & Issues
如果在使用过程中遇到 Bugs 或者提出问题 ,