Экспортировать css переменные в виде js переменных

[ekabolotina]

Описание

Предлагаю добавить в состав библиотеки аналоги CSS переменных для JS.

Поведение

В JS/TS фале можно получить доступ к тем же самым CSS переменным, которые определены в @alfalab/core-components/vars. Например:

// index.ts
import { colors, gaps } from '@alfalab/core-components/vars';

console.log(gaps['gap-l'], colors['color-red-dark']); // '20px', '#d91d0b'

Дополнительная информация

Сейчас в arui-scripts используется плагин @alfalab/postcss-custom-properties с опцией preserve: false. Это означает, что CSS переменные удаляются, и их значения инлайнятся в результирующий бандл. Таким образом нет возможности из JS достучаться до значений этих переменных. Можно включить опцию preserve: true, но тогда на селекторе :root появляются сотни кастомных CSS свойств, из-за чего DevTools начинают сильно лагать при навигации по элементам. Лучшим решением было бы экспортировать все CSS переменные в виде JS переменных. Делать это можно при помощи create-css-vars, например.

[reme3d2y]

Привет, идея хорошая. У нас в бэклоге эта задача записана, но никак руки не дойдут(
Хочешь поконтрибьютить?))