尝试解决原子化 CSS 框架导致的类名单行过长的问题

查看 12|回复 0
作者:theprimone   
原子化 CSS 框架虽然好用,但是一直以来都有个麻烦的问题,写得太长了怎么办?越来越长这事儿是难以避免的,那应该怎么解决呢?
VS Code 可以设置单行强制换行,但如果使用了某个不能强制换行的方式查看代码就很尴尬了,另外也不能指望因为这种事儿让关联的所有人都设置这个属性吧,所以这种方式不是很 OK 。
既然不能从输出的代码解决问题,那就得换个思路了,在输入代码的时候就解决这个问题。Tagged templates 是个好东西,可以基于此来构造类名的模板字符串,说干就干,于是有了 tagged-classnames-free,想叫 tagged-classnames,但是已经被使用了,看起来作者的思路跟我很像,不过我是不太懂为啥他不保证输出结果的顺序,可能是为了性能?
我是基于 clsx 和 tailwind-merge 分别实现了两个工具函数 cls 和 tw,支持了一下单行注释就搞定了。
另外还有个模板字符串格式化的问题,重构代码的时候难免会让模板字符串的缩进变化,默认模板字符串是不会自动改变缩进长度的,这使得开发体验不甚理想,搜索一番发现了一个 eslint 的 template-indent 规则,用上问题不就搞定了 😎(虽然之前基于 eslint 还是写了一个格式化插件,但是效果不甚理想,还是现成的舒服)。
最后还有另一个值得考虑的问题,如果模板字符串里只有字符串,一点表达式都没有,那完全可以去掉啊,我只是想用模板字符串的格式化功能而已,特别是对于只做 React 开发的我,老是被重复计算完全没意义。于是又搞了一个 unplugin 插件 unplugin-polish-tagged-templates,可以在编译代码的时候去掉纯字符串的 tagged templates 。
至此,应该算是彻底解决了类名过长的问题,从开发编译两个环节通过三个工具库解决了问题。完整演示可以访问这个页面 https://tagged-classnames-free.vercel.app/examples 查看效果,查看按钮的对应的 CSS 字符串源码已经被转换成纯字符串了。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部