From cb08a434f6ec4a04e9722ab84ce2f851667f2c20 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 13:39:06 +0000
Subject: [PATCH 1/7] fix(gatsby-plugin-image): Fix handling of sizes prop in
 SSR

---
 .../src/components/gatsby-image.server.tsx                    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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 5e61eae3e95a5..7226dfe9f0349 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -49,7 +49,6 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     layout,
     images,
     placeholder,
-    sizes,
     backgroundColor: placeholderBackgroundColor,
   } = image
 
@@ -65,7 +64,7 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
   }
   if (images.fallback) {
     cleanedImages.fallback = {
-      src: images.fallback.src,
+      ...images.fallback,
       srcSet: images.fallback.srcSet
         ? removeNewLines(images.fallback.srcSet)
         : undefined,
@@ -106,7 +105,6 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
 
         <MainImage
           data-gatsby-image-ssr=""
-          sizes={sizes}
           className={imgClassName}
           style={imgStyle}
           {...(props as Omit<MainImageProps, "images" | "fallback">)}

From 5f1a182bcd43585f0ba8710dc849a4d04109cbb9 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 15:00:13 +0000
Subject: [PATCH 2/7] Update tests

---
 .../src/components/__tests__/gatsby-image.browser.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
index e185b281c720c..fe83c9b6d9592 100644
--- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
@@ -27,9 +27,9 @@ describe(`GatsbyImage browser`, () => {
       width: 100,
       height: 100,
       layout: `fluid`,
-      images: { fallback: { src: `some-src-fallback.jpg` } },
+      images: { fallback: { src: `some-src-fallback.jpg`, sizes: `192x192` } },
       placeholder: { sources: [] },
-      sizes: `192x192`,
+
       backgroundColor: `red`,
     }
 
@@ -168,7 +168,7 @@ describe(`GatsbyImage browser`, () => {
     expect(onStartLoadSpy).toBeCalledWith({ wasCached: false })
     expect(onLoadSpy).toBeCalled()
     expect(hooks.storeImageloaded).toBeCalledWith(
-      `{"fallback":{"src":"some-src-fallback.jpg"}}`
+      `{"fallback":{"src":"some-src-fallback.jpg","sizes":"192x192"}}`
     )
   })
 

From 983e2d6cc5d422cdd4d704ba8b8b7392349aa002 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 16:10:25 +0000
Subject: [PATCH 3/7] Update tests

---
 .../components/__tests__/gatsby-image.server.tsx  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
index 0b564c46fded3..c7ac564fb8036 100644
--- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
@@ -186,14 +186,15 @@ describe(`GatsbyImage server`, () => {
           data-main-image=""
           decoding="async"
           loading="lazy"
-          sizes="192x192"
           style="opacity: 0;"
         />
       `)
     })
 
     it(`has a valid src value when fallback is provided in images`, () => {
-      const images = { fallback: { src: `some-src-fallback.jpg` } }
+      const images = {
+        fallback: { src: `some-src-fallback.jpg`, sizes: `192x192` },
+      }
 
       const image: IGatsbyImageData = {
         width: 100,
@@ -233,6 +234,7 @@ icon64px.png 64w,
 icon-retina.png 2x,
 icon-ultra.png 3x,
 icon.svg`,
+          sizes: `192x192`,
         },
       }
 
@@ -242,7 +244,6 @@ icon.svg`,
         layout: `constrained`,
         images,
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -294,7 +295,6 @@ icon.svg`,
           data-main-image=""
           decoding="async"
           loading="lazy"
-          sizes="192x192"
           style="opacity: 0;"
         />
       `)
@@ -317,9 +317,11 @@ icon.svg`,
         width: 100,
         height: 100,
         layout: `constrained`,
-        images: { sources },
+        images: {
+          sources,
+          fallback: { src: `some-src-fallback.jpg`, sizes: `192x192` },
+        },
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -339,6 +341,7 @@ icon.svg`,
             alt="A fake image for testing purpose"
             data-gatsby-image-ssr=""
             data-main-image=""
+            data-src="some-src-fallback.jpg"
             decoding="async"
             loading="lazy"
             sizes="192x192"

From 8f4482fdee67317035b4c56cc46d90cd01f5d549 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Mon, 4 Jan 2021 16:12:10 +0000
Subject: [PATCH 4/7] Fix types

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

diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
index fe83c9b6d9592..c4243d431c404 100644
--- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { GatsbyImage, ISharpGatsbyImageData } from "../gatsby-image.browser"
+import { GatsbyImage, IGatsbyImageData } from "../gatsby-image.browser"
 import { render, waitFor } from "@testing-library/react"
 import * as hooks from "../hooks"
 
@@ -14,7 +14,7 @@ jest.mock(`../../../macros/terser.macro`, () => (strs): string => strs.join(``))
 
 describe(`GatsbyImage browser`, () => {
   let beforeHydrationContent: HTMLDivElement
-  let image: ISharpGatsbyImageData
+  let image: IGatsbyImageData
 
   beforeEach(() => {
     console.warn = jest.fn()
diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
index c7ac564fb8036..94ad14151f181 100644
--- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
@@ -170,7 +170,6 @@ describe(`GatsbyImage server`, () => {
         layout: `constrained`,
         images,
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -202,7 +201,6 @@ describe(`GatsbyImage server`, () => {
         layout: `constrained`,
         images,
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -279,7 +277,6 @@ icon.svg`,
         layout: `constrained`,
         images,
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -360,7 +357,6 @@ icon.svg`,
         layout: `fluid`,
         images: {},
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -386,7 +382,6 @@ icon.svg`,
         layout: `fixed`,
         images: {},
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
@@ -412,7 +407,6 @@ icon.svg`,
         layout: `constrained`,
         images: {},
         placeholder: { sources: [] },
-        sizes: `192x192`,
         backgroundColor: `red`,
       }
 
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 6a858d5d42928..f3b0ed01343ea 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -43,7 +43,6 @@ export interface IGatsbyImageData {
   layout: Layout
   height?: number
   backgroundColor?: string
-  sizes?: string
   images: Pick<MainImageProps, "sources" | "fallback">
   placeholder?: Pick<PlaceholderProps, "sources" | "fallback">
   width?: number

From 6e10b1d1cb7a851c962556668f97ce2dbdd94dcc Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Tue, 5 Jan 2021 12:21:14 +0000
Subject: [PATCH 5/7] Update e2e tests

---
 .../cypress/integration/constrained.js        | 26 +++++++++++++++++++
 .../cypress/integration/fixed.js              |  6 +++++
 .../cypress/integration/fluid.js              |  7 +++++
 .../src/pages/constrained.js                  | 16 +++++-------
 4 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 e2e-tests/gatsby-static-image/cypress/integration/constrained.js

diff --git a/e2e-tests/gatsby-static-image/cypress/integration/constrained.js b/e2e-tests/gatsby-static-image/cypress/integration/constrained.js
new file mode 100644
index 0000000000000..764f41456987e
--- /dev/null
+++ b/e2e-tests/gatsby-static-image/cypress/integration/constrained.js
@@ -0,0 +1,26 @@
+describe(`constrained`, () => {
+  beforeEach(() => {
+    cy.visit(`/constrained`).waitForRouteChange()
+  })
+
+  it(`renders a spacer svg`, () => {
+    cy.getTestElement(`image-constrained`)
+      .find(`img[role=presentation]`)
+      .should(`have.attr`, `src`)
+      .and(`match`, /svg\+xml/)
+  })
+
+  it(`includes sizes attribute with default width`, () => {
+    cy.getTestElement(`image-constrained`)
+      .find(`[data-main-image]`)
+      .should(`have.attr`, `sizes`)
+      .and(`equal`, `(min-width: 4015px) 4015px, 100vw`)
+  })
+
+  it(`includes sizes attribute with specified width`, () => {
+    cy.getTestElement(`image-constrained-limit`)
+      .find(`[data-main-image]`)
+      .should(`have.attr`, `sizes`)
+      .and(`equal`, `(min-width: 500px) 500px, 100vw`)
+  })
+})
diff --git a/e2e-tests/gatsby-static-image/cypress/integration/fixed.js b/e2e-tests/gatsby-static-image/cypress/integration/fixed.js
index 9f4fb2102abdf..dbe1b3994abab 100644
--- a/e2e-tests/gatsby-static-image/cypress/integration/fixed.js
+++ b/e2e-tests/gatsby-static-image/cypress/integration/fixed.js
@@ -28,4 +28,10 @@ describe(`fixed`, () => {
       .should(`exist`)
   })
 
+  it(`includes sizes attribute`, () => {
+    cy.getTestElement(fixedTestId)
+      .find(`[data-main-image]`)
+      .should(`have.attr`, `sizes`)
+      .should(`equal`, `500px`)
+  })
 })
diff --git a/e2e-tests/gatsby-static-image/cypress/integration/fluid.js b/e2e-tests/gatsby-static-image/cypress/integration/fluid.js
index aa816b0037f4f..892f677b5ba75 100644
--- a/e2e-tests/gatsby-static-image/cypress/integration/fluid.js
+++ b/e2e-tests/gatsby-static-image/cypress/integration/fluid.js
@@ -23,4 +23,11 @@ describe(`fluid`, () => {
       .should(`have.attr`, `style`)
       .and(`match`, /padding/)
   })
+
+  it(`includes sizes attribute`, () => {
+    cy.getTestElement(fluidTestId)
+      .find(`[data-main-image]`)
+      .should(`have.attr`, `sizes`)
+      .should(`equal`, `100vw`)
+  })
 })
diff --git a/e2e-tests/gatsby-static-image/src/pages/constrained.js b/e2e-tests/gatsby-static-image/src/pages/constrained.js
index ef1d22e46ae63..63af30989e279 100644
--- a/e2e-tests/gatsby-static-image/src/pages/constrained.js
+++ b/e2e-tests/gatsby-static-image/src/pages/constrained.js
@@ -5,17 +5,15 @@ import Layout from "../components/layout"
 
 const FluidPage = () => (
   <Layout>
-    <div data-testid="image-fluid">
+    <div data-testid="image-constrained">
       <StaticImage src="../images/citrus-fruits.jpg" alt="Citrus fruits" />
     </div>
-    <div data-testid="image-fluid-png">
-      <StaticImage src="../images/gatsby-icon.png" alt="Gatsby icon" />
-    </div>
-    <div data-testid="image-fluid-relative">
-      <StaticImage src="../../content/relative.jpg" alt="Citrus fruits" />
-    </div>
-    <div data-testid="invalid-image">
-      <StaticImage src="./does-not-exist.jpg" />
+    <div data-testid="image-constrained-limit">
+      <StaticImage
+        src="../images/citrus-fruits.jpg"
+        maxWidth={500}
+        alt="Citrus fruits"
+      />
     </div>
   </Layout>
 )

From 429fb4bed2cf54f42c73e7c5f6f54a387af7d449 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Tue, 5 Jan 2021 14:17:05 +0000
Subject: [PATCH 6/7] Update
 e2e-tests/gatsby-static-image/src/pages/constrained.js

Co-authored-by: LB <laurie@gatsbyjs.com>
---
 e2e-tests/gatsby-static-image/src/pages/constrained.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e-tests/gatsby-static-image/src/pages/constrained.js b/e2e-tests/gatsby-static-image/src/pages/constrained.js
index 63af30989e279..58eeaa4ea96d2 100644
--- a/e2e-tests/gatsby-static-image/src/pages/constrained.js
+++ b/e2e-tests/gatsby-static-image/src/pages/constrained.js
@@ -3,7 +3,7 @@ import { StaticImage } from "gatsby-plugin-image"
 
 import Layout from "../components/layout"
 
-const FluidPage = () => (
+const ConstrainedPage = () => (
   <Layout>
     <div data-testid="image-constrained">
       <StaticImage src="../images/citrus-fruits.jpg" alt="Citrus fruits" />

From e882f7822c7d223f3316cd933590844c64f36483 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Tue, 5 Jan 2021 14:23:33 +0000
Subject: [PATCH 7/7] Add test for size override

---
 .../cypress/integration/constrained.js                 |  7 +++++++
 e2e-tests/gatsby-static-image/src/pages/constrained.js | 10 +++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/e2e-tests/gatsby-static-image/cypress/integration/constrained.js b/e2e-tests/gatsby-static-image/cypress/integration/constrained.js
index 764f41456987e..393027977485e 100644
--- a/e2e-tests/gatsby-static-image/cypress/integration/constrained.js
+++ b/e2e-tests/gatsby-static-image/cypress/integration/constrained.js
@@ -23,4 +23,11 @@ describe(`constrained`, () => {
       .should(`have.attr`, `sizes`)
       .and(`equal`, `(min-width: 500px) 500px, 100vw`)
   })
+
+  it(`overrides sizes`, () => {
+    cy.getTestElement(`image-constrained-override`)
+      .find(`[data-main-image]`)
+      .should(`have.attr`, `sizes`)
+      .and(`equal`, `100vw`)
+  })
 })
diff --git a/e2e-tests/gatsby-static-image/src/pages/constrained.js b/e2e-tests/gatsby-static-image/src/pages/constrained.js
index 58eeaa4ea96d2..3319252c47145 100644
--- a/e2e-tests/gatsby-static-image/src/pages/constrained.js
+++ b/e2e-tests/gatsby-static-image/src/pages/constrained.js
@@ -15,7 +15,15 @@ const ConstrainedPage = () => (
         alt="Citrus fruits"
       />
     </div>
+    <div data-testid="image-constrained-override">
+      <StaticImage
+        src="../images/citrus-fruits.jpg"
+        maxWidth={500}
+        sizes="100vw"
+        alt="Citrus fruits"
+      />
+    </div>
   </Layout>
 )
 
-export default FluidPage
+export default ConstrainedPage