乐趣区

关于javascript:scss文件转tailwind风格css工具

jiezi

背景

公司组件库降级，款式由 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。

退出移动版