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

原子化 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 字符串源码已经被转换成纯字符串了。