fix(gatsby-plugin-sharp): Handle diff duotone settings (#35075)

Author: LekoArts

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

@@ -26,8 +26,8 @@ Object {
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAHNUN2pAAAAD1BMVEXugW5lZmbMemybcGl6aWdJY41OAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAVUlEQVQY062QUQ6AMAhD28L9z2w2RObEH+P7WJquK2TAgEh0SoVfF+GQPk9DC5kvxNLv+QYJ1eBVy0VGxJYJltFfkI/q+87T2mzxQo3pj8rmI6QPGx6CUQCaU8vWagAAAABJRU5ErkJggg==",
   "height": 100,
   "originalName": "test.png",
-  "src": "/static/1234/df2e1/test.png",
-  "srcSet": "/static/1234/df2e1/test.png 1x",
+  "src": "/static/1234/31820/test.png",
+  "srcSet": "/static/1234/31820/test.png 1x",
   "tracedSVG": undefined,
   "width": 100,
 }
@@ -38,15 +38,15 @@ Object {
   "aspectRatio": 1,
   "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAHNUN2pAAAAD1BMVEXugW5lZmbMemybcGl6aWdJY41OAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAVUlEQVQY062QUQ6AMAhD28L9z2w2RObEH+P7WJquK2TAgEh0SoVfF+GQPk9DC5kvxNLv+QYJ1eBVy0VGxJYJltFfkI/q+87T2mzxQo3pj8rmI6QPGx6CUQCaU8vWagAAAABJRU5ErkJggg==",
   "density": 72,
-  "originalImg": "/static/1234/df2e1/test.png",
+  "originalImg": "/static/1234/31820/test.png",
   "originalName": "test.png",
   "presentationHeight": 100,
   "presentationWidth": 100,
   "sizes": "(max-width: 100px) 100vw, 100px",
-  "src": "/static/1234/df2e1/test.png",
-  "srcSet": "/static/1234/bd373/test.png 25w,
-/static/1234/3a8be/test.png 50w,
-/static/1234/df2e1/test.png 100w",
+  "src": "/static/1234/31820/test.png",
+  "srcSet": "/static/1234/c6018/test.png 25w,
+/static/1234/c752e/test.png 50w,
+/static/1234/31820/test.png 100w",
   "srcSetType": "image/png",
   "tracedSVG": undefined,
 }

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

@@ -615,6 +615,28 @@ describe(`gatsby-plugin-sharp`, () => {
       const result = await fluid({ file, args })
       expect(result).toMatchSnapshot()
     })
+
+    it(`creates two different images for different duotone settings`, async () => {
+      const testName = `duotone-digest-test`
+      const firstImage = await fluid({
+        file: getFileObject(path.join(__dirname, `images/test.png`), testName),
+        args: {
+          maxWidth: 100,
+          width: 100,
+          duotone: { highlight: `#BBFFE6`, shadow: `#51758D` },
+        },
+      })
+      const secondImage = await fluid({
+        file: getFileObject(path.join(__dirname, `images/test.png`), testName),
+        args: {
+          maxWidth: 100,
+          width: 100,
+          duotone: { highlight: `#F1D283`, shadow: `#000000` },
+        },
+      })
+
+      expect(firstImage.src).not.toEqual(secondImage.src)
+    })
   })
 
   describe(`stats`, () => {

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

@@ -83,9 +83,12 @@ function calculateImageDimensionsAndAspectRatio(file, options) {
 }
 
 function prepareQueue({ file, args }) {
-  const { pathPrefix, ...options } = args
-  const argsDigestShort = createArgsDigest(options)
-  const imgSrc = `/${file.name}.${options.toFormat}`
+  const { pathPrefix, duotone, ...rest } = args
+  // Duotone is a nested object inside transformOptions and has a [Object: Null Prototype]
+  // So it's flattened into a new object so that createArgsDigest also takes duotone into account
+  const digestArgs = Object.assign(rest, duotone)
+  const argsDigestShort = createArgsDigest(digestArgs)
+  const imgSrc = `/${file.name}.${args.toFormat}`
   const outputDir = path.join(
     process.cwd(),
     `public`,
@@ -99,11 +102,11 @@ function prepareQueue({ file, args }) {
 
   const { width, height, aspectRatio } = calculateImageDimensionsAndAspectRatio(
     file,
-    options
+    args
   )
 
   // encode the file name for URL
-  const encodedImgSrc = `/${encodeURIComponent(file.name)}.${options.toFormat}`
+  const encodedImgSrc = `/${encodeURIComponent(file.name)}.${args.toFormat}`
 
   // Prefix the image src.
   const digestDirPrefix = `${file.internal.contentDigest}/${argsDigestShort}`