UXtemple/babel-plugin-react-autoprefix

Plugin doesn't prefix `display: flex` properly

Closed this issue · 2 comments

Tried the following in a demo app:

class App {
  render() {
    return <div style={{ display: 'flex' }}>hi</div>;
  }
}

When prefixing { display: 'flex' } I expect the output to be

  { display: 'flex;display:-webkit-flex;display:-ms-flexbox' }

See: https://github.com/petehunt/jsxstyle/blob/master/lib/autoprefix.js#L81

But instead I get:

{ display: [3, 'flex'] }

Thanks :) It should be fixed with UXtemple/autoprefix@2317a09. Would you double check?

The array of values is correct now, but you have to combine them all together since React will join an array of values by a comma which won't be valid CSS.

For example, style={{ display: ['-webkit-flex', 'flex'] }} will give you the CSS property display: -webkit-flex,flex; on the node.