How to use hyphenate-style-name - 9 common examples

.map(property => {
      const value = domStyle[property];
      const prop = hyphenateStyleName(property);
      // The prefixer may return an array of values:
      // { display: [ '-webkit-flex', 'flex' ] }
      // to represent "fallback" declarations
      // { display: -webkit-flex; display: flex; }
      if (Array.isArray(value)) {
        return value.map(v => `${prop}:${v}`).join(';');
      } else {
        return `${prop}:${value}`;
      }
    })
    // Once properties are hyphenated, this will put the vendor

const keyVal = (k, v) => {
  const realKey = hyphenate(k)

  // px shorthand
  if (typeof v === 'number') {
    v = `${v}px`
  }
  if (v === true) {
    return realKey
  }
  if (v === false) {
    return negate(realKey)
  }
  return `(${realKey}: ${v})`
}

return Object.keys(declaration).reduce((css, property, index, properties) => {
    let value = declaration[property];
    const hyphenatedProperty = hyphenateStyleName(property);
    if (Array.isArray(value)) {
      value = value.join(';' + hyphenatedProperty + ':');
    }
    if (index !== properties.length - 1) {
      value = value + ';';
    }
    return css + hyphenatedProperty + ':' + value;
  }, '');
}

function convertCase(style) {
  const converted = {}

  for (const prop in style) {
    const key = prop.indexOf('--') === 0 ? prop : hyphenate(prop)

    converted[key] = style[prop]
  }

  if (style.fallbacks) {
    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase)
    else converted.fallbacks = convertCase(style.fallbacks)
  }

  return converted
}

(result, val, key) => {
          result[hyphenateStyleName(key)] = val;
        },
        {}

const createDeclarationString = (prop, val) => {
  const name = hyphenateStyleName(prop);
  const value = normalizeValue(prop, val);
  if (Array.isArray(val)) {
    return val.map(v => `${name}:${v}`).join(';');
  }
  return `${name}:${value}`;
};

for (let styleName in styles) {
    if (!styles.hasOwnProperty(styleName)) {
      continue;
    }
    const isCustomProperty = styleName.indexOf('--') === 0;
    if (process.env.NODE_ENV !== 'production') {
      if (!isCustomProperty) {
        warnValidStyle(styleName, styles[styleName], getStack);
      }
    }
    const styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
    if (styleName === 'float') {
      styleName = 'cssFloat';
    }
    if (isCustomProperty) {
      const name = isCustomProperty ? styleName : hyphenateStyleName(styleName);
      style.setProperty(name, styleValue);
    } else {
      style[styleName] = styleValue;
    }
  }
}

return keys.reduce((result, key) => {
    result[hyphenate(key)] = obj[key]
    return result
  }, {})
}