How to apply unocss rule when element has certain modifier class?

Question

I have a HTML page where links sometimes have router-link-active class added by a third party library:

<a href=".." class="text-red">Inactive link</a>
<a href=".." class="text-red router-link-active">Active link</a>

I want to style the links with unocss so that active links are blue instead of red. How do I do that? The proposed code would supposedly look like:

<a href=".." class="text-red has-(.router-link-active):text-blue">Link</a>

generating the following CSS:

has-\(\.router-link-active\)\:text-blue.router-link-active {
  color: blue;
}

Answer 1

Sorry for the fuzz, I figured this:

<a href=".." class="text-red [&.router-link-active]:text-blue">Link</a>

Answer 2

Or you could simply configure a shortcut in your config targeting the "external" class:

...,
shortcuts: [
    { 'router-link-active': 'text-blue' },
    ...
],
...