[Bug]: CSS Modules порядок импортов влияет на поведение

[eolme]

Описание

Например, при импорте Button порядок

Button -> Tappable -> Clickable

Что приводит к тому, что Clickable перезаписывает правила Tappable и Button и тд

К тому же правила внутри очень сильно друг друга переназначают, например, специфичность Clickable > * выше чем Tappable_Tappable__stateLayer и ripple effect рисуется неправильно

Версия

^5 и ^6-beta

В каких браузерах воспроизводится проблема?

No response

Шаги воспроизведения

No response

Ожидаемое поведение

No response

Скриншоты

2023-12-15.17.33.18.mov

Пример с воспроизведением

No response

[BlackySoul]

Привет! Такое мы правили, но ещё не релизили, можно попросить проверить, исправилось ли на свежей версии?

Можно установить версию с этого билда

[eolme]

@BlackySoul

Версия
^5 и ^6-beta

[BlackySoul]

@BlackySoul

Версия
^5 и ^6-beta

Это для 6-beta, могу подготовить для v5, если так будет удобнее проверить

[levtsypanov]

Привет! Такое мы правили, но ещё не релизили, можно попросить проверить, исправилось ли на свежей версии?

Можно установить версию с этого билда

У v5 не воспроизводится, а на 6 бэтке билд указаный вами уже с фиксом

вот пример с фиксом https://codesandbox.io/p/sandbox/silly-lamport-ls4g4j

[eolme]

@levtsypanov не вижу CSS Modules

@BlackySoul что изменилось то? Вот строка, все те же стили и в твоей ветке:

VKUI/packages/vkui/src/components/Clickable/Clickable.module.css

Line 30 in 6cdce09

.Clickable__host > * {

[BlackySoul]

@levtsypanov не вижу CSS Modules

@BlackySoul что изменилось то? Вот строка, все те же стили и в твоей ветке:

VKUI/packages/vkui/src/components/Clickable/Clickable.module.css

Line 30 in 6cdce09

.Clickable__host > * {

Конкретно в той ветке - ничего, что касается Tappable, это просто самая свежая на данный момент версия была

По Tappable вливали такое изменение, на тестовых наших средах помогло, если у тебя не так, то поделись, пожалуйста, что используешь (cra/next, какие сборщики и т.п.)

[eolme]

Импорты CSS Modules вообще говоря не гарантируют порядок, как бы не хотелось, и какими-либо хаками тут не хотелось бы обойтись, нужно либо поддерживать атомарность, без пересечений и переопределений с одинаковой специфичностью, как вариант можно решать теми же vkuiInternal, либо явным разделением переопределений по флагам из пропов

[inomdzhon]

Импорты CSS Modules вообще говоря не гарантируют порядок, как бы не хотелось, и какими-либо хаками тут не хотелось бы обойтись, нужно либо поддерживать атомарность, без пересечений и переопределений с одинаковой специфичностью, как вариант можно решать теми же vkuiInternal, либо явным разделением переопределений по флагам из пропов

Соглы, это одна из проблем CSS Modules 😞

Такой импорт не панацея, но частично должен решить проблему, по-крайней мере с Tappable.

---

Этот issue можно отнести к вот этой задаче:

• [BREAKING CHANGE][Enhancement] Реструктурируем CSS #2399

[SevereCloud]

На самом деле эту проблему можно попробовать решить с помощью @layer.

layers.css

@layer vkui.clickable, vkui.tappable;
@layer vkui.tappable, vkui.button;

Clickable.module.css

@layer vkui.clickable {
  ...
}

Tappable.module.css

@layer vkui.tappable {
  ...
}

Button.module.css

@layer vkui.button {
  ...
}

Есть только проблема того, что layers.css должен импортироваться раньше всех