Optimize adjacent static parts+fields

[developit]

I've been toying around with optimizing Tagged Templates by merging literal field values (strings, numbers and booleans) into their adjacent static part and collapsing the adjacent static parts into a single part:

// input:
<div class={"foo"}>hello</div>
<button id={1} />

// current output:
html`<div class=${"foo"}>hello</div>`
html `<button id=${1} />`

// optimized output:
html`<div class="foo">`
html`<button id=1 />`

It'd be really neat to get this behavior into babel-plugin-transform-jsx-to-htm, since additional assumptions could be made about nested Arrays:

const color = 'red';

// input:
<style jsx>{`
  .foo { color: ${color}; }
`}</style>

// current output:
html`
  <style jsx>${`
    .foo { color: ${color}; }
  `}</style>
`

// optimized output:
html`
  <style jsx>
    .foo { color: ${color}; }
  </style>
`

Thoughts?