search

VKCOM / VKUI

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
https://vkcom.github.io/VKUI/
MIT License
1.01k stars 182 forks source link

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

Open eolme opened 8 months ago

eolme commented 8 months ago

Описание

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

Button -> Tappable -> Clickable

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

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

Версия

^5 и ^6-beta

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

No response

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

No response

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

No response

Скриншоты

https://github.com/VKCOM/VKUI/assets/11076888/9c018c97-a921-4ba1-bb8d-08f5d3c034a6

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

No response

BlackySoul commented 8 months ago

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

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

eolme commented 8 months ago

@BlackySoul

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

BlackySoul commented 8 months ago

@BlackySoul

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

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

levtsypanov commented 8 months ago

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

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

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

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

eolme commented 8 months ago

@levtsypanov не вижу CSS Modules

@BlackySoul что изменилось то? Вот строка, все те же стили и в твоей ветке: https://github.com/VKCOM/VKUI/blob/6cdce09c895ff7c556896643a5ded8a1cf295c1c/packages/vkui/src/components/Clickable/Clickable.module.css#L30

BlackySoul commented 8 months ago

@levtsypanov не вижу CSS Modules

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

https://github.com/VKCOM/VKUI/blob/6cdce09c895ff7c556896643a5ded8a1cf295c1c/packages/vkui/src/components/Clickable/Clickable.module.css#L30

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

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

eolme commented 8 months ago

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

inomdzhon commented 8 months ago

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

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

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

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

SevereCloud commented 1 month ago

На самом деле эту проблему можно попробовать решить с помощью @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 должен импортироваться раньше всех