这是一个创建于 457 天前的主题，其中的信息可能已经有所发展或是发生改变。
原子化 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 字符串源码已经被转换成纯字符串了。
 |
1
lyc575757 2023-08-28 08:24:38 +08:00 via Android
可以尝试一下 unocss 的 attributify
https://unocss.dev/presets/attributify |
 |
2
theprimone OP @lyc575757 之前 windicss 的时候体验过，体验并不太好，配置 TS 和 throwIfNamespace 的问题我依稀记得很头疼 😂
|
 |
3
george2077 2023-09-08 16:05:23 +08:00
工具函数
|
Select Language