最近在帮一家大公司设计搭建一个大型前端项目的前端系统时，和同事@Liuuy讨论了CSS架构和设计问题。开发人员对CSS及其CSS预处理器的使用是一个有趣的问题——过去，我一直在抱怨那些想要编写好的CSS，但根本不想认真学习CSS的人。于是，在我们的讨论下，我借助自己写Coca的经验，设计并验证了自动重构的可能性。我的同事为TypeScript完成的自动CSS重构工具：Lemonj-以我的名字命名。LemonjGitHub：https://github.com/twfe/lemonjLemonj是一个面向CSS/LESS/SCSS的分析、不良气味检查器和自动重构工具。从架构上看，它通过Antlr+Antlr4TS生成相应的parsergenerator，然后根据必填字段标记相应的内容。然后根据我们的需求和设计，通过AST中的位置信息修改相应的内容值。如importants量化分析中的代码：if(Checker.hasImportant(propertyValue)){if(!this.metadata.importants){this.metadata.importants=[];}this.metadata.importants.push({type:'!important',file:this.metadata.filePath,line:ctx._start.line,});}就是获取CSS属性中的内容，检查是否有!important，然后记录位置信息。与CSS转换器的区别也许你使用过各种CSS/LESS/SAAS转换工具，那么你会很好奇它们与Lemonj的异同点。CSS到CSS预处理器转换工具。他们都是一键上传一个类似CSS的文件，从中提取语法树，转换成新的形式。而要实现不同预处理器的转换，可能还需要多种转换工具。而且它们只能在一个文件上修改，而你的代码分散在代码库中。Lemonj自动重构CSS工具。它还解析语法树并从中提取有关文件的信息，但不能直接将其转换为新形式。而是需要分析代码中的问题，结合AST中得到的位置信息，然后返回到指定文件自动修改。你可以认为，一个基本上是自动修改现有代码，另一个是普通的转换工具——毕竟根据位置修改是一件很累的工作。使用Lemonj进行CSS自动化重构1.先安装Lemonj，即：npminstalllemonj-g或者：yarnglobaladdlemonj2.使用Lemonj分析代码：lemonjanalysis_fixtures，其中_fixtures是一个目录。在此过程中，会产生相应的恶臭数据：CodeSmell:{colors:24,importants:4,issues:8,mediaQueries:1,absolute:0,oddWidth:1}因为恶臭函数太常见了，我们还没有Enhancement不是我们的核心竞争力。另外，在执行anlaysis的时候，会生成一些额外的信息，比如颜色映射文件：//_fixtures/less/color/border.less@color1:#ddd;//_fixtures/less/color/border。less@color2:green;//_fixtures/less/color/rgba.less@color3:rgba(255,0,0,0.3);//_fixtures/less/color/sample.less@color4:#ff7f50;//_fixtures/less/color/sample.less//_fixtures/less/color/sample2.less@color5:#800080;//_fixtures/less/color/sample.less这里的颜色只是临时命名，需要根据在具体需求上进行调整，比如根据设计系统的思路将color_1改为@primary_color。3.执行lemonjrefactor_fixtures自动重构代码。可以将上一步中的代码进一步修改为所有代码文件。好吧，重构就是这么简单。Charj的其他功能正在完善中，欢迎大家看看哪些场景适合自动重构。最后记住我们的GitHub：https://github.com/twfe/lemonjbinghe转载本文请联系phodal公众号。
