Это умышленно. Группа про БЭМ следовательно классический стек = классический БЭМ стек.

давайте не вести теологические споры про формулировки 😉 вернёмся к вопросу про профилирование — вот недавно был доклад https://www.youtube.com/watch?v=Kbmqac6ieck , возможно он поможет

классно) спасибо)

Привет! Подскажите, у вас нормально работает bem-react/di c react@16.13.1?
У меня ругается на эту строчку:
https://github.com/bem/bem-react/blob/master/packages/di/di.tsx#L25
Говорит что нарушаются правила хуков

Привет, а можешь конкретно ошибку скинуть? У нас не возникало подобных проблем

Проблема все же в моем коде. В storybook тот же код работает без ошибок.

Ошибка:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (shop.js:2427)
    at Object.useRef (shop.js:2466)
    at RegistryResolver(Link) (shop.js:534)
    at renderWithHooks (main.js:15267)
    at mountIndeterminateComponent (main.js:17946)
    at beginWork (main.js:19060)
    at HTMLUnknownElement.callCallback (main.js:652)
    at Object.invokeGuardedCallbackDev (main.js:701)
    at invokeGuardedCallback (main.js:756)
    at beginWork$1 (main.js:23667)

Возникает во время гидратации, Если компонент использует хуки (в данном случае di оказался первым компонентом который вывал хук.
Компоненты без хуков ошибок не вызывают

Чем в yandex-ui отличается _theme от _view?
Я заметил, что стили тем захардкожены, а представления используют css переменные из токенов

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (shop.js:2427)
    at Object.useRef (shop.js:2466)
    at RegistryResolver(Link) (shop.js:534)
    at renderWithHooks (main.js:15267)
    at mountIndeterminateComponent (main.js:17946)
    at beginWork (main.js:19060)
    at HTMLUnknownElement.callCallback (main.js:652)
    at Object.invokeGuardedCallbackDev (main.js:701)
    at invokeGuardedCallback (main.js:756)
    at beginWork$1 (main.js:23667)

Хм, самое дефолтное это две версии реакта, если это так, то на уровне webpack’а можно сделать резолвинг react’a из одного и того же места для всех модулей

theme — это старые модификаторы, которые реализовывали «классический» дизайн
view — это уже новые модификаторы, которые реализуют новый дизайн и поддеерживают кастомизацию через дизайн-токены

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

Нет, эти модификаторы взаимоисключающие, т.е. используется либо одно, либо другое. Во всех новых компонентах мы пишем только view, в будущем модификатор theme будет полностью удален

А я правильно понял, что если убрать глобальную тему, то компонент сломается и не будет иметь размеров и цветов?

Все так, глобальная тема это по сути контекст (провайдер) который поставляет значения, а сами компоненты ничего не знают о том в каком контексте они будут исполняться, это позволяет менять внешний вид на проектах и не порождать лишний код

А как работает тот инструмент для компиляции css переменных в статический код?

Вот что я имею в виду. Темы собираются отдельно, не в пайплайне webpack. Как тот инструмент узнаёт какие переменные существуют, что бы вкомпилировать их для IE бандла?

Не могу понять процесс сборки этого случая

А, кажется понял. Мы указываем темы вручную в конфиге?

Я говорил о инструменте https://github.com/yarastqt/postcss-theme-fold

Да, все верное, указываем какие темы есть на проекте (т.е. прокидываем контекст) для компиляции

Где можно почитать о стиле именования токенов?
Почитал https://whitepaper.tools но не нашел ответа на некоторые вопросы. Там больше примеры, а не рассказ о том, как нужно именовать.

Вот например я хочу при наведении курсора красить элемент меню цветом, а цвет текста устанавливать белый. Куда записывать белый цвет? В --color-control-typo-secondary? Или мб в --color-control-typo-light?

Я понимаю что это не так уж важно и каждый может придумывать свои названия, но я хочу почитать истории людей, которые уже придумали до меня, испытали проблемы и пришли к какой-то более-менее устойчивой конфигурации, которая хорошо себя показала. Кажется БЭМ как раз об этом

Возможно я не правильно искал и вы знаете где в whitepaper написано об этом

Хм, мы пошли чуть дальше, у нас для каждого компонента свой токен, который в свою очередь использует цвет-примитив

В итоге у нас такая структура:

menu:
  viewDefault:
    fillColor:
      base:
        value: "#fff"
      hovered:
        value: "#ccc"
  
    typoColor:
      base:
        value: "#000"
      hovered:
        value: "#222"

Ну и использование примитива в качестве значения:

menu:
  viewDefault:
    typoColor:
      base:
        value: "{color.typo.primary}"