Стратегии инъекции стилей на платформах

share предоставляет только содержимое стилей (SCSS-исходники + токены); способ инъекции каждая UI-библиотека выбирает сама. Стратегии двух платформ различаются — это проектное решение, а не недостаток. Ни одна из платформ не имеет права из-за этого держать у себя локальную копию компонентного scss (красная линия 2).

Сравнение двух платформ

	lh-ui-plus (Vue3)	lh-ui-vue2
Инъекция во входном файле библиотеки	Полная через side-effect: в `src/index.ts` для каждого компонента выполняется `import '@lh-ui/share/styles/<name>'`; подключение библиотеки даёт все стили	Не инъектируется; пользователь подключает по требованию `@lh-ui/vue2/theme.css` + `@lh-ui/vue2/style/<name>`
Стилевые артефакты	`es\|lib/<name>/style/index.css` + `es/<name>/style/index.scss` (scss-исходники распространяются вместе с артефактами, `@use` переписывается в bare specifier)	`es\|lib/components/<name>/style/index.css` (только css)
Артефакты темы	`theme/index.css` + `dist/index.css` (тема + полный объём)	`dist/theme/index.css` (светлая) + `dist/theme/index-dark.css` (тёмная)
Подпути по требованию	`./style/` → `es//style/index.scss`; `./style-css/` → `es//style/index.css`	`./style/` → `es/components//style/index.css`; `./theme.css`, `./theme-dark.css`
Скрипты сборки	`lh-ui-plus/scripts/build-styles.mjs` (список компонентов сканируется по `packages/components`)	`lh-ui-vue2/scripts/build-styles.mjs` (сканирование по `src/components`; компоненты без источника стилей в share пропускаются автоматически)

Почему две платформы устроены по-разному

Платформа Vue3 ориентирована на большинство, которому нужно «подключил библиотеку — работай»: экосистема vite дружественна к инъекции стилей через side-effect, полная инъекция избавляет пользователей от затрат на настройку подключения по требованию; tree-shaking для стилей всё равно не работает, поэтому полный объём даже удобнее.
Платформа Vue2 ориентирована на старые проекты и сценарии, чувствительные к размеру: в эпоху webpack 4 настройку side-effect-инъекции легко сделать неправильно, а подключение по требованию (два import-а) более управляемо и к тому же позволяет пользователю подключать только светлую или только тёмную тему.

Покрытие при добавлении нового компонента

При добавлении нового компонента сборочные скрипты на обеих платформах покрывают его автоматически (сканируя каталоги компонентов по своим правилам), но в styles/ пакета share должен существовать соответствующий <name>/index.scss — иначе у компонента не будет стилевых артефактов на одном из концов (тихий пропуск, ошибки не будет). Это прямое следствие красной линии «единый источник стилей»: сначала создаём стиль в share, затем компонент на каждой платформе.

Переходные классы между платформами: три mixin-а

Переходные классы во Vue2 — -enter / -leave, во Vue3 / React — -enter-from / -leave-from (-leave-to на обеих платформах называется одинаково). Написание двух наборов классов вручную неизбежно приводило бы к расхождениям, поэтому всё делается только через @include:

@use '@lh-ui/share/styles/theme/common/transition' as *;

.lh-dialog-fade {
  @include lh-enter-both;          // -enter + -enter-from (Vue3)
  @include lh-leave-both;          // -leave + -leave-from
  @include lh-transition-ends;     // -enter-to + -leave-to (одинаково на обеих платформах)
}

Если состояние нужно навесить на дочерний узел, передаётся второй аргумент:

@include lh-transition-ends('.lh-drawer-fade', '.lh-drawer__panel--right');

В компонентных стилях повторно писать двойные переходные классы вручную запрещено.

Ограничения на инъекцию результата настройки темы

buildPresetStyleText(vars) производит текст <style>, пригодный для инъекции (:root + тёмный блок). При использовании на стороне UI можно создавать только элементы <style>, нельзя писать встроенный style на documentElement:

Специфичность встроенного style выше, чем у целого блока тёмных переменных в var-dark.scss, что приведёт к искажению цветовой палитры в тёмной теме.

Подробнее см. Настройка темы.