Преобразование строки стилей в объект для React’а и прочего JS

Йо-йо! Недавно столкнулся с тем, что нужно передавать в компонент строку стилей и делать из неё объект стилей для того, чтобы применить их к элементу. Это было вызвано тем, что ранее использовался styled-components (ненавижу его… ) во множестве компонентов, которые вызывали один и тот же компонент, а он писал css, полученный из props в компонент через styled.

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

Функция для преобразования

function xakplStyleStringToStyleObject(customStyling){
  if(typeof(customStyling) === 'string'){
            if(customStyling.length !== 0){
                const arrStyle = customStyling.split(';').filter(e=>e.length !== 0).map((line)=>{
                    let result = Array.from(line.split(':')[0].matchAll(/-/g));
                    result.map((arr)=>{
                        line = Array.from(line).map((a, i)=>( (i === arr.index + 1) ? a.toUpperCase() : a )).join('');
                    });
                    line = [ line.split(':')[0].replace(/-/g, ''), line.slice(1).split(':').slice(1).join(':')].join(': ');
                    return line;
                });
                const rObj = {};
                arrStyle.map((line)=>{
                    const a = line.split(':');
                    const name  = a[0].trim();
                    rObj[name] = a.slice(1).join(':').trim().toString();
                    return line;
                });
                return rObj;
            } else {
                return {};
            }
        } else if(!Array.isArray(customStyling) && typeof(customStyling) === 'object'){
            return customStyling;
      } else {
          return {};
      }
  }

Пример

// input "background-image: url('https://example.com/image.png'); z-index:1; border-bottom-radius:4px";

// return { backgroundImage: "url('https://example.com/image.png')", borderBottomRadius: "4px", zIndex: "1" }

Онлайн

Если вам нужно единоразово преобразовать ваши стили в объект, то можете использовать для этого специальный сервис, который я сделал. Кстати, там ещё появился сервис для преобразования строки в camelCase

О ненависти к styled-components

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

Далее я нашёл ещё несколько причин по которым он ху… не хороший. Вот они:

1. Добавляет к бандлу 60кБайт
2. Ломается при dev-сборке если переиспользовать компонент с ним в другом месте.
3. Не кэшируется. Каждый раз прилетает пользователю через какой-нибудь style-loader и из-за этого могут быть баги с прорисовкой svg и другие…

Ещё одной странностью для меня стало изменение стилей в зависимости от props. Привычным в вёрстке является то, что нужно добавить какой-то вспомогательный класс, а не менять его. Это неминуемо усложнит процесс работы, если вам пришёл свёрстанный файл.

Исходя из моего понимания проблем styled’а, я пришёл к выводу, что его можно использовать только если у вас «стихийная» разработка проекта, который «запустили и забыли». В ином случае использовать styled-components явно дурной тон. Как я уже говорил:

styled-components — тупое дерьмо тупого дерьма.