fix(gatsby-plugin-sharp): convert "overlayWith" to "composite" (#17392)

* Added failing test for #17162

Tests running the `gatsby-plugin-sharp` with duotone

* Migrated overlayWith to composite

`overlayWith` was removed in sharp `v0.23`.  The replacement
(`composite`) provides the superset functionality supporting an array of
images to overlay/composite

* Specify explcit blend: over mode for sharp composite

packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap

@@ -10,6 +10,38 @@ Object {
 }
 `;
 
+exports[`gatsby-plugin-sharp duotone fixed 1`] = `
+Object {
+  "aspectRatio": 1,
+  "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAACXBIWXMAAAPoAAAD6AG1e1JrAAABk0lEQVQ4y7VUy07DMBDsf9IDhcauaVM4IajUIuALOFRI/R24wB8AgkpInJKI9ME5zDi24rx5HjZKvOP17Hg2neh8nNjo8CGESGL7sbpwMvrlaepriF4J3dQLMlsXvzbVFCKHLJ3J8+5PRxqlF0OzleFLkSG7Xrp4faiyRaI/Lgs13QhNVB5uCUyUTDyUloidvkjezvyMEB8B4uZkqAHCiR44bYtCcecSirD5XQDmIGzVjOrEiJo4fhvY2jWTG3C6g/TLmZ+8VwEJekWy20+loUSzA5kDp15BKJmXhmD6Iqcjtep5eSArk0ZQPPpqPNAaWiBpbKt0pLgEU2xuIOewTh7rmFWFRH9/M78uaG8yNuox4oYbbrQEhaI4HKEh7mvfS2OE98WR0r6P26zj2ofW5rWowlzY2WduAQxZ14odmNZuMWA0h6wo5pplDxj+MrgnqDM3W32E/QYNxaxN2f7ztNx6qWUCOC3H+F/Y35EU2XCw3QkGhBrHX/WXLbwG4wewoAwMst84t/0jH4ZG36DFLv9m7E/1HjvIa/canAAAAABJRU5ErkJggg==",
+  "height": 100,
+  "originalName": undefined,
+  "src": "/static/1234/59dbf/test.png",
+  "srcSet": "/static/1234/59dbf/test.png 1x",
+  "tracedSVG": undefined,
+  "width": 100,
+}
+`;
+
+exports[`gatsby-plugin-sharp duotone fluid 1`] = `
+Object {
+  "aspectRatio": 1,
+  "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAACXBIWXMAAAPoAAAD6AG1e1JrAAABk0lEQVQ4y7VUy07DMBDsf9IDhcauaVM4IajUIuALOFRI/R24wB8AgkpInJKI9ME5zDi24rx5HjZKvOP17Hg2neh8nNjo8CGESGL7sbpwMvrlaepriF4J3dQLMlsXvzbVFCKHLJ3J8+5PRxqlF0OzleFLkSG7Xrp4faiyRaI/Lgs13QhNVB5uCUyUTDyUloidvkjezvyMEB8B4uZkqAHCiR44bYtCcecSirD5XQDmIGzVjOrEiJo4fhvY2jWTG3C6g/TLmZ+8VwEJekWy20+loUSzA5kDp15BKJmXhmD6Iqcjtep5eSArk0ZQPPpqPNAaWiBpbKt0pLgEU2xuIOewTh7rmFWFRH9/M78uaG8yNuox4oYbbrQEhaI4HKEh7mvfS2OE98WR0r6P26zj2ofW5rWowlzY2WduAQxZ14odmNZuMWA0h6wo5pplDxj+MrgnqDM3W32E/QYNxaxN2f7ztNx6qWUCOC3H+F/Y35EU2XCw3QkGhBrHX/WXLbwG4wewoAwMst84t/0jH4ZG36DFLv9m7E/1HjvIa/canAAAAABJRU5ErkJggg==",
+  "density": 72,
+  "originalImg": "/static/1234/59dbf/test.png",
+  "originalName": undefined,
+  "presentationHeight": 100,
+  "presentationWidth": 100,
+  "sizes": "(max-width: 100px) 100vw, 100px",
+  "src": "/static/1234/59dbf/test.png",
+  "srcSet": "/static/1234/51d83/test.png 25w,
+/static/1234/851fc/test.png 50w,
+/static/1234/59dbf/test.png 100w",
+  "srcSetType": "image/png",
+  "tracedSVG": undefined,
+}
+`;
+
 exports[`gatsby-plugin-sharp fluid includes responsive image properties, e.g. sizes, srcset, etc. 1`] = `
 Object {
   "aspectRatio": 1,

packages/gatsby-plugin-sharp/src/__tests__/index.js

@@ -373,6 +373,24 @@ describe(`gatsby-plugin-sharp`, () => {
       expect(fluidSvg).toMatchSnapshot()
     })
   })
+
+  describe(`duotone`, () => {
+    const args = {
+      maxWidth: 100,
+      width: 100,
+      duotone: { highlight: `#ffffff`, shadow: `#cccccc`, opacity: 50 },
+    }
+
+    it(`fixed`, async () => {
+      let result = await fixed({ file, args })
+      expect(result).toMatchSnapshot()
+    })
+
+    it(`fluid`, async () => {
+      let result = await fluid({ file, args })
+      expect(result).toMatchSnapshot()
+    })
+  })
 })
 
 function getFileObject(absolutePath, name = `test`) {

packages/gatsby-plugin-sharp/src/duotone.js

@@ -108,9 +108,13 @@ async function overlayDuotone(
     .toBuffer()
 
   return await originalImage
-    .overlayWith(duotoneWithTransparency, {
-      raw: { width: info.width, height: info.height, channels: 4 },
-    })
+    .composite([
+      {
+        input: duotoneWithTransparency,
+        blend: `over`,
+        raw: { width: info.width, height: info.height, channels: 4 },
+      },
+    ])
     .toBuffer({ resolveWithObject: true })
     .then(({ data, info }) =>
       sharp(data, {