Как преобразовать пользовательский вариант Tailwind V3 с группой-* в V4? ⇐ CSS

[Anonymous]

В моем конфигурации Tailwind V3 у меня есть: < /p>

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

const matchGroup = (groupName, selector, matchVariant) => {
matchVariant(
groupName,
(_value, { modifier }) => {
if (modifier) {
return `:merge(.group\\/${modifier})${selector} &`;
} else {
return `:merge(.group)${selector} &`;
}
},
{ values: { DEFAULT: "" } },
);
};

const matchPeer = (peerName, selector, matchVariant) => {
matchVariant(
peerName,
(_value, { modifier }) => {
if (modifier) {
return `:merge(.peer\\/${modifier})${selector} ~ &`;
} else {
return `:merge(.peer)${selector} ~ &`;
}
},
{ values: { DEFAULT: "" } },
);
};

...

plugin(({ addVariant, matchVariant }) => {
matchGroup(
"group-lb-loading",
":is(.phx-submit-loading, .phx-click-loading, .phx-change-loading, .lb-loading)",
matchVariant,
);
}
< /code>
Я хочу преобразовать этот пользовательский вариант в новый синтаксис Tailwind V4, то, что я придумал: < /p>
@custom-variant group-lb-loading (
.group.phx-submit-loading &,
.group.phx-click-loading &,
.group.phx-change-loading &,
.group.lb-loading &,

.group\/lb-loading.phx-submit-loading &,
.group\/lb-loading.phx-click-loading &,
.group\/lb-loading.phx-change-loading &,
.group\/lb-loading.lb-loading &
);
< /code>
Это будет работать для таких вещей: < /p>



< /code>
, но не удастся, если пользователь установит пользовательское имя группы: < /p>

- это единственный вариант здесь явно добавить имена групп, которые у меня есть в моем коде в качестве пользовательских вариантов, или есть способ, чтобы он работал динамически похожим на то, как я это сделал в v3?


Подробнее здесь: https://stackoverflow.com/questions/797 ... roup-to-v4