unocss 的顺序问题，求大佬解惑

[chemms]

大佬们，unocss 这种没有语义顺序吗，我先写的 red 然后前后插入新样式，但是实际是 red 生效

<div className="size-50px bg-green bg-red bg-blue"></div>

就是想组件的传入 className 灵活些，可以直接注入

className={
  clsx(
    'px-12px flex-center border-0 select-none focus:outline-none relative',
    'bg-gradient-to-r from-[#006DE9] to-[#0077FF] ',
    'disabled:bg-blue-300 disabled:cursor-not-allowed',
    'flex-center',
    rounded ? 'rounded-100000px' : '',
    isPressed ? 'bg-blue-800' : '',
    fullWidth ? 'w-full' : 'w-auto',
    loading ? 'opacity-50' : 'opacity-1000',
    sizeCss[size],
    className,
  )
}

有这些相关的配置吗，找了一圈了

[rain0002009]

别找了 应该是没有的 这个权重倒是和你定义 css 样式的顺序有关和 class 的顺序没关系 我依稀记得 写在下面的好像比上面的高那么一丢丢 我倒是好奇你为啥要这样用

[chemms]

好吧，我这边想的是外面注入样式可以直接覆盖内部的，感觉自定义程度高点会特别灵活

[chemms]

额外写 props 一个一个注入，感觉很麻烦哎

[bgm004]

顺序是看选择器权重，css 文件顺序以及文件内书写顺序。
如果是 tailwindcss 可以使用 tailwind-merge 。unocss 我就不清楚了。

[chemms]

@Track13 选择器权重感觉怪怪的，这个 merge 我去研究下

[chemms]

不行哎，这玩意 unocss 用不了，还是运行时的，官方没想法搞，估计只能使用选择器注入了吧，但是又不支持动态字符串，有点烦


https://github.com/unocss/unocss/issues/2748

[miku999]

可以定义 variants 来添加额外的 layer, 比如 util:前缀对应的是 layer: 'utilities', 这样 bg-red util:bg-blue 就会使 blue 生效了
至于为什么原本代码里 bg-red 生效了, 可能是因为在别的文件里已经使用过了 bg-red 和 bg-blue, 先使用的是 bg-blue 后使用 bg-red, 这样生成的 css 文件里 bg-blue 靠前, 你这个文件里只是重复使用已经生成的类

[chemms]

@miku999 我去研究一下这个

[bgm004]

@chemms 你这里都是 class 选择器，那肯定是看生成 css 文件内的顺序啊。这是不可控的。

[chemms]

@miku999 这个通过 layer 确实可以实现后面覆盖前面，我加个 presetAttributify attributes 属性规则去解析，然后 variants 中去解析到这个属性规则的，但是发现这种写法不支持变量。。。

[chemms]

@Track13 是啊，好像不可解

[miku999]

@chemms #10 你会用到这么多 layer 吗, 我比较大型的项目也就三个就够了, components 最低级, 可被默认 layer 覆盖, 再有一个 utilities 覆盖默认 layer
感觉用到更多 layer 可能是写法不合适了, 用三元符或者别的一次只触发一个

[chemms]

@miku999 是的大佬，这样就很合理了

[magicdawn]

官方不干, 这个又是强需求, 糊了一个 https://github.com/magicdawn/unocss-merge

试了下你这个例子, 可以输出

[chemms]

@magicdawn 大佬，给你点个星

[chemms]

@magicdawn 现在用不着就是，记得上次是定义了挺多属性来搞的，，，有点麻烦