fix(react-ui): CSS minification

[JackUait]

В попытке закрыть #2881 и IF-487 добавил @emotion/babel-plugin в библиотеку, но опция cssPropOptimization предполагает использование библиотеки @emotion/react, без неё оптимизации производиться не будут, это связано с тем, что плагин проверяет импортирован ли jsx из пакета @emotion/react и на основании этого производит оптимизации (почему эти же оптимизации нельзя проводить с обычным css из @emotion/css раскопать не удалось). Сейчас в библиотеке используется @emotion/css, в связи с чем мы остаёмся без минификации CSS

В связи с описанным выше возникает вопрос: насколько целесообразно сейчас переезжать на @emotion/react? И какие потенциальные трудности с этим могут возникнуть?

Исследуя проблему дальше, наткнулся на комментарий, в котором чувак подчеркнул, то, что частично заменить минификацию поможет gzip. Он поможет с удалением лишних пробелов и судя по примеру минификации из документации это вплотную приблизит наш код к тому, что делает бабель-плагин (останутся лишь \n, но с ними наверняка тоже что-то можно сделать):

Текущее состояние кода (есть лишние пробелы)	Код минифицированный с помощью плагина

Итого: мы имеем два пути решения проблемы

1. Путь с переездом на @emotion/react на первый взгляд выглядит более простым, но вероятно он принесёт с собой парочку багов
2. Путь с минификацией через gzip выглядит более сложным (плюс нужно будет найти способ избавиться от \n), но кажется что он не станет причиной новых багов

Что думаете по этому поводу? Какой способ лучше выбрать? Стоит ли вообще заниматься этой проблемой? И может у вас есть свои наблюдения, которые я не учёл, пока пытался решить проблему?

[zhzz]

Опция сssPropOptimization не причем, она совсем про другое. Плагин минимизирует по дефолту, без опций. Он ищет в коде все вызовы функции css, и минимизирует переданные в нее строки. Но, плагину нужно трансформировать только css из emotion. Поэтому, он смотрит на то, чтобы она была импортирована строго из @emotion/css. Но мы в lib/theming/Emotion.ts создаем свою css и импортируем ее от туда. Поэтому плагин по умолчанию ничего не минифицирует. Это можно проверить, поменяв импорт в стилях на ожидаемый, запустив build и заглянув в получившиеся файлы.

Опция importMap из emotion-js/emotion#1220 призвана решить похожую проблему. Однако она работает только для абсолютных путей. Можно подумать как это решить.

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

[JackUait]

Получается, что нам нужно закрыть #2716, прежде чем мы сможем закрыть эту задачу

[zhzz]

Получается, что нам нужно закрыть #2716, прежде чем мы сможем закрыть эту задачу

Как вариант. Если получится реализовать 2716.4 и ничего другого не сломать.

Можно было бы еще:

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