How to turn a string with styles into an object?

Question

css

Need to convert a string

width:100px;  height:100px; background:red;  transform-origin: 100% 0%; transform:  translate(100px, 100px)  scale(1, 0.5) skew(30deg, 20deg) rotate(1deg);

into an object

var arr = {
'width': '100px',
'height': '100px',
'background': 'red',
'transform-origin' : ['100%' ,  '0%']
'transform': {
'translate': ['100px', '100px'],
'scale': [ '1',  '0.5'],
'skew': ['30deg', '20deg'],
'rotate': '1deg'
}
};

Answer 1

Answer 2

const parseValue = str => {
  const values = str.match(/[^\s,]+/g) || [ null ];
  return values.length > 1 ? values : values[0];
};

const parseStyleStr = str =>
  str.split(';').reduce((acc, n) => {
    const [ k, v ] = n.split(':').map(n => n.trim());
    if (k && v) {
      const f = [...v.matchAll(/([\w]+?)\((.+?)\)/g)];
      acc[k] = f.length
        ? Object.fromEntries(f.map(n => [ n[1], parseValue(n[2]) ]))
        : parseValue(v);
    }

    return acc;
  }, {});