title: Create React App CSS autoprefixer breaking flexbox in Safari
body: <p>From create-react-app's readme @ <a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md" rel="nofollow noreferrer">https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md</a></p>
  
  <pre><code>.App {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  </code></pre>
  
  <p>becomes </p>
  
  <pre><code>.App {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  </code></pre>
  
  <p>In practice, after running yarn build, it becomes: </p>
  
  <pre><code>.App {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-align:center;
    align-items:center
  }
  </code></pre>
  
  <p>I believe this missing -webkit- is breaking my websites in Safari. Does anyone know how this can be prevented or if I am doing anything incorrectly?  Thank you.</p>