Изменения специфичности полезности в V4 ⇐ CSS

[Anonymous]

у меня была утилита компонентов в V3, определенная как это, это позволило, чтобы ссылки имеют цвет по умолчанию текстовых связей , и в навигационных ссылках цвет переопределен в текстовые заголовки . Он работал нормально, потому что Link-nav утилита была определена второй.

Код: Выделить всё

@layer components {
/* text-links is default color */
.link-default {
@apply text-links no-underline;
}

// ...

/* text-headings color wins, because link-nav class is defined after */
.link-nav {
@apply text-headings whitespace-nowrap underline-offset-4 text-lg;
@apply hover:text-links-hover;
@apply focus:text-links-hover focus:underline;
@apply active:text-links-hover;
}
}

В v4 мне пришлось определить две утилиты, подобные этому, теперь они представляют собой две отдельные утилиты и порядок определения не влияют на специфичность, поэтому правила из Link-nav не выигрывают, а ссылки по-прежнему имеют цвет по умолчанию.

Код: Выделить всё

/* text-links wins but it shouldn't */
@utility link-default {
@layer components {
@apply text-links no-underline;
}
}

// ...

@utility link-nav {
@layer components {
/* here, specificity fails, text-headings */
@apply text-headings whitespace-nowrap underline-offset-4 text-lg;
@apply hover:text-links-hover;
@apply focus:text-links-hover focus:underline;
@apply active:text-links-hover;
}
}

Я не хочу использовать! Я должен определить утилиты, потому что я использую эти классы с @apply .
Как правильно контролировать специфичность в утилитах V4?

Подробнее здесь: https://stackoverflow.com/questions/794 ... nges-in-v4