From b206625231c93a5a089428e9aa89db9dfac7fd5f Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 10:33:55 +0000
Subject: [PATCH 1/3] fix(gatsby-plugin-image): Correct image styles

---
 .../src/components/gatsby-image.browser.tsx          |  5 +++++
 .../src/components/gatsby-image.server.tsx           | 12 ++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
index f93f00bcb03b0..7f050deba3fd6 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -27,6 +27,7 @@ export interface GatsbyImageProps
   alt: string
   as?: ElementType
   className?: string
+  class?: string
   imgClassName?: string
   image: IGatsbyImageData
   imgStyle?: CSSProperties
@@ -68,6 +69,10 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     }
     return null
   }
+  if (`class` in props) {
+    className = props.class
+    delete props.class
+  }
   const { width, height, layout, images } = image
 
   const root = useRef<HTMLElement>()
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
index 0802f6a8ee8de..20c298d5644cf 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -32,6 +32,16 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     console.warn(`[gatsby-plugin-image] Missing image prop`)
     return null
   }
+  if (`class` in props) {
+    className = props.class
+    delete props.class
+  }
+  imgStyle = {
+    objectFit,
+    objectPosition,
+    backgroundColor,
+    ...imgStyle,
+  }
 
   const {
     width,
@@ -97,6 +107,8 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
         <MainImage
           data-gatsby-image-ssr=""
           sizes={sizes}
+          className={imgClassName}
+          style={imgStyle}
           {...(props as Omit<MainImageProps, "images" | "fallback">)}
           // When eager is set we want to start the isLoading state on true (we want to load the img without react)
           {...getMainProps(loading === `eager`, false, cleanedImages, loading)}

From 0969142cf28c19b231a1cf683d65f7b1d49b5da6 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 10:54:21 +0000
Subject: [PATCH 2/3] Remove avif options from dom

---
 .../gatsby-plugin-image/src/components/static-image.server.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
index 3f9ab43849acd..c87d7f3045371 100644
--- a/packages/gatsby-plugin-image/src/components/static-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
@@ -53,6 +53,7 @@ export function _getStaticImage(
     jpgOptions,
     pngOptions,
     webpOptions,
+    avifOptions,
     blurredOptions,
     /* eslint-enable @typescript-eslint/no-unused-vars */
     ...props

From 588f1c1f22d53dc0d998679a3624728d1360f3ff Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 11:13:59 +0000
Subject: [PATCH 3/3] Remove in/delete

---
 .../src/components/gatsby-image.browser.tsx                 | 6 +++---
 .../src/components/gatsby-image.server.tsx                  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
index 7f050deba3fd6..6a858d5d42928 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -57,6 +57,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
   as: Type = `div`,
   style,
   className,
+  class: preactClass,
   onStartLoad,
   image,
   onLoad: customOnLoad,
@@ -69,9 +70,8 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     }
     return null
   }
-  if (`class` in props) {
-    className = props.class
-    delete props.class
+  if (preactClass) {
+    className = preactClass
   }
   const { width, height, layout, images } = image
 
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
index 20c298d5644cf..5e61eae3e95a5 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -18,6 +18,7 @@ export const GatsbyImageHydrator: FunctionComponent<{
 export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyImage({
   as,
   className,
+  class: preactClass,
   style,
   image,
   loading = `lazy`,
@@ -32,9 +33,8 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     console.warn(`[gatsby-plugin-image] Missing image prop`)
     return null
   }
-  if (`class` in props) {
-    className = props.class
-    delete props.class
+  if (preactClass) {
+    className = preactClass
   }
   imgStyle = {
     objectFit,