How to set the same property twice with React inline styles

When building React applications it is common to use style={{}} properties on an element to set inline styles. The problem with this approach is that the style attribute accepts a Javascript object and these objects cannot have the same key twice. This means in order to provide fallback inlines styles we need a different approach.

Background image-set

Did you know you can set responsive background images using the image-set css function? This little known function acts in a similar way to the <picture><source/></picture> tags and the <img src-set/> attribute.

const SectionFeature = (props: {href:string;image:string;imageWebp?:string;title:string;}) => <section>
    <a
      title={props.title}
      href={props.href}
      style={{
        background: `transparent url(${props.image}) no-repeat center center`,
        backgroundImage: props.imageWebp ? `-webkit-image-set(url(${props.imageWebp}) 1x)` : undefined,
        backgroundSize: "cover",
      }}
    >
    </a>
</section>