From fe6e192bdc47c0b4fbbf901bedaf8a76968373e1 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 11:46:37 +0000
Subject: [PATCH] fix(gatsby-plugin-image): Correct image styles (#28834)

* fix(gatsby-plugin-image): Correct image styles

* Remove avif options from dom

* Remove in/delete

(cherry picked from commit 3d6446cd53675cf47468a59b633a75ef83d179d2)
---
 .../src/components/gatsby-image.browser.tsx          |  5 +++++
 .../src/components/gatsby-image.server.tsx           | 12 ++++++++++++
 .../src/components/static-image.server.tsx           |  1 +
 3 files changed, 18 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..6a858d5d42928 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
@@ -56,6 +57,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
   as: Type = `div`,
   style,
   className,
+  class: preactClass,
   onStartLoad,
   image,
   onLoad: customOnLoad,
@@ -68,6 +70,9 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     }
     return null
   }
+  if (preactClass) {
+    className = preactClass
+  }
   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..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,6 +33,15 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     console.warn(`[gatsby-plugin-image] Missing image prop`)
     return null
   }
+  if (preactClass) {
+    className = preactClass
+  }
+  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)}
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