背景

公司组件库降级，款式由scss转换为tailwind格调的css写法。tailwind css的益处自不用说，但纯手工转换工作量微小，因而开发转换工具，重复性工作交由程序执行。

思路

首先剖析IO，I为.scss文件，O为tailwind 格调的.css文件。.scss文件咱们能够通过scss loader转换为原生css，其实外围工作就是原生css到tailwind css的转换。

tailwind css官网提供了各个css款式所对应的tailwindp css配置，假如将所有配置对照表爬取下来，再逐个对照款式进行转换。

总结下来，大体工作如下：

  1. .scss文件解析为css
  2. 遍历css配置，将其转换为tailwind格调的css
  3. 写入文件

scss转css

这一步能够通过sass+postcss将scss转换为ast树，再通过自定义的插件进行内容转换。

loader局部的应用代码地址为SimpleScssLoader，对应转换插件地址为tailwind-trans-plugin。

须要留神的是转换后的css中保留了转换前css配置的正文，便于验证转换的正确性。

css配置转tailwind配置

首先剖析，如果将css配置转换成tailwind配置的工作交由人工实现，应如何实现？

假如要转换padding-top: 8px,咱们首先能晓得padding-top属于padding配置，应在tailwind官网的padding配置列表中查找，但tailwind官网并没有给太多px单位的配置，咱们须要将px转换为rem，再进行配置的寻找。同时这带来了一个问题：px转换成rem须要晓得根节点的font-size，咱们须要让转换过程是一个可配置的过程。

同样以padding-top: 8px为例，假如该属性所在的class同样存在配置padding-bottom: 8px，若根节点font-size是16px，那么能够失去pt-2和pb-2两天tailwind配置，而这两条配置是能够合并成p-2的，因而咱们须要一个合并机制。

既然有了合并，那假如有padding: 2px 4px 6px 8px，这在tailwind中同样无奈间接转换，须要将其拆分为padding-top|right|bottom|left，别离进行转换，因而咱们还须要一个拆分机制。

若配置是padding-top: 9px又该如何解决？此时padding-top等于0.5625rem，tailwind中没有对应的配置项。对于这种状况，是否能有一个可配置的近似解决机制，可能依据不同的需要对其进行取近似值。

整顿以上，咱们将转换过程的步骤总结如下：

  1. 爬取并分类tailwind官网上的css配置对照表，用于配置的比对
  2. 拆分复合css配置（如padding、flex等）

  3. 将原子css配置在爬取的对照表中找对应的tailwind配置

    1. 若无奈找到，查问用户配置的间接转换表里找是否存在对应项，存在则返回配置后果
    2. 若无奈找到，则尝试进行取近似值的解决
    3. 若仍旧无奈找到，则返回css配置
  4. 对转换后的tailwind配置进行合并，取最优合并后果(配置起码则可认为最优)。

以上步骤对应的代码如下：

  • 步骤1的官网信息爬取对应文件spider，爬取数据用的cheerio

  • 步骤2、3、4对应文件夹translate

    • 转换局部次要是css-translate-to-tailwind，具体配置的剖析能够看命名为xxx-analysis的文件或文件夹
    • 转换局部目前取近似值的次要是大小和色彩，大小可通过内部传入的remTransFunc办法转换，默认办法是取最近的值。色彩取近似值次要是计算r、g、b三者与对应tailwind色彩r、b、g的方差最小者。
    • 合并原子tailwind属性的思路相似于求数组arr中，和为m的最短组合，这里间接用奢侈的动静布局解决了，懒得做优化。。

写入文件

这个没什么好说的，工具做了门路判断，写入的文件夹不存在就创立该文件夹，须要留神的是，file.to配置的门路是绝对于file.from的门路，不是绝对路径

用法

npm i git+https://github.com/goblin-pitcher/scss-tailwind-trans.git -D========npx scss-to-tailwind init // 主动创立配置文件，各配置用法见正文npx scss-to-tailwind run // 开始执行转换// 从官网爬转换表，组件内置了一份转换表，若后续须要更新就执行fetch从新爬取npx scss-to-tailwind fetch

默认配置参见配置

成果展现

转换前：

转换后:

其余

工具是去年做的，主体内容也就花了一个星期，写的比拟随便，代码也没啥正文。最近筹备刷简历，发现没写啥文章，只能水一篇凑数。

这我的项目相当于是一次性的工具，基本上不会有后续保护，也懒得打包，没太多特地的语法，node v12+必定能跑。。目前也只反对.scss文件到tailwind 格调.css文件的转换，后续有需要能够思考做成webpack loader。