Pull out legacy browser support CSS (#470)

docs/src/modules/components/AppDrawer.js

@@ -101,7 +101,7 @@ function AppDrawer(props, context) {
         <div className={classes.toolbar}>
           <Link className={classes.title} href="/" onClick={onClose}>
             <Typography variant="title" color="inherit">
-              Material-UI
+              react-swipeable-views
             </Typography>
           </Link>
           {process.env.LIB_VERSION ? (

docs/src/pages/getting-started/supported-platforms.md

@@ -1,6 +1,6 @@
 ## Supported platforms
 
-<p class="description">Learn about the platforms, from modern to old, that are supported by Material-UI.</p>
+<p class="description">Learn about the platforms, from modern to old, that are supported by react-swipeable-views.</p>
 
 The API is as consistent as possible between the three platforms so
 the same component can be used independently on where it's running.
@@ -11,6 +11,10 @@ the same component can be used independently on where it's running.
 |:------|:-----|:--------------|:--------|:-------|:-------|
 | >= 10 | ✓    | x             | >= 28   | >= 29  | >= 8   |
 
+#### Legacy browser support
+
+react-swipeable-views supports modern browsers out-of-the-box, but requires additional CSS to support legacy browsers. To support IE 10 and older versions of Mobile Safari, include `react-swipeable-views/dist/legacy-browser-support.css`.
+
 ![browser](/static/platformBrowser.gif)
 
 ### iOS

packages/react-swipeable-views/.npmignore

@@ -1,4 +1,5 @@
 /*
 !/src/*.js
 !/lib/*.js
+!/dist/*
 *.test.js

packages/react-swipeable-views/dist/legacy-browser-support.css

@@ -0,0 +1,8 @@
+.react-swipeable-view-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+}
+
+.react-swipeable-view-container > div {
+  -ms-flex-negative: 0;
+}

packages/react-swipeable-views/src/SwipeableViews.js

@@ -20,31 +20,6 @@ function addEventListenerEnhanced(node, event, handler, options) {
   };
 }
 
-let styleInjected = false;
-
-// Support old version of iOS and IE 10.
-// To be deleted in 2019.
-function injectStyle() {
-  // Inject once for all the instances
-  if (!styleInjected) {
-    const style = document.createElement('style');
-    style.innerHTML = `
-      .react-swipeable-view-container {
-        display: -webkit-box;
-        display: -ms-flexbox;
-      }
-      .react-swipeable-view-container > div {
-        -ms-flex-negative: 0;
-      }
-    `;
-
-    if (document.body) {
-      document.body.appendChild(style);
-    }
-    styleInjected = true;
-  }
-}
-
 const styles = {
   container: {
     direction: 'ltr',
@@ -325,8 +300,6 @@ class SwipeableViews extends React.Component {
       }, 0);
     }
 
-    injectStyle();
-
     // Send all functions in an object if action param is set.
     if (this.props.action) {
       this.props.action({