把 tailwindcss JIT 思想带入小程序开发吧！
书接上文 让小程序开发进入 tailwind 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) 对应的 xxml,xxss,jsx这类的生成的文件。将他们进行 对照配合 修改，那么就能兼容小程序平台了，毕竟所见不为所得，用户在编写的时候，还是按照 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 或者提出问题，欢迎提交到此处，笔者会尽快复现并修改
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除