Question: How does the preset merge CSS rules of dark theme under ".dark" selector?

[awwwdev]

This is not an issue, but a question. Sorry if this is not the right place. I couldn't find another place.

I am writing another preset but for a specific color palette. I was wondering how your preset add new CSS variables under the ".dark" selector.

I have some rules that add CSS variables whenever a color utility (like bg-green4, c-blue3) is used. But I get this:

As you see, ".dark-theme {" is repeated each time and CSS size is not optimized. What I want to achieve is like this: (Note, I created this with preflight. I want to achieve the same when color utility classes added after preflight. )

I read your source code, but couldn't understand which part makes this happen. Any help is much appreciated.

I have also opened an issue under UnoCSS repo (unocss/unocss#4102), and found a hacky way (with some extra unwanted character going into the CSS file). But still prefer to know how you did it.

Thank you :)