convert prop camelCase css names into standard dashed css properties to easily use in styled-components and etc.

prop-to-css.js

export const PROPtoCSS = (props) => {
    if(Object.keys(props).length==0) return {}
    const css ={}
    for(let propName in props){
        const chars = propName.split(/([A-Z])/g)
        
        const names = chars.map((v, i, arr)=>{
            if(v.match(/[A-Z]/)){
                arr[i+1] = `${v.toLowerCase()}${arr[i+1]}`
            }
            return v
        }).filter(v => !v.match(/[A-Z]/))

        const cssProp = names.join("-")
        css[cssProp] = props[propName]
    }
    return css
}

prop-to-css.test.js

import {PROPtoCSS} from "./_prop-to-css"

describe("PROPtoCSS", () => {

    it('basic case', () => {
        const props = {
            backgroundColor:"red"
        }
        const result = PROPtoCSS(props)
        const expected = {}
        expected["background-color"] = "red"
        expect(result).toEqual(expected)

  });


  it("handles a complex case", () => {
    const props = {
        gridTemplateAreas:"red"
    }
    const result = PROPtoCSS(props)
    const expected = {}
    expected["grid-template-areas"] = "red"
    expect(result).toEqual(expected)
  })
    
  it("handles a case where not camel", () => {
    const props = {
        color:"red"
    }
    const result = PROPtoCSS(props)
    const expected = {}
    expected["color"] = "red"
    expect(result).toEqual(expected)
  })

  it("handles many keys", () => {
    const props = {
        color:"red",
        backgroundColor: "red",
        gridTemplateAreas: "red"
    }
    const result = PROPtoCSS(props)
    const expected = {}
    expected["color"] = "red"
    expected["background-color"] = "red"
    expected["grid-template-areas"] = "red"
    
    expect(result).toEqual(expected)
  })
  
})