react style as a template string

script.js

import ReactDOM from 'react-dom';
import React from 'react';

const toCamelCase = data => {

  let str = '';

  data.split('-').forEach((part, i) => {
    if(i > 0) str += (part.charAt(0).toUpperCase() + part.substr(1, part.length));
    else str += part;
  });

  return str;

};

const css = (strings, ...values) => {

  let obj = {};

  let str = '';

  if(Array.isArray(strings)){
    for(let i = 0; i < strings.length; i++){
      if(strings[i]) str += strings[i];
      if(values[i]) str += values[i];
    }
  }else{
    str = strings;
  }

  let lines = str.split(';');

  lines.forEach(line => {
    line = line.trim();
    if(line){
      let parts = line.split(':');
      obj[toCamelCase(parts[0].trim())] = parts[1].trim();
    }
  });


  return obj

};

const HelloWorld = props => {

  let style = css`
    font-size: 20em;
    background-color: blue;
    color: white;
    transform: rotate(20deg);
  `;

  return <div style={style}>Hello World</div>;

};

ReactDOM.render(<HelloWorld />, document.querySelector('body'));