feat(gatsby-image): Add gatsby-image/withIEPolyfill export with object-fit/position support

packages/gatsby-image/.gitignore

@@ -1,2 +1,3 @@
 /*.js
+/withIEPolyfill/*.js
 yarn.lock

packages/gatsby-image/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
+    "object-fit-images": "^3.2.4",
     "prop-types": "^15.6.1"
   },
   "devDependencies": {

packages/gatsby-image/src/withIEPolyfill/index.js

@@ -0,0 +1,51 @@
+import React, { Component, createRef, forwardRef } from "react"
+import PropTypes from "prop-types"
+import Image from "../index"
+
+class ImageWithIEPolyfill extends Component {
+  imageRef = this.props.innerRef || createRef()
+
+  // Load object-fit/position polyfill if required (e.g. in IE)
+  componentDidMount() {
+    const testImg = document.createElement(`img`)
+    if (
+      typeof testImg.style.objectFit === `undefined` ||
+      typeof testImg.style.objectPosition === `undefined`
+    ) {
+      import(`object-fit-images`).then(({ default: ObjectFitImages }) =>
+        ObjectFitImages(this.imageRef.current.imageRef.current)
+      )
+    }
+  }
+
+  render() {
+    const { objectFit, objectPosition, ...props } = this.props
+
+    return (
+      <Image
+        ref={this.imageRef}
+        {...props}
+        imgStyle={{
+          ...props.imgStyle,
+          objectFit: objectFit,
+          objectPosition: objectPosition,
+          fontFamily: `"object-fit: ${objectFit}; object-position: ${objectPosition}"`,
+        }}
+      />
+    )
+  }
+}
+
+ImageWithIEPolyfill.propTypes = {
+  objectFit: PropTypes.string,
+  objectPosition: PropTypes.string,
+}
+
+ImageWithIEPolyfill.defaultProps = {
+  objectFit: `cover`,
+  objectPosition: `50% 50%`,
+}
+
+export default forwardRef((props, ref) => (
+  <ImageWithIEPolyfill {...props} innerRef={ref} />
+))

yarn.lock

@@ -13130,6 +13130,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-fit-images@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.4.tgz#6c299d38fdf207746e5d2d46c2877f6f25d15b52"
+  integrity sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg==
+
 object-hash@^1.1.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.0.tgz#76d9ba6ff113cf8efc0d996102851fe6723963e2"