const node = document.createElement('div');
const styleHandler = style(node);
styleHandler({
  "--theme-color": "red",
  backgroundColor: "var(--theme-color)",
  "border-color": "blue",
  "z-index": [200, "important"],
});
node.outerHTML;
// "<div style=\"--theme-color:red; background-color:var(--theme-color); border-color: blue; z-index: 200 !important;\"></div>"

const node = document.createElement('div');
const styleHandler = style(node);
styleHandler(`
  --theme-color:red;
  background-color:var(--theme-color);
  border-color: blue;
  z-index: 200 !important;
`);
node.outerHTML;
// "<div style=\"--theme-color:red; background-color:var(--theme-color); border-color: blue; z-index: 200 !important;\"></div>"

const {isArray} = Array;

// Compute hyphen case (WebkitBorderBottomLeftRadius -> -webkit-border-bottom-left-radius, msTextCombineHorizontal -> -ms-text-combine-horizontal)
const nameCaseMap = new Map();
{
  const regExp = /^ms|[A-Z]/g;
  for(let name in document.documentElement.style){
    const hyphenCaseName = name.replace(regExp, "-$&").toLowerCase();
    if(name !== hyphenCaseName){
      nameCaseMap.set(name, hyphenCaseName);
    }
  }
}

let serializer;

function updateStyle(style, value){
  if(typeof value !== "object"){
    style.cssText = value;
    return;
  }
  
  style.cssText = "";// erase previous values
  const setProperty = style.setProperty.bind(style);
  for (let name in value){
    const rawValue = value[name];
    name = nameCaseMap.get(name) || name;// as hyphen case
    if(isArray(rawValue)){
      setProperty(name, rawValue[0], rawValue[1]);
    }else{
      setProperty(name, rawValue);
    }
  }
}

export const style = node => value => {
  const {style} = node;
  
  // SVGElement don't have a style property until it's attached to a document.
  // Use the native serializer and set the style attribute instead
  if(!style){
    if(!serializer){
      const {namespaceURI, tagName} = document.documentElement;
      serializer = document.implementation.createDocument(namespaceURI, tagName).documentElement.style;
    }
  
    updateStyle(serializer, value);
    node.setAttribute("style", serializer.cssText);
    return;
  }
  
  updateStyle(style, value);
};

import {render, html} from 'uhtml';

render(document.body, html`<textarea>${undefined}</textarea>`);
console.log(document.body.innerHTML);