项目地址https://github.com/goblin-pitcher/scss-tailwind-trans后台公司组件库升级，风格由scss转为tailwind风格css编写。tailwindcss的好处不用多说，但是手动转换工作量巨大，所以开发了转换工具，重复性的工作由程序完成。思路是先分析IO，I是.scss文件，O是tailwind风格的.css文件。我们可以通过scssloader将.scss文件转换为原生css。其实核心工作就是原生css到tailwindcss的转换。tailwindcss官网提供了每个css样式对应的tailwindpcss配置，假设爬取所有的配置对照表，然后将样式一一转换。总结一下，大致的工作是：将.scss文件解析为css，遍历css配置，转为tailwind风格的css，将文件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中，所以我们需要一个合并机制。既然有merging，假设有padding:2px4px6px8px，不能在tailwind中直接转换。需要拆分成padding-top|right|bottom|left分别转换，所以我们还需要一个拆分点的机制。如果配置为padding-top:9px呢？此时padding-top等于0.5625rem，tailwind中没有对应的配置项。对于这种情况，有没有一种可配置的逼近处理机制，可以根据不同的需要对其进行逼近。综上所述，我们将转换过程的步骤总结如下：爬取tailwind官网的css配置对比表进行分类，对比拆分复合css配置（如padding、flex等）进行配置，并在爬取中配置atomiccss如果在对应的对照表中找不到对应的tailwind配置，则查询用户配置的直接转换表，查找是否有对应的item，存在则返回配置结果.如果找不到，请尝试近似值。css配置合并转换后的tailwind配置，取最好的合并结果（配置最少的可以认为是最好的）。上述步骤对应的代码如下：Step1官网信息爬取对应文件spider，cheeriosteps2,3,4对应文件夹爬取数据翻译转换部分主要是css-translate-to-tailwind，解析具体配置可以看到，xxx-analysis文件或文件夹的转换部分目前取的是近似值，主要是尺寸和颜色。可以通过外部传入的remTransFunc方法转换大小。默认方法是取最接近的值。颜色的近似值主要是计算r,g,b和对应的tailwind颜色r,b,g之间方差最小的那个。合并原子的tailwind属性的思路类似于在数组arr中寻找m的最短组合，直接用简单的动态规划求解，懒得优化了。.写文件没什么好说的。该工具进行路径判断。如果要写入的文件夹不存在，则创建该文件夹。需要注意的是file.to配置的路径是相对于file.from的路径，不是绝对路径。用法npmigit+https://github.com/goblin-pitcher/scss-tailwind-trans.git-D========npxscss-to-tailwindinit//自动创建配置文件，每次配置请参阅使用说明。npxscss-to-tailwindrun//开始执行转换//从官网抓取转换表。该组件有一个内置的转换表。如果后面需要更新，执行fetch重新抓取。npxscss-to-tailwindfetch默认配置转换前看配置效果展示：转换后：其他工具都是去年做的，主要内容只用了一周时间。写的比较随意，代码没有注释。最近准备刷简历，却发现自己没有写文章，只能写一篇凑个数。这个项目相当于一个一次性工具。基本不会有后续维护，也懒得打包了。没有太多特殊的语法。Nodev12+绝对可以运行。.目前，它仅支持将.scss文件转换为tailwind样式的.css文件。如果以后有需要，可以考虑做一个webpackloader。
