[Feature] Добавить поддержку CSS Modules

[inomdzhon]

Для

• отказа от vkuiClass
• возможности автоматизации проставления префиксов vkui

переходим на CSS Modules

Пример

// 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';

---

• удалить упоминание vkuiClass в документациях

[inomdzhon]

closed this as completed in #2294

[inomdzhon]

См. #3345

Старый ресёч на тему оптимизации CSS Modules

Про оптимизацию CSS Modules

⚠️ Для примеров я уже сразу сокращаю имена классов до 3-символов Comp -> Cmp вместо хэширования, как хотим сделать в будущем. Подробнее здесь https://github.com/inomdzhon/test-vkui-css-hash.

Я подумол, потом пошёл пообщался в телеге с SPB Frontend Chat, затем ещё посидел подумол и вот к чему пришёл:

Оптимизация типа

-import styles from "./Comp.module.css"
-const Comp = () => <div className={styles.Comp} />

+require("./Comp.module.css");
+const Comp = () => <div className="vkuiCmp" />

тщетна и имеет свой минус

1. Сначала про минус. Мы теряем возможность писать Comp--size-${size}. Придётся делать мапы вида { s: styles["Comp--size-s"], ... }.

2. Ввиду п.1 будет экономия на спичках, т.к. будут создаваться те же мапы, что CSS Modules выплёвывает, но только вручную. Вот в этом преобразованном коде как сейчас:

   require("./Comp.module.css");
   
   const styles = { Comp: "vkuiCmp", "Comp--size-s": "vkuiCmp--sze-s" };
   
   const Comp = ({ s }) => <div className={classNames(styles.Comp, styles[`Comp--size-${s}`]} />

   алгоритм сжатия Deflate создаст ссылки на styles, Comp, Comp--size- и они не будут занимать место

   А так будет

   require("./Comp.module.css");
   
   const sizeClassName = { s: "vkuiCmp--sze-s" };
   
   const Comp = ({ s }) => <div className={classNames("vkuiCmp", sizeClassName[s]} />