tailwindcss jit
与各大框架的融合
把
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)
<h3 id=“uni-app”>uni-app (vue2/3)</h3>
<h3 id=“uni-app-vite”>uni-app for vite (vue3)</h3>
<h3 id=“taro”>taro (React/vue2/3)</h3>
<h3 id=“remax”>remax (react)</h3>
<h3 id=“rax”>rax (react)</h3>
当然,未来肯定是要支持更多的框架以及原生的写法的。
毕竟 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 或者提出问题,欢迎提交到此处,笔者会尽快复现并修改