WARNING: не требуется рассуждать об осмысленности нижеприведённого. Для тебя смысла нет - ты свободен.
- Пишу JS-приложеньки на своём недо-react фреймворке. Юзаю TSX, который компилю с помощью tsc в JS, подставляя свою функцию как jsxFactory. Позволяет писать свои компоненты как
render() {
return <div cls={["aaa", "bbb"]}>blabla</div>
}
(список строк в ключе «cls» ждёт мой кастомный jsxFactory и пихает эти строки в element.classList.add() и т.п.) юзаю какой-то самописный tsconfig.json в корне проекта и собираю с помощью Makefile. Трушный юниксвей. Смысл был лишь в том, чтобы избавиться от ручного конструирования сложных DOM-конструкций руками в сыром JS, это удобно поручить JSX. Такой костыль уже получаетс достаточно удобным в работе: в TypeScript просто создаёшь компонент, вызываешь render() и готово.
-
Есть монолитная CSS портянка, в которой руками придуманы имена всем классам. Эти имена используются в коде, аналогичном выше. Т.е. эти имена захардкожены.
-
Хочется юзать, возможно, несколько исходных CSS - один CSS на один мой JSX-компонент и получить на выходе один монолитный минифицированный CSS с искажёнными именами и выкинутыми комментами. Соответственно, плохо понимаю возможные подходы к внедрению этого на практике.
Речь идёт о работе с базовыми «низкоуровневыми» вещами, типа tsc и подобными, без использования монструозных сборщиков, make пока вполне устраивает на роль «выполнить такую-то таску в зависимости от такой-то». Предпочтения маленьким инструментам, решающим маленькую задачу. Юникс-вей и всё такое, пока без гульпов, вебпаков и прочего такого: тут главное пока изучение работы технологий, а не получение хипстерского смузи-пайплайна сборки.
- Видимо первый шаг - сгенерить некий constants.ts, в котором будет что-то типа:
var cn_aaa = "aaa";
var cn_bbb = "bbb";
юзать эти переменные так:
render() {
return <div cls={[cn_aaa, cn_bbb]}>blabla</div>
}
-
Далее наворотить какой-то минификатор CSS, который порождает из списка CSS-файлов новый монолитный CSS и новую версию constants.ts с новыми именами классов. Этот монолитный CSS поедет в прод, а новый constants.ts будет использоваться для оконечной компиляции проекта.
-
Вот только я не знаю таких CSS-минификаторов. «Напиши сам» - звучит норм. Умею, практикую. Но возможно удастся здесь без велосипедов. Велосипеды люблю, но хотелось бы не сильно катастрофически отстать от трендов.
