• Поправил в доках vkuiClass на className
  • ADAPTIVITY_GUIDE.md
  • CONTRIBUTING.md
  • CSS_GUIDE.md

Как работает решение?

Вкратце, для конечной сборки ничего не изменилось, меняется лишь сам подход создания компонентов.

Решение предполагает плавный переход с декоратора createScopedElement на CSS Modules.

Как было?

// src/components/Example/Example.css
.Example {}

// src/components/Example/Example.tsx
import './Example.css';

const Example = ({ ...restProps }) => <div vkuiClass="Example" {...restProps} />;

// src/styles/components.css
@import '../components/Example/Example.css';

Как стало?

// src/components/Example/Example.module.css
.Example {}

// src/components/Example/Example.tsx
import { classNamesString } from "../../lib/classNames";
import styles from './Example.module.css';

const Example = ({ className, ...restProps }) => <div className={classNamesString(styles.Example, className)} {...restProps} />;

// src/styles/components.css
@import '../components/Example/Example.module.css';

На каких компонентах тестировалось?

• ButtonGroup
• Button
  • Для обратной совместимости (в случае, если кто-то обращается к этим классам) в CSS файл были добавлены пустые классы (подробности в коде). Они вырезаются при минификации CSS.
  • ⚠️ В конечную сборку в JS попадают лишние строчки. Стоит постараться сократить кол-во обращений из одного блока к другому
    
• Tappable

  На заметку: была проблема с показом фокуса, пока я не понял, что оказывается последним в атрибуте "class" элемента должен быть Tappable--focus-visible, чтобы сработал селектор. Проблема возникла из-за того, что className я добавил последним аргументом в функции. В последствии перенёс в самый верх.

Какие настройки и инструменты понадобились?

babel-plugin-css-modules-transform

Плагин выгружает CSS классы в объект

Изменения под плагин

babel.config.js

• настройка плагина – keepImport сохраняет импортирование стилей и, к тому же, заменяет строку import styles from './ButtonGroup.modules.css' на import ./ButtonGroup.modules.css' (используется для команды babel-cssm)
• исключение .module.css из плагина babel-plugin-transform-remove-imports – вместо этого удаление импортирования стиле делегирутеся св-ву keepImport у плагина css-modules-transform. Причина: без этого transform-remove-imports аффектит плагин css-modules-transform. Предполагаю первый плагин срабатывает раньше и удаляет имопртирование стилей.

typescript-plugin-css-modules

Плагин типизирует CSS классы

Изменения под плагин

• types/env.d.ts – объявление модуля .module.css, чтобы TS выкупал иморты такого типа
• tsconfig.json
  • настройка плагина
  • путь до env.d.ts
• tsconfig.dist.json
  • путь до env.d.ts

webpack.config.js и postcss.config.js

Для Styleguide появилось дополнительное правило для .module.css.

Здесь мы передаём кастомное св-во в postcss.config.js, чтобы тут, в плагине postcss-modules, мы не подставляли префикс vkui для .module.css.

Иначе при import styles from './ButtonGroup.modules.css' в styles мы будем получать styles.vkuiButtonGroup, вместо необходимого styles.ButtonGroup.

Что стоит учесть?

1. Новый подход для условных классов: Так как в проекте TS < 4.4.4, для CSS классов нельзя использовать шаблонные строки типа ButtonGroup--mode-${mode} (в TS > 4.4.4 можно, вот пример) Обновили TS до 4.4.4

   решение для TS < 4.4.4

   • [рекомендую] либо используем объект (пример здесь)
   • либо используем функцию + условные конструкции, например

     function getModeClass(mode: ButtonGroupProps['mode]): string {
       switch (mode) {
         case 'horizontal':
           return styles['ButtonGroup--mode-horizontal'];
         case 'vertical':
           return styles['ButtonGroup--mode-vertical'];
         default:
           return '';
     }
     

   • (ваши идеи)

2. Вес сборки: Учитывая п. 1 и то, что в сборку будут попадать CSS классы в виде объекта, увеличиться вес сборки. при сжатии в gzip несущественная проблема за счёт алгоритма LZ77.

resolve #2607