`tailwindcss jit` 与各大框架的融合
发布于 3 年前 作者 wangguiying 3624 次浏览 来自 分享

tailwindcss jit 与各大框架的融合

tailwindcss JIT 思想带入小程序开发吧!

书接上文 让小程序开发进入 tailwind jit 时代!

到今天为止已经,距离第一版已经发布了 19天了。

19 天内,在许多人的帮助和支持下,添加了许多的 feature 和修复了许多的 bug.

现在到 1.1.5 版本的发布 weapp-tailwindcss-webpack-plugin,已经不只是一个 webpack-plugin 了。接下来让我们大概看一下有哪些改进吧。

适配了更多的框架

原先设计的时候,主要是给 uni-appwebpack 打包版本设计的。随着群友和一些使用者的需求,陆陆续续添加了:

  • uni-app-vite
  • taro (react/vue2/3)
  • remax (react)
  • rax (react)

框架支持。而且也补充了更多的 使用方式示例项目.

<h3 id=“uni-app”>uni-app (vue2/3)</h3>

Demo 项目

<h3 id=“uni-app-vite”>uni-app for vite (vue3)</h3>

Demo 项目

<h3 id=“taro”>taro (React/vue2/3)</h3>

React Demo 项目

vue2 Demo 项目

vue3 Demo 项目

<h3 id=“remax”>remax (react)</h3>

Demo 项目

<h3 id=“rax”>rax (react)</h3>

Demo 项目

当然,未来肯定是要支持更多的框架以及原生的写法的。

毕竟 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,毕竟生成的 wxmlwxss 文件还比较可控。那种类 react 框架,wxml 都引入一个 base.wxml 然后根据那种 render function 来渲染的,就比较难了。目前个人的解法,也仅仅只能做到解析 AST,然后遇到某些关键词,比如 class/className/staticClass后,进行语句匹配,替换其中的字符串字面量,语句结束停止匹配并继续向下 walk ast

当然在编写过程中,也发现这种和各个框架是耦合的,因为自己并没有去详细了解各个框架的生命周期和源码。导致目前都是针对打包后的结果进行解析修改。这点做的不是特别好,应该各个框架内,都有一个切面,可以把处理方法注入进去的。

省的在生成产物后,还要去解析 AST 进行修改,这样也十分的损耗性能。

以上就是我对这些天的感悟了。功能吧能用,达不到完美,毕竟还有 多线程缓存 这种玩意要玩耍呢(笑)。

Bugs & Issues

如果在使用过程中遇到 Bugs 或者提出问题,欢迎提交到此处,笔者会尽快复现并修改

1 回复

希望看到成形的小程序预设配置

回到顶部