Что было сделано?

• Для оптимизации CSS Modules создал плагин babel-plugin-transform-css-modules вместо babel-plugin-css-modules-transform (подробности см. Написать Babel плагин для обработки CSS Modules #3345).
• Удалил декоратор jsxRuntime – с переводом на CSS Modules он больше не нужен.
• Удалил зависимости babel-plugin-auto-import и babel-plugin-module-resolver.

Нюансы

(для начала надо ознакомиться с описанием задачи #3345)

1. Вычисляемые названия св-в

Дабы не править текущий код, сохранил возможность писать

styles[`Component--mode-${mode}`]

Но чтобы это работало, надо обязательно оставлять начало строкой. Короче:

// ❌
styles[`${somePrefix}-Component--${mode}`]

// ✅ 
styles[`Component--mode-${mode}`]

иначе плагин не сматчит класс.

2. Утилитарные функции в /helpers

Речь о:

• getHoverClassName()
• getMouseClassName()
• getPlatformClassName()
• getSizeXClassName()
• getSizeYClassName()
• getViewHeightClassName()
• getViewWidthClassName()

Опять же, чтобы не переписывать текущее решение, прошёлся по коду и сделал минимальные изменения (на примере, getSizeYClassName()):

-getSizeYClassName("Button", sizeY, styles)
+getSizeYClassName(styles["Button"], sizeY)

В конечном итоге в сборке заменится строкой, а на проде функция конкатенирует sizeY:

getSizeYClassName("vkuiButton", sizeY) // => ex, "vkuiButton--sizeY-regular"

TODO

1 и 2 это пока временная мера. В будущем надо переписать на мапы написанные руками, по типу:

const sizeYClasses = {
  none: styles["Component--sizeY-none"],
  regular: styles["Component--sizeY-regular"],
  compact: styles["Component--sizeY-compact"],
};

sizeYClasses[sizeY]

или как-нибудь иначе.

Чеклист

• Создать README.md для packages/babel-plugin-transform-css-modules под описание плагина
• Написать тесты для packages/babel-plugin-transform-css-modules

• resolve Написать Babel плагин для обработки CSS Modules #3345
• close [Breaking changes] Отказаться от классов без префиксов #2397
• fix [Bug] В название CSS классов, переданных в проп activeMode, добавляется подстрока vkui #2442