Vendor prefixes are glued together in Radium

Question

I'm using Radium to inline my styles in a simple React app, but somehow Radium is compiling the vendor prefixes one after the other:

import Radium from 'radium'
import React from 'react'

const styles = {
    base: {
        width: 'calc(100% - 4rem)',
        maxWidth: '60rem',
        margin: '0 auto'
    }
}

const Container = function (props) {
    return <div className='container' style={styles.base}>
        {props.children}
    </div>
}

export default Radium(Container)

This all seems to work fine with attributes that don't need vendor prefixing (like maxWidth or margin), but widths gets compiled as:

width: -webkit-calc(100% - 4rem),-moz-calc(100% - 4rem),calc(100% - 4rem);

And of course the browser is complaining that this is an invalid value. Same with display: flex, for example.

Any idea?

score 0 · Answer 1 · answered Nov 16 '17 at 16:28

Fixed, I missed one piece of information: this was old rendered in the server. Adding the appropriate user agent in the radium configuration solved it (https://github.com/FormidableLabs/radium/tree/master/docs/api#configuseragent).

Vendor prefixes are glued together in Radium

1 Answers1