Convert css string to object

[joe_midi 248 Likes (Specialist)]

Hey guys,

 

I have a dynamic template, where you can input css into the XML feed, and the banner will read that on run time and adjust the banner overwrite the styles using set:

 TweenMax.set(element, newValuesObject);

And I've managed to cobble together bits of string replaces and RegEx:

var myDynamicCSS = "color:#ffffff; background-color: #00ffbb; text-align: left; border: 1px solid green";

String.prototype.toCamelCase = function() {
  return this.replace(/^([A-Z])|[\s-](\w)/g, function(match, p1, p2, offset) {
    if (p2) return p2.toUpperCase();
    return p1.toLowerCase();
  });
};

const convertCSS2JS = (css) => {
  let frameCSS = css.replace(/([\w-.]+)\s*[^;]+);?/g, '$1:$2,');
  frameCSS = frameCSS.replace(/,+$/, '');
  let properties = frameCSS.split(', ');
  let frameCSSObj = {};
  properties.forEach(function(property) {
      let cssProp = property.split(':');
      let cssKey = cssProp[0].toCamelCase();
      let cssValue = cssProp[1].trim();
      frameCSSObj[cssKey] = cssValue;
  });
  return frameCSSObj
};

TweenMax.set(myDynamicElement, convertCSS2JS(myDynamicCSS]));

But I'm unsure of how easily breakable this is?

 

 

Codepen: 

See the Pen GZVedX by joemidi (@joemidi) on CodePen

[Dipscom 3,108 Likes (Superhero)]

What do you mean by breakable? See if we can come up with combinations of CSS stings to see if this fails?

[joe_midi 248 Likes (Specialist)]

Yea lets break it!!

 

I'm off to the pub.

[Dipscom 3,108 Likes (Superhero)]

Ok, let's resort to violence and see what we can break. 

 

:/

 

Pub on a Tuesday? Man.... I've already used my lunch allowance, can't come stalk you but, give me a heads up sometime and I might show up (I'm around London Bridge this and next week).

[Carl 9,720 Likes (Superhero)]

very nice, handled multiple transforms nicely and they got converted to a matrix by set()

var myDynamicCSS = "color:#ffffff; background-color: #00ffbb; border-radius:20px; transform:translateY(100px) rotate(30deg) scaleX(0.5)";