[BREAKING CHANGE][Feature]: обфусцировать названия локальных CSS-переменных

[inomdzhon]

Речь о --vkui_internal_*

Для чего?

1. сократить размер бандла;
2. предупредить использование извне.

Нюансы

1. Необходимо обрабатывать как CSS, так и JS, т.к. --vkui_internal_* используется там и там.

2. Следует запускать только для production сборки, development и test окружения исключаем.

   Стоит учитывать, что может использоваться в настройках документации Styleguide

Ссылки

• https://lightningcss.dev/css-modules.html
• https://github.com/navanshu/postcss-variable-compress
• related to [BREAKING CHANGE][Enhancement] Реструктурируем CSS #2399

[egorprnn]

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

[egorprnn]

может рассмотреть решение в виде описании в документации как такое настраивать на уровне сборщиков, чтобы разработчики самостоятельно конфигурировали это относительно потребностей

[SevereCloud]

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

Внутренние css переменные на то и внутренние чтобы их можно было делать с ними что хочешь не нарушая контрактных обязательств абстракции. Если что-то требуется, необходимо делать это через публичные интерфейсы. Без инкапсуляции мы далеко не уедем

---

По реализации: требуется делать свои swc и postcss плагины

swc

// Input Code
import properties from "./style.css" with { type: "property_modules" };
element.innerHTML = '<div style="' + properties['--vkui_internal_prop'] + '=12">';

// Output   ↓ ↓ ↓ ↓ ↓ ↓
element.innerHTML = '<div style="' + '--vkui_internal_prop__clZD5' + '=12">';

postcss

// Input Code
.host {
  width: var(--vkui_internal_prop)'
}

// Output   ↓ ↓ ↓ ↓ ↓ ↓
.host {
  width: var(--vkui_internal_prop__clZD5)'
}

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

[inomdzhon]

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

Под "хэшами с ручками", что ты имеешь ввиду?

---

Я думал, кстати, не хэшировать, а сокращать, например:

// Input Code
.host {
  width: var(--vkui_internal_Button-color)'
}

// Output   ↓ ↓ ↓ ↓ ↓ ↓
.host {
  width: var(--_vkuiBc)'
}

На основе ресёрча https://github.com/inomdzhon/test-vkui-css-hash

[SevereCloud]

Под "хэшами с ручками", что ты имеешь ввиду?

Прямо в коде проставить рандомные буквы похожие на хэш

Я думал, кстати, не хэшировать, а сокращать

1. Могут быть пересечения при сокращениях
2. Такие сокращения не предупреждают "использования из вне"
3. Логика сокращений сложно описуема(ее нужно зашивать в плагинах)