.dark class applied after .group class

[sibbng]

Playground

I tried using unshift() method here. It works but now changes the order of pseudo-classes. It shouldn't be big deal at runtime since it doesn't matter in what order pseudo-classes are applied (afaik) I thought there might be a better way to do this.

https://github.com/antfu/unocss/blob/afbd1ed08425a9ce1180c0568b13469abfddf86b/packages/core/src/generator/index.ts#L226

[antfu]

I guess we could have an extra order field for handlers and sort them before applying

[sibbng]

I guess we could have an extra order field for handlers and sort them before applying

Variants should be applied in order as they defined in class selector. Adding order property to give high priority to certain variants will limit composability of unocss. For example use cases you can look at tailwindlabs/tailwindcss#6018 Giving dark class high priority will limit .group > .dark like use cases.

My proposed solution is:

• Use unshift() method at https://github.com/antfu/unocss/blob/afbd1ed08425a9ce1180c0568b13469abfddf86b/packages/core/src/generator/index.ts#L226
• Force move pseudo-elements (::after, ::before etc.) to end of selector with:

  selector.replace(/(.*)(::.+?)(:.*)/, '$1$3$2') 

  https://github.com/antfu/unocss/blob/afbd1ed08425a9ce1180c0568b13469abfddf86b/packages/core/src/generator/index.ts#L243
• As I said, pseudo-classses (:hover, :focus etc.) will be applied in reversed order but this will not change their behavior.