optimize style attributes

[Rich-Harris]

Ref #455. This generates better code for style attributes — this...

<div style='font-size: 12px; color: {{color}}; transform: translate({{x}}px,{{y}}px);'></div>

...becomes this:

function create_main_fragment ( state, component ) {
-  var div, div_style_value;
+ var div;

  return {
    create: function () {
      div = createElement( 'div' );
      this.hydrate();
    },

    hydrate: function ( nodes ) {
-      div.style.cssText = div_style_value = "font-size: 12px; color: " + ( state.color ) + "; transform: translate(" + ( state.x ) + "px," + ( state.y ) + "px);";
+     div.style.setProperty('font-size', "12px");
+     div.style.setProperty('color', state.color);
+     div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
    },

    mount: function ( target, anchor ) {
      insertNode( div, target, anchor );
    },

    update: function ( changed, state ) {
-      if ( ( changed.color || changed.x || changed.y ) && div_style_value !== ( div_style_value = "font-size: 12px; color: " + ( state.color ) + "; transform: translate(" + ( state.x ) + "px," + ( state.y ) + "px);" ) ) {
-        div.style.cssText = div_style_value;
-      }
+     if ( changed.color ) {
+       div.style.setProperty('color', state.color);
+     }
+
+     if ( changed.x || changed.y ) {
+       div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
+     }
    },

    unmount: function () {
      detachNode( div );
    },

    destroy: noop
  };
}

It's more lines but less code, and according to the benchmarks I've done (not to mention common sense) is faster in the vast majority of cases.

Will probably add a style helper to shrink the code down further:

function style(node, key, value) {
  node.style.setProperty(key, value);
}

TODO:

• lots more tests
• handle URLs containing semicolons (e.g. data URIs). (And any other cases where a semicolon could be part of a CSS value?

[Conduitry]

A content: value in a ::before/::after pesudoselector could have semicolons. As could, I suppose, any quoted font family name.

edit: CSS is definitely not My Thing, but as far as I know, URLs would be the only place where semicolons could appear unquoted in an attribute value.

edit again: Hold on, content: doesn't actually make sense on an element that would appear in the markup. So that's not really a concern. And poking around with this branch, it looks like it mostly falls back to the old generated code, rather than producing incorrect code, when it bumps into semicolons in values or other strange stuff - so that's good.

[Rich-Harris]

Thanks, I totally forgot about quoted values. Updated the PR to handle those as well as url(...). Think it should be good to go

[Conduitry]

This is looking good to me - were you still planning on adding a style helper function though?

[Rich-Harris]

Yes, I did! D'oh.